Hexo美化指南

发表于 更新于 分类于 阅读次数： 本文字数： 5.9k 阅读时长 ≈ 15 分钟
Hexo美化全流程+问题分析，让小白也能装饰属于自己的Hexo个人博客网站！

作为一名电脑小白，如何装饰属于自己的个人博客网站呢？

在这个流程中，我们将会学会Hexo个性化装饰的基本流程，即使是电脑小白也能轻易上手！

在此，我将以Hexo+Next主题为例，帮助大家打装饰属于自己的网站！

实用工具

URL配置

参考文档：Hexo站点基本配置与实用工具指北 | zzy的打工日志

由于我们写文章时title可能含有中文，因此会生成含有中文的url，这会造成许多不可预料的问题。于是采用另外的方式来生成永久链接。

首先键入以下命令安装相应插件：

1
npm install hexo-abbrlink --save

接着修改站点配置文件 _config.yml 中的 permalink 字段

1
2
3
4
permalink: posts/:abbrlink/
abbrlink:
	alg: crc32   # 算法： crc16(default) and crc32
	rep: hex     # 进制： dec(default) and hex

这样就完成了永久链接的修改，文章在发布时会被自动分配16进制代码

站点页面初始化

参考文档：Hexo站点基本配置与实用工具指北 | zzy的打工日志

在站点配置文件修改完成后，网站的tags、categories等页面仍无法正确跳转，需要进行页面初始化配置。

新建标签页面

在Git Bash里键入以下命令：

1
$ hexo new page "tags"

此时，hexo会在 Hexo/source/ 下创建一个tags目录，并在其中放置index.md文件。

打开index.md文件，修改其meta属性，添加如下内容：

1
type: "tags"

在本地调试后，即可发现tags页面跳转正常。

在文章写作过程中，可以在meta数据中的tags字段后添加[]来放置tags，支持多个标签，每个标签之间使用半角英文逗号分割,如：

1
tags: [Hexo, Next]

categories、toc等等页面同理。

文章草稿及发布

如果不想在部署时让自己还未写完的文章也被发布，即可通过以下命令新建草稿。

1
$ hexo new draft "title"

该命令会在Hexo/source/_draft 目录下新建名为title.md的文件，打开该文件即可进行写作。当本地调试或部署至服务器时，默认无法查找到草稿，即不会发布草稿文章。

在文章写作完毕后，需要将其移动至post文件夹，采用以下命令：

1
$ hexo publish "title"

该命令会将 Hexo/source/_draft 目录下对应的文章移动至 Hexo/source/_post 目录，再次本地调试或部署后即可找到该文章。

数学公式支持

参考文档：Hexo站点基本配置与实用工具指北 | zzy的打工日志

Hexo采用的默认markdown渲染器对于复杂数学公式的支持不够完美，在渲染latex公式时会出现渲染错误，如将 _ 识别为markdown斜体标识，从而导致公式渲染失败。

解决方案：采用hexo-renderer-pandoc作为新的渲染器，该插件可以完美解决上述问题。

具体步骤：

  1. 由于hexo-renderer-pandoc需要Pandoc的支持，故需要先安装Pandoc，进入链接安装即可。这里选择windows-x86_64.msi的版本。

  2. 在Pandoc安装完毕后，回到Git Bash，键入以下命令：

    1
    $ pandoc -v

    若正确显示版本号即可进行下一步，若返回未找到该命令，则检查系统环境变量后重启电脑即可。

  3. 卸载默认的渲染器并安装对应插件。

    1
    2
    $ npm uninstall hexo-renderer-marked --save
    $ npm install hexo-renderer-pandoc --save

  4. 安装mathJax。

    1
    $ npm install hexo-filter-mathjax --save

  5. 进入站点配置文件，添加如下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    mathjax:
      tags: none # or 'ams' or 'all'
      single_dollars: true # enable single dollar signs as in-line math delimiters
      cjk_width: 0.9 # relative CJK char width
      normal_width: 0.6 # relative normal (monospace) width
      append_css: true # add CSS to pages rendered by MathJax
      every_page: false # 如果设置为true,默认每篇文章都会被mathjax渲染

    # hexo-renderer-pandoc (https://github.com/wzpan/hexo-renderer-pandoc)
    pandoc:
      extra:
        - toc: # will be passed as `--toc`. Note the colon，如果不需要自动生成目录无需添加此行
      extensions:
        - '+hard_line_breaks'
        - '+emoji'
        - '-implicit_figures'
      template:
         ./pandoc_template.html # 如果不需要自动生成目录无需添加此行
    # -----------------------------------------------------

    若上文中 every_page 字段设为false，则需在每篇文章的meta数据中添加 mathjax: true字段，即可开启公式渲染。

  6. 进入NexT主题配置文件，并搜索 math 字段，修改如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    math:
      # Default (false) will load mathjax / katex script on demand.
      # That is it only render those page which has `mathjax: true` in front-matter.
      # If you set it to true, it will load mathjax / katex srcipt EVERY PAGE.
      every_page: false

      mathjax:
        enable: true
        # Available values: none | ams | all
        tags: none

      katex:
        enable: false
        # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
        copy_tex: false

  7. 回到Git Bash，执行以下命令：

    1
    2
    3
    $ hexo clean
    $ hexo g
    $ hexo s

    即可在本地看到公式被成功渲染。

回到顶部按钮与阅读进度提示

参考文档：Hexo + Next深度美化指北 | zzy的打工日志

进入主题配置文件，并搜索 back2top 字段，设置如下：

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

本地调试后，可在侧边栏观察到阅读进度，点击即可回到顶部。

中文翻译设置

新添加的菜单需要翻译对应的中文，打开theme/next/languages/zh-CN.yml，在 menu 下设置：

1
2
3
4
5
6
7
8
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  resources: 资源
  search: 搜索

侧边栏显示效果

参考文档：Next 主题配置_next主题-CSDN博客

打开主题配置文件即themes/next下的_config.yml，找到Sidebar Settings，设置：

1
2
3
4
5
6
7
8
9
10
11
sidebar:
  # Sidebar Position. #设置侧边栏位置
  position: left
  #position: right

  #  - post    默认显示模式
  #  - always  一直显示
  #  - hide    初始隐藏
  #  - remove  移除侧边栏
  display: post

侧边栏推荐阅读

参考文档：Next 主题配置_next主题-CSDN博客

打开主题配置文件即themes/next下的_config.yml，搜索links（里面写你想要的链接）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Blog rolls
links_settings:
  icon: fa fa-link
  title: 推荐网站          # 修改名称
  # Available values: block | inline
  layout: block

links:
  #Title: http://yoursite.com
  菜鸟教程: https://www.runoob.com/
  C语言中文网: http://c.biancheng.net/sitemap/
  CS自学指南: https://csdiy.wiki/
  Road To Coding: https://www.r2coding.com/#/
  计算机专业学习路线: https://hackway.org/docs/cs/intro
  鱼C论坛: https://fishc.com.cn

添加社交链接

参考文档：Next 主题配置_next主题-CSDN博客

打开主题配置文件即themes/next下的_config.yml，搜索social：

1
2
3
4
5
6
7
8
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/你的Github用户名 || fab fa-github
  E-Mail: mailto:你的Gmail邮箱 || fa fa-envelope
  CSDN: https://blog.csdn.net/你的CSDN的ID || fa fa-codiepie

文章末尾添加版权声明

参考文档：Next 主题配置_next主题-CSDN博客

查找主题配置文件themes/next/_config.yml中的creative_commons：

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true  # 将false改为true即可显示版权信息
  language:

浏览页面显示当前浏览进度

参考文档：Hexo-Next 主题博客个性化配置超详细，超全面(两万字)

打开 themes/next/_config.yml，搜索关键字 scrollpercent，把 false 改为 true。

文章置顶功能

参考文档：Hexo-Next 主题博客个性化配置超详细，超全面(两万字)

移除默认安装的插件：

1
npm uninstall hexo-generator-index --save

安装新插件:

1
npm install hexo-generator-index-pin-top --save

最后编辑有这需求的相关文章时，在Front-matter（文件最上方以—分隔的区域）加上一行：

1
top: true

如果你置顶了多篇，怎么控制顺序呢？设置top的值（大的在前面），比如：

1
2
3
4
5
6
7
# Post a.md
title: a
top: 1

# Post b.md
title: b
top: 10

文章 b 便会显示在文章 a 的前面

代码块复制选项

参考文档：Hexo-Next 主题博客个性化配置超详细，超全面(两万字)

在主题配置文件中搜索copy_botton，找到如下配置

1
2
3
4
5
codeblock:
border_radius: 8   # 按钮圆滑度
copy_button:  # 设置是否开启代码块复制按钮
	enable: true
	show_result: true  # 是否显示复制成功信息

打赏功能

在主题配置文件中搜索reward，找到如下配置：

1
2
3
4
5
6
7
8
9
10
reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: true
  animation: true

reward:
  wechatpay: /images/wechatpay.jpg   #改为你自己的收款码地址
  alipay: /images/alipay.jpg         #改为你自己的收款码地址
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

修改文章内链接文本的样式

参考文档：Hexo Next 主题安装、配置及美化 | Hello Memo

  • 将链接文本设置为蓝色，鼠标划过时文字颜色加深，并显示下划线。

  • 添加以下内容到 source/_data/styles.styl

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 将链接文本设置为蓝色，鼠标划过时文字颜色加深，并显示下划线。
    .post-body p a {
      color: #0593d3;
      border-bottom: none;
      &:hover {
        color: #0477ab;
        text-decoration: underline;
      }
    }

启用Pjax

参考文档：Hexo主题详细配置之一

Pjax 主要用于加速 Web 页面的切换速度，同时也可以用来解决 Aplayer 音频播发器切换页面后播放出现中断的问题

1
2
# 进入Next主题的目录
$ cd themes/next
1
2
# 下载3D资源文件
$ git clone https://github.com/theme-next/theme-next-three source/lib/three

更改 Next 主题的配置文件 themes/next/_config.yml，设置以下内容

1
pjax: true

Gitalk评论系统

主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Gitalk
# For more information: https://gitalk.github.io
gitalk:
  enable: true
  github_id: 你的GitHub用户名
  repo: 你的Github仓库名
  client_id: 你的Github OAuth App应用名
  client_secret: 你的Github OAuth App密钥
  admin_user: 你的Github用户名 # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # When the official proxy is not available, you can change it to your own proxy address
  proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token # This is official proxy address
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN
  owner: 你的Github用户名

Github OAuth应用配置

应用信息核对

  • 登录GitHub → Settings → Developer settings → OAuth Apps

  • 若没有OAuth APP，则进行创建，并记录你的client_id和client_secret

  • 检查应用client_id的配置：

    • Callback URL必须设置为：https://你的仓库名/
    • Homepage URL设置为博客地址：https://你的仓库名/

手动创建初始化Issue

  • 访问仓库的Issue页面

  • 点击”New issue”创建标题为Gitalk Initialization的空白Issue

  • 在正文输入任意内容（如init）后提交

相对路径本地引用

参考文档：在Hexo博客中插入图片的各种方式

图片除了可以放在统一的images文件夹中，还可以放在文章自己的目录中。文章的目录可以通过站点配置文件_config.yml来生成。 post_asset_folder: true 将_config.yml文件中的配置项post_asset_folder设为true后，执行命令$ hexo new post_name，在source/_posts中会生成文章post_name.md和同名文件夹post_name。将图片资源放在post_name中，文章就可以使用相对路径引用图片资源了。

1
![](image.jpg)

主题美化

主题Scheme

参考文档：Hexo + Next深度美化指北 | zzy的打工日志

进入主题配置文件 ，搜索scheme字段，即可看到对应的Scheme配置。

NexT主题内置了四种Scheme，分别有不同的布局和样式。

  • Muse
  • Mist
  • Pisces
  • Gemini (我的样式)

其中，Muse和Mist为单栏布局，Pisces和Gemini为双栏布局。可根据自己的喜好进行调整。

参考文档：Hexo + Next深度美化指北 | zzy的打工日志

进入主题配置文件，搜索 favicon 字段，即可设置网站Logo。

1
2
3
4
5
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png # 修改该字段即可
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json

背景图片与半透明

参考文档：Hexo + Next深度美化指北 | zzy的打工日志

本地存储版：挑选一个自己喜欢的背景图片，将其放置于Hexo/themes/next/source/images文件夹下。

CDN版：利用Cloudianry，上传背景图片并复制其url。

进入文件夹 /Hexo/source，并新建 _data文件夹，在文件夹下新建 styles.styl 文件。

进入主题配置文件，并搜索字段 custom_file_path ，将style行取消注释，即设置：

1
style: source/_data/styles.styl

打开刚刚创建的styles.styl文件，添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body {
    background:url(/images/bg.jpg);//图片路径
    background-repeat: no-repeat;
    background-attachment:fixed; //不重复
    background-size: cover;      //填充
    background-position:50% 50%;
		opacity: 0.85;//设置文章主体透明度
}

//侧边框的透明度设置
.sidebar {
  background-color: transparent;
  opacity: 0.9;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.8);
}

本地调试即可观察到背景图片。

参考文档：Hexo + Next深度美化指北 | zzy的打工日志

侧边栏标签、分类、归档个数默认不显示，可通过以下设置调整。

进入主题配置文件，并搜索 menu_settings 字段，可根据喜好进行调整。

1
2
3
4
# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true #是否显示图标
  badges: true #是否显示数量

页面边框圆角

参考文档：Hexo + Next深度美化指北 | zzy的打工日志

主题默认的页面边框均为方框，看起来比较生硬，我们可以修改css样式将其改为圆角矩形。

进入 Hexo/source/_data 目录，新建 variables.styl 文件，并添加以下代码：

1
2
$border-radius-inner     = 10px 10px 10px 10px;
$border-radius           = 10px;

进入主题配置文件，并搜索 custom_file_path 字段，将variable行取消注释。

本地调试后，可以看到边框已经有了圆角样式。

访客统计

参考文档：Hexo + Next深度美化指北 | zzy的打工日志

进入主题配置文件，并搜索 busuanzi_count 字段，设置如下：

1
2
3
4
5
6
7
8
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: far fa-eye

本地调试后，即可在网站底部观察到访客和浏览量统计。注意，由于busuanzi本地统计数据使用同一个数据库，在本地的浏览量与访客显示异常，部署后即可恢复正常。

为了增加可读性，可以增加如下设置。

进入 Hexo/themes/next/layout/_partials 目录，打开 footer.njk 文件。

搜索 busuanzi_value_site_uv字段，修改值为：

1
访客人数：<span id="busuanzi_value_site_uv"></span>人

搜索 busuanzi_value_site_pv 字段，修改值为：

1
浏览总量：<span id="busuanzi_value_site_pv"></span>次

文章字数统计、阅读时长估计

参考文档：参考文档：Hexo + Next深度美化指北 | zzy的打工日志

通过以下命令安装插件：

1
$ npm install hexo-symbols-count-time --save

进入主题配置文件，并搜索 symbols_count_time 字段，设置如下：

1
2
3
4
5
6
# Post wordcount display settings
# Dependencies: https://github.com/next-theme/hexo-word-counter
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false

进入站点配置文件，添加 symbols_count_time 字段，设置如下：

1
2
3
4
5
6
7
8
9
symbols_count_time:
  symbols: true               # 文章字数统计
  time: true                  # 文章阅读时长
  total_symbols: true         # 站点总字数统计
  total_time: true            # 站点总阅读时长
  exclude_codeblock: true     # 排除代码字数统计
  awl: 2                      # 每个单词所占字符数，中文建议设置为2，英文建议设置为4
  wpm: 200                    # 每分钟阅读单词数，中文建议设置为300，英文建议设置为275
  suffix: "mins"              # 时间单位

在本地调试后，即可在每篇文章的标题下观察到文章字数统计和阅读时间估计。

同样，为了增加可读性，进入 Hexo/themes/next/layout/_partials 目录，打开 footer.njk 文件。

搜索 symbols_count_time.count_total 字段，修改值为：

1
本站总字数&asymp;<span title="{{ __('symbols_count_time.count_total') }}">{{ symbolsCountTotal(site) }}</span>

搜索 symbols_count_time.time_total 字段，修改值为：

1
阅读本站耗时&asymp;<span title="{{ __('symbols_count_time.time_total') }}">{{ symbolsTimeTotal(site, config

网站运行时间

参考文档：Hexo + Next深度美化指北 | zzy的打工日志

进入 Hexo/themes/next/layout/_partials 目录，打开 footer.njk 文件。

在合适的位置（添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div>
	<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
	<script>
		var now = new Date();
		function createtime() {
			var grt= new Date("08/15/2021 16:00:00");
			now.setTime(now.getTime()+250);
			days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
			hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
			if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
			mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
			seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
			snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
			document.getElementById("timeDate").innerHTML = "本站已持续运行 "+dnum+" 天 ";
			document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
		}
	setInterval("createtime()",250);
	</script>
</div>

注意修改grt为你的建站时间。

在本地调试后，即可在页面底部观察到运行时间。

隐藏网站底部power by Hexo / 强力驱动

参考文档：Hexo + Next深度美化指北 | zzy的打工日志

进入主题配置文件，并搜索 powered 字段，修改其值为false即可。

顶部阅读进度条

参考文档：Hexo + Next深度美化指北 | zzy的打工日志

进入主题配置文件，并搜索 reading_progress 字段，设置如下：

1
2
3
4
5
6
7
8
9
10
# Reading progress bar
reading_progress:
  enable: true
  # Available values: left | right
  start_at: left
  # Available values: top | bottom
  position: top
  reversed: false
  color: "#37c6c0"
  height: 4px

设置建站时间

参考文档：Next 主题配置_next主题-CSDN博客

打开主题配置文件即 themes/next 下的_config.yml，查找since：

1
2
3
footer:
  #Specify the date when the site was setup. If not defined, current year will be used.
  since: 2023-06      # 建站时间

添加顶部加载条

参考文档：Next 主题配置_next主题-CSDN博客

在themes/next目录下打开Git Bash，输入：

1
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

打开主题配置文件即themes/next下的配置文件，找到pace，配置如下（你可以在theme自主选择类型）：

1
2
3
4
5
6
pace:
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: minimal

文章添加阴影

参考文档：Hexo-Next 主题博客个性化配置超详细，超全面(两万字)

打开 /themes/next/source/css/_custom/custom.styl，添加：

1
2
3
4
5
6
7
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

修改文章底部的标签的 # 为图标

参考文档：Hexo Next 主题安装、配置及美化 | Hello Memo

  • 修改主题配置文件 tag_icon 部分

    1
    tag_icon: true # true: 显示为图标

    添加Github快捷关注

参考文档：Hexo+NexT主题美化

在主题的配置文件中, 搜索: github_banner, 修改为自定义值, 如下:

1
2
3
4
github_banner:
  enable: true
  permalink: https://github.com/KurohaKirito
  title: Follow me on GitHub

深度美化

粒子钟

参考文档：Hexo-Next主题美化博客

修改主题配置文件 _config.next.yml

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  # head: source/_data/head.njk
  #header: source/_data/header.njk
  sidebar: source/_data/sidebar.njk   ## 取消该行的注释；这个针对侧边栏的样式自定义
  #postMeta: source/_data/post-meta.njk
  postBodyEnd: source/_data/post-body-end.njk
  footer: source/_data/footer.njk
  bodyEnd: source/_data/body-end.njk
  variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

新建侧边栏粒子钟配置文件 source/_data/sidebar.njk，添加如下代码：

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<div style="">
  <canvas id="canvas" style="width:60%;">当前浏览器不支持canvas，请更换浏览器后再试</canvas>
</div>
<script>
(function(){

   var digit=
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0]
        ]//:
    ];

var canvas = document.getElementById('canvas');

if(canvas.getContext){
    var cxt = canvas.getContext('2d');
    //声明canvas的宽高
    var H = 100,W = 700;
    canvas.height = H;
    canvas.width = W;
    cxt.fillStyle = '#f00';
    cxt.fillRect(10,10,50,50);

    //存储时间数据
    var data = [];
    //存储运动的小球
    var balls = [];
    //设置粒子半径
    var R = canvas.height/20-1;
    (function(){
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        //存储时间数字，由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
        data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
    })();

    /*生成点阵数字*/
    function renderDigit(index,num){
        for(var i = 0; i < digit[num].length; i++){
            for(var j = 0; j < digit[num][i].length; j++){
                if(digit[num][i][j] == 1){
                    cxt.beginPath();
                    cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
                    cxt.closePath();
                    cxt.fill();
                }
            }
        }
    }

    /*更新时钟*/
    function updateDigitTime(){
        var changeNumArray = [];
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        var NewData = [];
        NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
        for(var i = data.length-1; i >=0 ; i--){
            //时间发生变化
            if(NewData[i] !== data[i]){
                //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
                changeNumArray.push(i+'_'+(Number(data[i])+1)%10);
            }
        }
        //增加小球
        for(var i = 0; i< changeNumArray.length; i++){
            addBalls.apply(this,changeNumArray[i].split('_'));
        }
        data = NewData.concat();
    }

    /*更新小球状态*/
    function updateBalls(){
        for(var i = 0; i < balls.length; i++){
            balls[i].stepY += balls[i].disY;
            balls[i].x += balls[i].stepX;
            balls[i].y += balls[i].stepY;
            if(balls[i].x > W + R || balls[i].y > H + R){
                balls.splice(i,1);
                i--;
            }
        }
    }

    /*增加要运动的小球*/
    function addBalls(index,num){
        var numArray = [1,2,3];
        var colorArray =  ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];
        for(var i = 0; i < digit[num].length; i++){
            for(var j = 0; j < digit[num][i].length; j++){
                if(digit[num][i][j] == 1){
                    var ball = {
                        x:14*(R+2)*index + j*2*(R+1)+(R+1),
                        y:i*2*(R+1)+(R+1),
                        stepX:Math.floor(Math.random() * 4 -2),
                        stepY:-2*numArray[Math.floor(Math.random()*numArray.length)],
                        color:colorArray[Math.floor(Math.random()*colorArray.length)],
                        disY:1
                    };
                    balls.push(ball);
                }
            }
        }
    }

    /*渲染*/
    function render(){
        //重置画布宽度，达到清空画布的效果
        canvas.height = 100;
        //渲染时钟
        for(var i = 0; i < data.length; i++){
            renderDigit(i,data[i]);
        }
        //渲染小球
        for(var i = 0; i < balls.length; i++){
            cxt.beginPath();
            cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI);
            cxt.fillStyle = balls[i].color;
            cxt.closePath();
            cxt.fill();
        }
    }

    clearInterval(oTimer);
    var oTimer = setInterval(function(){
        //更新时钟
        updateDigitTime();
        //更新小球状态
        updateBalls();
        //渲染
        render();
    },50);
}

})();
</script>

<div class="site-overview-wrap sidebar-panel{% if not display_toc or toc(page.content).length <= 1 %} sidebar-panel-active{% endif %}">
<div class="site-overview">
    

{% if theme.recent_posts %}
    <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
    <div class="links-of-blogroll-title">
        <!-- modify icon to fire by szw -->
        <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
        {{ theme.recent_posts_title }}
    </div>
    <ul class="links-of-blogroll-list">
        {% set posts = site.posts.sort('-date') %}
        {% for post in posts.slice('0', '5') %}
        <li>
            <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
        </li>
        {% endfor %}
    </ul>
    </div>
{% endif %}
</div>
</div>

编辑 source/_data/styles.styl 样式文件，添加如下代码：

1
2
3
4
5
6
7
8
// 粒子时钟样式
.site-overview {
  text-align: center;
}

canvas#canvas {
  margin-top: 20px;
}

音乐播放器APlayer

参考文档：Hexo+NexT主题美化

APlayer源码地址: APlayer

首先, 在 next/source/lib 目录下新建 aplayer 文件夹, 之后下载项目源码并解压, 将 APlayer.min.js 和 APlayer.min.css 文件复制到 next/source/lib/aplayer 中.

再之后, 继续在当前目录下新建一个 music.js 文件, 输入以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: false,
    audio: [
      {
        name: '歌曲的名字',
        artist: '歌手',
        url: '音乐文件的地址',
        cover: '封面图片的地址',
      }
    ]
});

之后修改 themes/next/layout/_layout.njk 在文件最后添加:

1
2
3
4
5
6
7
<!--Aplayer 音乐播放功能-->
{% if theme.aplayer %}
  <link rel="stylesheet" href="/lib/aplayer/APlayer.min.css">
  <div id="aplayer"></div>
  <script type="text/javascript" src="/lib/aplayer/APlayer.min.js"></script>
  <script type="text/javascript" src="/lib/aplayer/music.js"></script>
{% endif %}

最后在 主题配置文件 中, 找一个自己喜欢的位置, 写入 aplayer: true. 什么时候想要关闭这个功能了, 直接设置为 false 即可.

这里可能会出现Aplayer播放中断的问题，解决方法详见：实用工具/启用Pjax

网易云音乐挂件

参考文档：Hexo +Next深度美化之辈|zzy的打工日志

进入网易云网页版，登录账号并选择想要添加的歌单，在歌单上方点击生成外链播放器。

复制下方的HTML代码，并进入 Hexo/themes/next/layout/_macro 文件夹，在合适的地方添加以下代码：

1
2
3
<div id="music163player">
  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width= 330 height=110 src="//music.163.com/outchain/player?type=0&id=4889230954&auto=0&height=90"></iframe>
</div>

鼠标烟花特效

参考文档：Hexo-Next主题美化博客

安装fireworks点击特效动画

1
npm install next-theme/hexo-next-fireworks  # Fireworks animation for NexT.

黑/白模式切换

参考文档：hexo-next-darkmode/README_CN.md at main · rqh656418510/hexo-next-darkmode

安装

1
npm install hexo-next-darkmode --save

配置

首先确保 NexT 主题原生的 darkmode 选项设置为 false：

1
2
# Close NexT's darkmode
darkmode: false

往 NexT 主题的 _config.yml 配置文件里添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Darkmode JS
# For more information: https://github.com/rqh656418510/hexo-next-darkmode, https://github.com/sandoche/Darkmode.js
darkmode_js:
  enable: true
  bottom: '64px' # default: '32px'
  right: 'unset' # default: '32px'
  left: '32px' # default: 'unset'
  time: '0.5s' # default: '0.3s'
  mixColor: 'transparent' # default: '#fff'
  backgroundColor: 'transparent' # default: '#fff'
  buttonColorDark: '#100f2c' # default: '#100f2c'
  buttonColorLight: '#fff' # default: '#fff'
  isActivated: false # default false
  saveInCookies: true # default: true
  label: '🌓' # default: ''
  autoMatchOsTheme: true # default: true
  libUrl: # Set custom library cdn url for Darkmode.js