⚽站点配置4

数学公式

不要在标题里使用 mathjax 语法，toc 目录不一定能正确显示 mathjax，可能显示 mathjax 代码

建议使用 KaTex 获得更好的效果，下文有介绍！

修改 主题配置文件:

mathjax:
  enable: true
  # true 表示每一页都加载mathjax.js
  # false 需要时加载，须在使用的Markdown Front-matter 加上 mathjax: true
  per_page: false

如果 per_page 设为 true,则每一页都会加载 Mathjax 服务。设为 false，则需要在文章 Front-matter 添加 mathjax: true,对应的文章才会加载 Mathjax 服务。

然后你需要修改一下默认的 markdown 渲染引擎来实现 MathJax 的效果。

查看: hexo-renderer-kramed

以下操作在你 hexo 博客的目录下 (不是 Anzhiyu 的目录):

安装插件

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

kramed:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

不要在标题里使用 KaTeX 语法，toc 目录不能正确显示 KaTeX。

首先禁用 MathJax（如果你配置过 MathJax 的话），然后修改你的主题配置文件以便加载 katex.min.css:

katex:
  enable: true
  # true 表示每一页都加载katex.js
  # false 需要时加载，须在使用的Markdown Front-matter 加上 katex: true
  per_page: false
  hide_scrollbar: true

你不需要添加 katex.min.js 来渲染数学方程。相应的你需要卸载你之前的 hexo 的 markdown 渲染器，然后安装其它插件。

因为 KaTeX 更快更轻量，因此没有 MathJax 的功能多（比如右键菜单）。为那些使用 MathJax 的用户，主题也内置了 katex 的复制功能。

渲染器

卸载掉 marked 插件，安装 hexo-renderer-markdown-itopen in new window

npm un hexo-renderer-marked --save # 如果有安装这个的话，卸载
npm un hexo-renderer-kramed --save # 如果有安装这个的话，卸载

npm i hexo-renderer-markdown-it --save # 需要安装这个渲染插件
npm install katex @renbaoshuo/markdown-it-katex #需要安装这个katex插件

在 hexo 的根目录的_config.yml 中配置

markdown:
  plugins:
    - "@renbaoshuo/markdown-it-katex"

如需配置其它参数，请参考 katex 官网

注意，此方法生成的 katex 没有斜体

卸载掉 marked 插件，然后安装新的hexo-renderer-markdown-it-plus:

# 替换 `hexo-renderer-kramed` 或者 `hexo-renderer-marked` 等hexo的markdown渲染器
# 你可以在你的package.json里找到hexo的markdwon渲染器，并将其卸载
npm un hexo-renderer-marked --save

# or

npm un hexo-renderer-kramed --save


# 然后安装 `hexo-renderer-markdown-it-plus`
npm i @upupming/hexo-renderer-markdown-it-plus --save

注意到 hexo-renderer-markdown-it-plus 已经无人持续维护, 所以我们使用 @upupming/hexo-renderer-markdown-it-plus。这份 fork 的代码使用了 @neilsustc/markdown-it-katex 同时它也是 VSCode 的插件 Markdown All in Oneopen in new window 所使用的, 所以我们可以获得最新的 KaTex 功能例如 \tag{}。

你还可以通过 @neilsustc/markdown-it-katex 控制 KaTeX 的设置，所有可配置的选项参见 https://katex.org/docs/options.htmlopen in new window。比如你想要禁用掉 KaTeX 在命令行上输出的宂长的警告信息，你可以在根目录的 _config.yml 中使用下面的配置将 strict 设置为 false

markdown_it_plus:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      enable: true
      options:
        strict: false

当然，你还可以利用这个特性来定义一些自己常用的 macros。

搜索系统

记得运行 hexo clean

使用 hexo-algoliasearchopen in new window，请记得配置 fields 参数的 title, permalink 和 content

你需要安装 hexo-algoliasearchopen in new window. 根据它的说明文档去做相应的配置。

修改主题配置文件

algolia_search:
  enable: true
  hits:
    per_page: 6

hexo 配置文件

# algolia搜索: https://github.com/LouisBarranqueiro/hexo-algoliasearch
algolia:
  appId: "xxxx"
  apiKey: "xxxx"
  adminApiKey: "xxxx"
  chunkSize: 5000
  indexName: "hexo"
  fields:
    - content:strip:truncate,0,200
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title

记得运行 hexo clean

你需要安装 hexo-generator-search，根据它的文档去做相应配置

修改主题配置文件

local_search:
  enable: false
  preload: false
  CDN:

参数

解释

enable

是否开启本地搜索

preload

预加载，开启后，进入网页后会自动加载搜索文件。关闭时，只有点击搜索按钮后，才会加载搜索文件

CDN

搜索文件的 CDN 地址（默认使用的本地链接）

DocSearch 是另一款由 algolia 提供的搜索服务，具体申请和使用请查看 DocSearch 文档

docsearch:
  enable: false
  appId:
  apiKey:
  indexName:
  option:

参数

解释

enable

【必须】是否开启 docsearch

appId

【必须】你的 Algolia 应用 ID

apiKey

【必须】你的 Algolia 搜索 API key

indexName

【必须】你的 Algolia index name

option

【可选】其余的 docsearch 配置具体配置可查这里

只能选择一个分享服务商

如果你不知道 sharejsopen in new window，看看它的説明。

修改 主题配置文件

sharejs:
  enable: true
  sites: facebook,twitter,wechat,weibo,qq #想要显示的内容

可以到 addtoany 查看使用説明

addtoany:
  enable: true
  item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

开启评论需要在 comments-use 中填写你需要的评论。

支持双评论显示，只需要配置两个评论（第一个为默认显示）

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Valine/Waline/Twikoo/
  use: Twikoo,Waline # Twikoo/Waline
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  count: true # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

参数

解释

use

使用的评论（请注意，最多支持两个，如果不需要请留空）

text

是否显示评论服务商的名字

lazyload

是否为评论开启 lazyload，开启后，只有滚动到评论位置时才会加载评论所需要的资源（开启 lazyload 后，评论数将不显示）

count

是否在文章顶部显示评论数

card_post_count

是否在首页文章卡片显示评论数

Twikoo 是一个简洁、安全、无后端的静态网站评论系统，基于腾讯云开发。

具体如何配置评论，请查看 Twikoo 文档

你只需要把获取到的 环境 ID (envId) 填写到配置上去就行

修改 主题配置文件

# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
  envId:
  region:
  visitor: false
  option:

参数

解释

envId

环境 ID

region

环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数

visitor

是否显示文章阅读数

option

可选配置

card_post_count

是否在首页文章卡片显示评论数

开启 visitor 后，文章页的访问人数将改为 Twikoo 提供，而不是 不蒜子

遵循 Valine的指示去配置你的 LeanCloud 应用。以及查看相应的配置说明。

然后修改 主题配置文件:

valine:
  appId: # leancloud application app id
  appKey: # leancloud application app key
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  visitor: false
  option:

开启 visitor 后，文章页的访问人数将改为 Valine 提供，而不是不蒜子

Valine 于 v1.4.5 开始支持自定义表情，如果你需要自行配置，请在 emojiCDN 配置表情 CDN。

同时在 Hexo 工作目录下的 source/_data/创建一个 json 文件 valine.json,等同于 Valine 需要配置的 emojiMaps，valine.json 配置方式可参考如下

valine.json

{
  "tv_doge": "6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png",
  "tv_亲亲": "a8111ad55953ef5e3be3327ef94eb4a39d535d06.png",
  "tv_偷笑": "bb690d4107620f1c15cff29509db529a73aee261.png",
  "tv_再见": "180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png",
  "tv_冷漠": "b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png",
  "tv_发怒": "34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png",
  "tv_发财": "34db290afd2963723c6eb3c4560667db7253a21a.png",
  "tv_可爱": "9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png",
  "tv_吐血": "09dd16a7aa59b77baa1155d47484409624470c77.png",
  "tv_呆": "fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png",
  "tv_呕吐": "9f996894a39e282ccf5e66856af49483f81870f3.png",
  "tv_困": "241ee304e44c0af029adceb294399391e4737ef2.png",
  "tv_坏笑": "1f0b87f731a671079842116e0991c91c2c88645a.png",
  "tv_大佬": "093c1e2c490161aca397afc45573c877cdead616.png",
  "tv_大哭": "23269aeb35f99daee28dda129676f6e9ea87934f.png",
  "tv_委屈": "d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png",
  "tv_害羞": "a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png",
  "tv_尴尬": "7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png",
  "tv_微笑": "70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png",
  "tv_思考": "90cf159733e558137ed20aa04d09964436f618a1.png",
  "tv_惊吓": "0d15c7e2ee58e935adc6a7193ee042388adc22af.png"
}

Waline - 一款从 Valine 衍生的带后端评论系统。可以将 Waline 等价成 With backend Valine。

具体配置可参考 waline 文档

然后修改主题配置文件:

waline:
  serverURL: # Waline server address url
  bg: # waline background
  pageview: false
  option:

开启 pageview 后，文章页的访问人数将改为 Waline 提供，而不是不蒜子

在线聊天

这些工具都提供了一个按钮可以打开/关闭聊天窗口。主题也提供了一个集合主题特色的按钮来替换这些工具本身的按钮，这个聊天按钮将会出现在右下角里。你只需要把 chat_btn 打开就行。

修改 主题配置文件

# Chat Button [recommend]
# It will create a button in the bottom right corner of website, and hide the origin button
chat_btn: true

为了不影响访客的体验，主题提供一个 chat_hide_show 配置设为 true 后，使用工具提供的按钮时，只有向上滚动才会显示聊天按钮，向下滚动时会隐藏按钮。

修改 主题配置文件

# The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down
chat_hide_show: true

如果使用工具自带的聊天按钮，按钮位置可能会遮挡右下角图标，请配置 rightside-bottom 调正右下角图标位置

配置 chatra,需要知道 Public key

打开 chatra 并注册账号。你可以在 Preferences 中找到 Public key

修改 主题配置文件

# chatra
# https://chatra.io/
chatra:
  enable: true
  id: xxxxxxxx

chatra 的样式你可以 Chat Widget 自行配置

配置 tidio,需要知道 Public key

打开 tidioopen in new window 并注册账号。你可以在 Preferences > Developer 中找到 Public key

修改 主题配置文件

# tidio
# https://www.tidio.com/
tidio:
  enable: true
  public_key: XXXX

tidio的样式你可以Channels自行配置

打开 daovoice 和注册帐号

找到你的 app id

修改 主题配置文件

# daovoice
# http://daovoice.io/
daovoice:
  enable: true
  app_id: xxxxx

可在聊天设置里配置聊天按钮等样式

打开 crisp 并注册帐号

找到需要的网站 ID

# crisp
# https://crisp.chat/en/
crisp:
  enable: false
  website_id: xxxxxxxx

messenger 为 Facebook 旗下的聊天服务

具体操作请查看 Facebook 洽谈附加程式 - Messenger 平台

messenger:
  enable: false
  pageID: xxxxx
  lang: zh_TW # Language en_US/zh_CN/zh_TW and so on

最后更新于1年前