🖼 所有搭建博客的汇总在这里：Blog全程搭建，示例🚀test.ruiqingyan.com。

🌺 之后所有的操作都在Webstrom进行，需要的可以点进去看看

🌻 参考 Jerry’s Blog，用更多相关问题请去他的博客看

1、Math数学——KaTeX

在主题配置文件

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

在终端下载hexo-renderer-kramed渲染

1
cnpm install hexo-renderer-kramed --save

在hexo根目录配置文件

1
2
3
4
5
6
7
8
9
kramed:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

如需配置其它参数，请参考hexo-renderer-kramed

下载搜索相关配置

1
npm install hexo-generator-search --save

在hexo根目录配置文件

1
2
3
4
5
search:
  path: search.xml
  field: post
  content: true
  template:

在主题配置文件

1
2
3
4
5
6
7
8
9
10
11
# Local search
local_search:
  enable: true
  # 预加载，开启后只有点击搜索才会开始加载搜索文件
  preload: false
  # 匹配的文章结果，默认显示最开始的 1段结果
  top_n_per_article: 1
  # 将 html 字符串解码为可读字符串
  unescape: false
  # 搜索文件的 CDN 地址（默认使用的本地链接）
  CDN:

3、分享——Sharejs

修改主题配置文件

1
2
3
sharejs:
  enable: true
  sites: facebook,twitter,wechat,weibo,qq  #想要显示的内容
2409.1.分享文章

4、评论——Waline

具体的服务器部署需要自己看这个文档https://waline.js.org，里面介绍很详细

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  use: 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: true
  count: true # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page
  
  
  
waline:
  serverURL:  # 这里需要填写你的url
  bg: # waline background
  pageview: true
  option:
2409.2.评论区例图

5、在线聊天——chatra

打开chatra并注册账号。

你可以在Preferences中找到Public key。

修改 主题配置文件。

1
2
3
4
5
6
# chatra
# https://chatra.io/
chatra:
  enable: true
  id: xxxxxxxx

2409.3.chatra示例图

用户在使用chat聊天后，信息会发送到你的chatra和邮箱。

6、分析统计——谷歌分析（⭕未配置）

1、登录谷歌分析的官方网站

2、找到你的谷歌分析的跟踪ID

2409.4.谷歌跟踪ID 
1
google_analytics: 你的代码 # 通常以`G-`打头

7、广告（⭕未配置）

我没做

主题已基集成谷歌广告（自动广告）

1
2
3
4
5
6
google_adsense:
  enable: true
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client: # 填入个人识别码
  enable_page_level_ads: true

8、网站验证（⭕未配置）

我没做

如果需要搜索引擎收录网站，可能需要登录对应搜索引擎的管理平台进行提交。
各自的验证码可从各自管理平台拿到

1
2
3
4
5
site_verification:
  # - name: google-site-verification
  #   content: xxxxxx
  # - name: baidu-site-verification
  #   content: xxxxxxx

9、美化/特效

9.1 网站背景

1
2
3
4
5
# 图片格式 url(http://xxxxxx.com/xxx.jpg)
# 颜色（HEX值/RGB值/顔色单词/渐变色)
# 留空 不显示背景
background: url(https://ruiqingyan.oss-cn-shenzhen.aliyuncs.com/uPic/vd4.jpg)

2409.5.背景例图

9.2 footer背景

页面底部背景

1
2
# footer是否显示图片背景(与top_img一致)
footer_bg: true  # 也可以设置/img/下的图片文件

9.3 打字效果

1
2
3
4
5
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: false #  open shake (抖動特效)
  mobile: false

9.4 鼠标点击效果

我设置的是文字，只修改这个配置就ok

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Mouse click effects: words (鼠標點擊效果: 文字)
ClickShowText:
  enable: true
  text:
    - 玫瑰
    - 月季
    - 牡丹
    - 樱花
    - 丁香
    - 蝴蝶兰
    - 郁金香
    - 紫罗兰
    - 满天星
    - 凤仙花
  fontSize: 15px
  random: true
  mobile: false

9.5 开启页面美化

开启美化后才能

1
2
3
4
5
6
# 美化页面显示
beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f863'
  title-prefix-icon-color: "#F47466"
2409.6.未开启美化
2409.7.开启美化

9.6 网站副标题

打开网页看到的一些话，我的配置是下面这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# the subtitle on homepage (主頁subtitle)
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # Customize typed.js (配置typed.js)
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） https://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  loop: true
  source: false
  # 如果关闭打字效果，subtitle 只会显示 sub 的第一行文字
  sub:
    - 落日沉溺于橘色的海，晚风沦陷于赤诚的爱。
    - 山茶花读不懂白玫瑰，北山的风吹不到南山尾。
    - 倘者南风知我意，莫将晩霞落黄昏。
    - 我本无意惹惊鸿，奈何惊鸿入我心。
    - 我将玫瑰藏于身后，风起花落，从此鲜花赠自己，纵马踏花向自由。
    - 树木在森林中相依偎而生长，星辰在银河中因辉映而璀璨。
    - 辞暮尔尔，烟火年年。
    - 慢品人间烟火色，闲观万事岁月长。
    - 一半烟火以谋生，一半诗意以谋爱。
    - 山海自有归期，风雨自有相逢。
    - 星光不问赶路人，时光不负有心人。
    - 且行且忘且随风，且行且看且从容。
    - 我于窗中窥伤鹤，恰如仰头见春台。
    - 努力的过程本就是孤岛，但最后抵达的一定是充满生机的彼岸。永远不要因为一些，不值得的事和人而颓废。
    - 山高水远，怕什么来不及，慌什么到不了，天顺其自然，地顺其性，人顺其变，一切都是刚刚好。
    - 我见众生皆草木，唯有见你是青山。
    - 日出有盼，日落有思，平平安安，所遇皆甜。
    - 毕竟几人真得鹿，不知终日梦为鱼。
    - 在心里种花，人生才不会荒芜。
    - 市井长巷，聚拢来是烟火，摊开是人间。
    - 流水不争先，争的是滔滔不绝。
    - 浮云吹作雪，世味煮成茶。
    - 远赴人间惊鸿宴，一睹人间盛世颜。
    - 花开堪折直须折，莫待无花空折枝。
    - 人生只似风前絮,欢也零星,悲也零星,都作连江点点萍

2409.8.网站副标题

10、字数统计

下载需要的包

1
npm install hexo-wordcount --save

改主题配置

1
2
3
4
5
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

11、图片大图查看模式

1
2
# fancybox http://fancyapps.com/fancybox/3/
fancybox: true

12、Pjax（⭕未配置）

当用户点击链接，通过ajax更新页面需要变化的部分，然后使用HTML5的pushState修改浏览器的URL地址。

这样可以不用重复加载相同的资源（css/js）， 从而提升网页的加载速度。

1
2
3
4
5
6
7
8
9
# Pjax [Beta]
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax: 
  enable: true
  exclude:
    - /music/
    - /no-pjax/

13、Snackbar弹窗（⭕未配置）

Snackbar 弹窗,根据自己爱好开启（就是有弹窗的时候样式会更好看）

1
2
3
4
5
6
7
8
9
# Snackbar 弹窗
# https://github.com/polonel/SnackBar
# position 弹窗位置
# 可选 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' #light mode时弹窗背景
  bg_dark: '#2d3035' #dark mode时弹窗背景

14、Instantpage（⭕未配置）

当鼠标悬停到链接上超过 65 毫秒时，Instantpage 会对该链接进行预加载，可以提升访问速度。

1
2
3
# https://instant.page/
# prefetch (预加载)
instantpage: true

15、Pangu（⭕未配置）

慎重的打开这个，它会自动替你在网页中所有的中文字和半形的英文、数字、符号之间插入空白。

1
2
3
4
5
# https://github.com/vinta/pangu.js
# Insert a space between Chinese character and English character (中英文之间添加空格)
pangu:
  enable: false
  field: post # site/post

16、PWA（⭕未配置）

我没开启，建议不开

17、Open Graph

在 head 里增加一些 meta 资料，例如缩略图、标题、时间等等。当你分享网页到一些平台时，平台会读取 Open Graph 的内容，展示缩略图，标题等等信息。

1
2
3
4
5
6
7
8
9
10
11
12
# Open graph meta tags
# https://developers.facebook.com/docs/sharing/webmasters/
Open_Graph_meta:
  enable: true
  option:
    # twitter_card:
    # twitter_image:
    # twitter_id:
    # twitter_site:
    # google_plus:
    # fb_admins:
    # fb_app_id:

18、CSS前缀

有些 CSS 并不是所有浏览器都支持，需要增加对应的前缀才会生效。

开启 css_prefix 后，会自动为一些 CSS 增加前缀。（会增加 20%的体积）

1
2
3
# Add the vendor prefixes to ensure compatibility
css_prefix: true

19、Inject

如想添加额外的js/css/meta等等东西，可以在Inject里添加，支持添加到head(</body>标签之前)和bottom(</html>标签之前)。

请注意：以标准的html格式添加内容

1
2
3
4
5
6
inject:
  head:
  	- <link rel="stylesheet" href="/self.css">
  bottom:
  	- <script src="xxxx"></script>

20、CDN

建议不动，我也没动