搭建个人网站

搭建

下载Git和Node.js

1. Git：安装完成后在Windows PowerShell中输入git --version验证是否安装成功。
2. Node.js：安装好后在Windows PowerShell输入node -v和npm -v验证是否安装成功。

配置Git

1. 在windows菜单中，打开Git Bash
2. 输入用户名和邮箱

   $ git config --global user.name "username"
   $ git config --global user.email "邮件地址@youremail.com"

3. 生成新的SSH Key

   $ ssh-keygen -t rsa -C "邮件地址@youremail.com"

   一直回车直到出现：

   The key's randomart image is:
     +---[RSA 3072]----+
     |          oo     |
     |         . .E    |
     |          + o    |
     |         * + +   |
     |        S B + o  |
     |         = + o.O.|
     |        + = . OoX|
     |       . . +.BoO=|
     |        ....+=*=*|
     +----[SHA256]-----+

4. 打开github，点击头像→setting→SSH and GPG keys→New SSH key
   • 输入Title
   • 在Git Bash中输入cat ~/.ssh/id_rsa.pub后，复制出现的内容到Key里
   • 点击Add SSH key
5. 在Git Bash中输入ssh -T git@github.com,再输入yes，出现自己的用户名，表示配置成功

安装Hexo

1. 在命令行里利用npm命令安装hexo，最后通过 hexo -v验证是否安装成功。

   $ npm install -g hexo

2. 在Github上创建Repository，Repository name 中填入username.github.io，点击Create repository

   有很多教程中，在此处可以接着：
   在Repository的Setting中的GitHub Pages部分，Choose a theme先选择一个主题，直接可以生成Github主题的网站，再进行后续操作。
   但在2020-10-01后，github新建的默认的库是main而不是master，会导致在hexo g -d后，网页一直不更新，此时就需要在GitHub Pages部分的Source中把分支切换为master。
   为了避免这个问题，可以跳过这一步；也可以在deploy:中把branch: master改成branch: main。
   

3. 在本地创建一个与 Repository 中博客项目同名的文件夹username.github.io后，进入文件夹，右键 Git bash here，输入hexo init初始化文件夹，接着输入npm install安装必备的组件
4. 确保git部署：

   npm install hexo-deployer-git --save

5. 输入hexo g生成静态网页，再输入hexo s打开本地服务器，然后打开浏览器预览：http://localhost:4000 ，按ctrl+c关闭本地服务器。

将博客部署到username.github.io

1. 进入 Github 的网站 Repository，点击code→SSH，复制
2. 打开网站文件夹根目录中的~/_config.yml站点配置文件，将deploy部分修改为：

   deploy:
     type: git
     repository: git@github.com:username/username.github.io.git
     branch: master

   同时可以顺便修改site部分:

   title: Hexo
   subtitle: ''
   description: ''
   keywords:
   author: John Doe
   email:
   language: en
   timezone: ''

   • title博客名
   • subtitle副标题
   • description对网站的描述，可以自定义，给搜索引擎看
   • author作者，在博客底部可以看到
   • email联系邮箱
   • language默认英文，中文为zh-CN
3. 以后每次修改本地文件后，都需要输入：

   hexo g
   hexo s	#预览
   hexo d

   也可以不预览，直接hexo g -d来更新网站。再打开网站就可以了。如果修改了内容，hexo g -d后原网页没有反应，可以用ctrl+F5强制刷新

在多台电脑上操作

原理：
hexo g -d完成的是将在~/public文件夹下生成静态的网页文件，然后将其复制到~/.deploy_git文件夹里，再通过Github push到创建的网页分支master上。
其他文件夹hexo的模块node_modules，文章文件source，主题文件themes等等都没有上传到master上，因此可以通过再创建一个分支来进行同步。

方法1

1. 首先在Github的 username.github.io Repository中点击master按钮，输入source并回车，新建一个同步所有文件的分支source

2. 再通过branches→All branches→change default branch，切换为source后updata，回到 username.github.io Repository中，在code中复制SSH

3. 新建一个空文件夹XXXX，在此文件夹下右键 Git bash here，输入：

   $ git clone 复制的ssh

4. 进入XXXX/username.github.io文件夹，将该文件夹下除了.git（默认是隐藏文件）的文件夹全部删除

5. 将本来网站的目录下username.github.io除了.deploy_git的文件全部复制到XXXX/username.github.io文件夹，其中有一个.gitignore文件，表示其中的文件不需要上传。另外，因为一个git仓库中不能包含另一个git仓库，如果在theme下git clone了主题文件，需要把相应目录下的.git文件夹删除。

6. 在命令行下，cd username.github.io进入该文件夹下，可以看到最后有个(source)表明当前在source分支下：

   git add .
   git commit –m "add branch"
   git push 

   • git add .告诉Git，把文件添加到仓库
   • git commit告诉Git，把文件提交到仓库，-m后面是修改的说明
   • git push 将本地分支的更新，推送到远程

7. 在其他电脑上的操作如下：

   1. 准备工作：在该电脑上需要准备好Git和Node等，配置好SSH key，安装hexo等等

   2. 新建文件夹YYYYYYY，然后再该文件夹下 git clone 复制的ssh，cd 进入username.github.io 文件夹下，执行npm install下载必要的组件，也会有一个.gitignore文件

   3. 在该文件夹下修改后，hexo g -d更新网站。

   4. 然后将更新推送到source分支

      git add .
      git commit –m "add branch"
      git push 

   5. 以后不管在原本电脑还是其他电脑上，首先git pull 获取更新，然后再进行修改，再推送到source分支。

方法2

1. 方法1中第四步中，直接将git clone后其中的.git文件移动到username.github.io下

2. 修改.gitignore文件，比如取消node_modules文件夹，这样在其他电脑上就不需要重新下载组件了。

3. 将该目录下的所有.git文件修改成.git1，上传

   git add .
   git commit –m "add branch"
   git push origin source

4. 完成上传后，再将.deploy中的.git1修改回来成.git，就可以对网站进行hexo g -d等操作，操作完成后，重复3~4，即：

   mv .deploy_git/.git1/ .deploy_git/.git
   
   hexo g -d
   
   mv .deploy_git/.git/ .deploy_git/.git1
   
   git add .
   git commit –m "add branch"  #报错的话可以用 git commit --no-verify -m "X"
   git push origin source

• -m总是乱码？？后面不空格直接-m“XXX”。

文章相关

新建文章

1. 在根目录下右键并GIt Bash here，然后输入hexo new post "article title"，新建一篇文章，此时在~/source_posts下就出现了article title.md文件，进行编辑即可。
2. 为了新建文章方便，可以将~/scaffolds/post.md的Front-matter部分修改为自己默认需要的：

   ---
   title: {{ title }} 
   date: {{ date }} 
   updated: 
   tags: 
   categories: 
   typora-root-url: {{ title }} 
   ---

添加文章时自动打开编辑器

在~/scripts下新建一个脚本，任意命名即可，输入

var spawn = require('child_process').exec;
hexo.on('new', function(data){
  spawn('start  "markdown编辑器绝对路径.exe" ' + data.path);
});

在文章中插入图片

1. 如果只有少量图片，可以在~/source目录下新建images文件夹，通过![](/images/xxx.png)来引用。
2. 如果图片比较多，可以建立文章自己的目录，在站点配置文件中，将post_asset_folder关键词改成true。之后通过hexo new post "article title"在新建文章时，就会出现与文章名相同的文件夹article title，将图片放入其中后，通过![](XXXX.jpg)直接引用。
3. 基于md编辑器Typora编辑：
   • 以上在Typora中无法显示图片，可以在md文件的Front-matter部分，根据文章所有图片存在的位置，添加typora-root-url: ..或者typora-root-url: article title，即可在编辑器中也正常显示图片。
   • 在Typora的偏好设置→图像部分→选择复制到指定路径， ./${filename}，之后可以直接在编辑md文件的时候复制图片，文章中会显示图像，并且已经在article title的文件夹下复制了该图片，可以用第二种方法引用。
   • Typora编辑器可以直接在图片上的代码右键缩放图片，此时代码会相应的更改为<img src="1.png" style="zoom: 50%;" />，网页上也能成功缩小。

在文章中页内跳转

• 如果想要跳转的地方是标题，则直接使用[描述](#id)即可，id为目录名称
• 如果想自定义跳转的地方，则可以在需要跳转的地方，通过html语法定义一个锚，比如<span id=”表1”>描述</span>，然后[描述](#表1)

在文章间跳转

{% post_path '文章标题' %}

例子：

<a href="{% post_path 'XXXXXX' %}">相应的描述</a>

定位到其他文章的某个标题部分：

<a href="{% post_path '【ADF】01.基本计算设置' %}#红外光谱">相应的描述</a>

创建分类页面

1. 在根目录下右键并GIt Bash here，然后输入hexo new page categories，在~/source/categories/出现了index.md，打开在Front-matter部分增加type: "categories"
   可以通过修改Title来修改页面中显示的标题。
2. 在文章中的ront-matter中的categories后增加相应分类即可
   1. 如果同一篇文章需要放到子分类下，可以用两种方法放到AAA/BBB分类下：

      categories:
        - AAA
        - BBB

      或

      categories: [AAA,BBB]

   2. 如果同一篇文章需要放到两个分类下：

      categories:
        - [AAA]
        - [BBB]

创建标签页面

1. 在根目录下右键并GIt Bash here，然后输入hexo new page tags，在~/source/tags/出现了index.md，打开在Front-matter部分增加type: "tags"
   可以通过修改Title来修改页面中显示的标题。
2. 在文章中的tags后增加相应分类即可
   • 如果同一篇文章需要多个标签，可以使用tags: [标签1,标签2,标签3]

设置页面文章篇数

1. 使用 npm install --save 命令来安装需要的 Hexo 插件。

   npm install --save hexo-generator-index
   npm install --save hexo-generator-archive
   npm install --save hexo-generator-tag

2. 在 站点配置文件 中index_generator部分修改增添：

   index_generator:
     per_page: 5  
   archive_generator:
     per_page: 20
     yearly: true
     monthly: true
   tag_generator:
     per_page: 10

   • per_page 即文章的数量

基于Next v7.8.0的构建

修改主题

1. 选择主题的github项目，然后点击Cod→SSH，复制后，在~/themes文件夹下右键，GIt Bash here，然后输入：

   git clone git@github.com:theme-next/hexo-theme-next.git

2. 打开站点配置文件，将theme后面修改为该主题的名字

   theme: hexo-theme-next

3. 在主题配置文件~/themes/hexo-theme-next/_config.yml中，在Schemes部分可以选择不同的风格。还可以通过darkmode开启黑暗模式

   #scheme: Muse
   #scheme: Mist
   #scheme: Pisces
   scheme: Gemini
   
   darkmode: false

修改菜单

在主题配置文件的Menu Settings部分：

• 设定菜单的内容，格式为Key: /link/ || icon
  • key如果如果有默认翻译，会自动加载翻译，如果不存在就不会加载。翻译可以在\themes\hexo-theme-next\languages的.yml文件中修改。
  • ||前面是菜单的链接，后面是菜单的Font Awesome图标。
• 可以通过修改icons是否显示菜单的图标

menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  #tags: /tags/ || fa fa-tags
  #categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false

设置字体及其大小等

修改英文字体

在主题配置文件中的font部分，有以下几种：

• global全局字体：定义的字体将在全站范围使用
• title网站标题字体
• headings标题字体：文章内标题的字体（h1, h2, h3, h4, h5, h6）
• posts文章字体
• codes代码字体

1. 每一项都有一个额外的 external 属性，此属性用来控制是否使用外链字体库。
2. 通过family设置字体，直接填写外链字体库的名字即可使用，但是Pisces / Gemini两种主题的global和title只能选择给定的字体。
3. size设置字体大小，默认是1em(16px)。在此处的设置最好只设置英文字体，如果设置了中文字体，则会导致英文使用的是中文自带的字体。

font:
  enable: false

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host:

  global:
    external: true
    family: Lato
    size:
  title:
    external: true
    family:
    size:
  headings:
    external: true
    family:
    size:
  posts:
    external: true
    family:
  codes:
    external: true
    family:

修改中文字体

1. 修改中文字体，以思源宋体为例，首先打开~\themes\hexo-theme-next\source\css\_variables\base.styl，找到// Font families.模块，修改变量$font-family-chinese的值：

   // Font families.
   $font-family-chinese      = "Noto Serif SC";

   同时也可以在// Font size部分修改字体大小，行高

   // Font size
   $font-size-base           = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : 1em;
   
   // Global line height
   $line-height-base         = 2;
   $line-height-code-block   = 1.6; // Can't be less than 1.3;

2. 在Google外链字体库中，搜索并打开Noto Serif SC的页面，通过Select this style选择想要的样式，再点击右上角View your selected families，复制生成的 <link> 代码到 ~/source/_data/head.swig 文件中，并将主题配置文件中custom_file_path:部分的#去掉。

   custom_file_path:
     head: source/_data/head.swig
     #header: source/_data/header.swig
     sidebar: source/_data/sidebar.swig
     #postMeta: source/_data/post-meta.swig
     #postBodyEnd: source/_data/post-body-end.swig
     #footer: source/_data/footer.swig
     #bodyEnd: source/_data/body-end.swig
     #variable: source/_data/variables.styl
     #mixin: source/_data/mixins.styl
     style: source/_data/styles.styl

   Next自定义样式放在了 ~/source/_data/目录下，在自定义样式之后，需要在custom_file_path:中启用相应的路径。

修改行间代码字体的大小

在~/source/_data/styles.styl文件中增加：

code {
	margin: 0px 4px;
	font-size: 80%;                                                        
}

侧栏

修改侧边栏的位置和出现时机

在主题配置文件的修改sidebar：

• position设置侧边栏在左边left还是右边right
• width设置侧边栏的宽度，默认Muse和Mist是320,Pisces和Gemini是240，可以不设置。
• display用于设置侧边栏的显示方式：
  • post 在文章页面（拥有目录列表）时显示
  • always 在所有页面中都显示
  • hide 在所有页面中都隐藏（可以手动展开）
  • remove 完全移除
• offset设置侧边栏距离顶部介绍的距离，只对Muse和Mist两个主题起作用
• onmobile设置是否在手机等宽度较小的设备上显示侧边栏，只对Muse和Mist两个主题起作用

sidebar:
  position: left
  #width: 300
  display: post

  # Sidebar padding in pixels.
  padding: 18
  
  offset: 12
  onmobile: true

设置头像

修改主题配置文件中的avatar部分：

• url中可以是完整的互联网 URI，也可以将头像放置在source/images/ 目录下
• 修改rounded，头像可以为圆的
• 修改rotated，鼠标移动到头像上头像会旋转

avatar:
  url: #/images/avatar.gif
  rounded: false
  rotated: false

社交链接

修改主题配置文件中的social部分：

• ||前输入你社交主页的链接即可，后面用于设置图标
• email中的mailto注意不要删去，这样在win10系统可以调用系统邮件服务自动填写收件人
• social_icons中设置的是是否显示图标和文字

social:
  #GitHub: https://github.com/yourname || fab fa-github
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype
social_icons:
  enable: true
  icons_only: false
  transition: false

侧边栏目录

修改主题配置文件中的toc部分：

• enable用于设置是否开启侧边栏目录
• number用于设置自动编号
• wrap用于设置当标题长度超过侧边栏长度时是否自动换行
• expand_all用于设置是否自动展开全部目录
• max_depth用于设置自动生成目录的最大深度

toc:
  enable: true
  number: true
  wrap: false
  expand_all: false
  max_depth: 6

标签云

1. 安装插件npm install hexo-tag-cloud@^2.0.* --save
2. 在 hexo/source/_data 目录下新建 sidebar.swig 文件，输入

   {% if site.tags.length > 1 %}
   <script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
   <script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
   <div class="widget-wrap">
       <h3 class="widget-title">标签云</h3>
       <div id="myCanvasContainer" class="widget tagcloud">
           <canvas width="250" height="250" id="resCanvas" style="width=100%">
               {{ list_tags() }}
           </canvas>
       </div>
   </div>
   {% endif %}

3. 在主题配置文件中的custom_file_path部分，增加

   sidebar: source/_data/sidebar.swig

   并在站点配置文件中其中添加

   # 标签云
   tag_cloud:
       textFont: Trebuchet MS, Helvetica
       textColor: '#333'
       textHeight: 25
       outlineColor: '#E2E1D1'
       maxSpeed: 0.1

分类

在~\source\_data\sidebar.swig中添加：

{%- if site.categories.length > 0 %}
<div class="sidebar-categories" p align="left">
  <font size="2">
  {{ list_categories({show_count:false}) }}
  </font>
  </p /div>
{%- endif %}

• hexo介绍<%- list_categories([options]) %>中的选项有：
  • orderby：分类排列方式，默认是name
  • order：分类排列顺序。1, asc 升序；-1, desc 降序。默认是1
  • show_count：显示每个分类的文章总数，默认是true
  • style：分类列表的显示方式。默认使用 list 以无序列表方式显示，false是以分割符号。
  • separator：分类间的分隔符号。只有在 style 不是 list 时有用。默认是,
  • depth：要显示的分类层级。默认是0 显示所有层级的分类；-1 和 0 很类似，但是显示不分层级；1 只显示第一层的分类。
  • class：分类列表的 class 名称。默认是category
  • transform：改变分类名称显示方法的函数
  • suffix：为链接添加前缀，默认是None

设置网站访问量

1. 登陆百度统计，新增网站，网站域名和网站首页都填网站的地址即可。
2. 在 hm.src中，复制 hm.js? 后面那串统计脚本 id到主题配置文件中baidu_analytics后面

   <script>
   var _hmt = _hmt || [];
   (function() {
     var hm = document.createElement("script");
     hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxx";
     var s = document.getElementsByTagName("script")[0]; 
     s.parentNode.insertBefore(hm, s);
   })();
   </script>

3. 修改完参数后执行 hexo g 和 hexo d 命令部署博客。在百度统计页面，点击代码检查，当出现”页面代码安装状态：代码安装正确“时，表示配置成功。
4. 在主题配置文件中，将busuanzi_count的enable修改为true，就可以在页面添加统计模块。

   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: fa fa-eye

增加搜索功能

1. 在根目录下右键并Git Bash here，然后输入

   npm install hexo-generator-searchdb --save

2. 在站点配置文件中添加搜索设置

   search:
     path: search.xml
     field: post
     format: html
     limit: 10000

3. 将主题配置文件中的Local Search的enable修改为true

   local_search:
     enable: ture
     trigger: auto
     top_n_per_article: 1
     unescape: false
     preload: false

   • top_n_per_article表示每篇文章出现几条匹配，-1代表全部

文章相关

增加字数统计

1. 安装插件npm install hexo-symbols-count-time --save
2. 在站点配置文件中增加：

   symbols_count_time:
     symbols: true 
     time: true 
     total_symbols: true 
     total_time: true 

   • symbols：文章字数
   • time：阅读时长
   • total_symbols：网页底部是否显示所有文章总字数
   • total_time：网页底部所有文章阅读中时长
3. 修改主题配置文件中的 symbols_count_time 部分：

   symbols_count_time:
     separated_meta: true 
     item_text_post: true 
     item_text_total: true 
     awl: 4 
     wpm: 275 

   • separated_meta：统计信息不换行显示
   • item_text_post：文章统计信息中是否显示“本文字数/阅读时长”等描述文字
   • item_text_total：底部footer站点统计信息中是否显示“本文字数/阅读时长”等描述文字
   • awl：平均字符长度
   • wpm： 阅读速度, 一分钟阅读的字数
4. 网页中显示的本文字数和阅读时长是分行了的，如果不想分行，打开~\themes\hexo-theme-next\layout\_macro\post.swig，将下面一行删去即可：

   {%- if theme.symbols_count_time.separated_meta %}<br>{%- endif %}

图片的放大功能

将主题配置文件中的fancybox关键词为true即可，此时点击图片会有浮动的放大功能。

显示公式

1. 首先卸载默认的渲染引擎，安装next所需要的：

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

2. 在主题配置文件中的math部分：

   math:
     per_page: true
     mathjax:
       enable: true
       mhchem: false
     katex:
       enable: false
       copy_tex: false

   • per_pag中，true代表按需要加载公式，在.md文件Front-matter添加mathjax: true才会加载公式。否则在所有页面都加载
   • mathjax的enable改为true
3. 行内的公式左右各一个$即可。

主页不显示全文

1. 在文章中使用 <!-- more --> 手动进行截断
2. 在文章的 front-matter 中添加 description，并提供文章摘录
   如果希望摘录在首页是居中的，则将~\themes\hexo-theme-next\layout_macro\post.swig中的<p>{{ post.description }}</p>改为如下即可：

   <p align="center">{{ post.description }}</p>

打赏功能

1. 将支付二维码放置在source/images/ 目录下
2. 修改主题配置文件中的reward_settings部分

   reward_settings:
     enable: false
     animation: false
     #comment: Donate comment here.
   reward:
     wechatpay: /images/wechatpay.png
     #alipay: /images/alipay.png
     #paypal: /images/paypal.png
     #bitcoin: /images/bitcoin.png

   • enable用于设置是否在文章末尾显示打赏按钮
   • animation开启动画后，XX支付的字会抖动
   • comment在打赏按钮的上方出现的字
   • reward放置二维码的路径

评论

1. 注册并登陆LeanCloud，创建应用，输入应用名称后创建
2. 点击齿轮图标→应用Key，复制AppID，AppKey，在主题配置文件的valine部分修改：

   valine:
     enable: true
     appid: XXXXXXXXX
     appkey: XXXXXXXX
     notify: false 
     verify: false 
     placeholder: Just go go 
     avatar: mm # Gravatar style
     guest_info: nick,mail,link 
     pageSize: 10 
     language: 
     visitor: false
     comment_count: true 
     recordIP: false # Whether to record the commenter IP
     serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
     #post_meta_order: 0

   • enable改为 true
   • appid和 appkey粘贴在lean复制的App ID和App Key
   • notify新留言是否需要通知
   • verify验证码
   • placeholder默认留言框内的文字
   • avatar默认头像
   • guest_info默认留言框的头部需要访问者输入的信息
   • pageSize默认单页的留言条数
   • language语言，可改为en, zh-cn
   • visitor开启后可能会与百度网站访问量的模块冲突，显示出两个阅读次数，因此可以关闭。
   • comment_count评论次数
3. 可以在LeanCloud中的储存→结构化数据→Comment中管理评论
4. 开启后，tag、categories页面也会带有评论， 若需要关闭的话，可以在不想要评论页面下相应的md文件的Front-matter部分添加字段 comments: false 。

设置代码相关

在主题配置文件的codeblock部分修改：

• highlight_theme设置代码高亮格式，有normal| night | night eighties | night blue | night bright | solarized | solarized dark | galactic可选
• copy_button开启代码块右上角的复制按钮，show_result设置是否显示复制成功提示

codeblock:
  highlight_theme: normal
  copy_button:
    enable: true
    show_result: false
    # Available values: default | flat | mac
    style:

在站点配置文件中的highlight部分中也可以修改：

• enable中是否开启代码高亮
• line_number是否增加代码行号
• auto_detect自动判断代码语言

highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace: ''
  wrap: true
  hljs: false

页面加载进度和阅读进度

主题配置文件中reading_progress：

• position位置是top还是bottom

reading_progress:
  enable: false
  position: top
  color: "#37c6c0"
  height: 3px

通过一个按钮回到网页顶部

主题配置文件中的back2top部分：

• enable设置是否开启回到顶部按钮
• sidebar 按钮会出现在侧栏下方
• scrollpercent 显示阅读百分比

back2top:
  enable: true
  sidebar: false
  scrollpercent: false

书签：定位到上次阅读的地方

主题配置文件中的bookmark部分：

bookmark:
  enable: true
  # Customize the color of the bookmark.
  color: "#222"
  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
  # If manual, only save it by clicking the bookmark-icon.
  save: auto

版权信息

主题配置文件中的bookmark部分：

• license:设置版权标准
• sidebar:设置是否在侧边栏显示版权标准
• post:设置是否在文章底部显示版权信息
• language:设置语言

creative_commons:
  license: by-nc-sa
  sidebar: false
  post: false
  language:

修改文章内链接文本样式

将链接文本设置为 蓝色，鼠标划过时文字 颜色加亮，并显示下划线，在~\source\_data\styles.styl文件中，增加：

.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

.post-body li a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

其他

设置「背景动画」

1. 首先在~\themes\hexo-theme-next\source\lib下载

   git clone https://github.com/theme-next/theme-next-three three
   git clone https://github.com/theme-next/theme-next-canvas-ribbon canvas-ribbon

2. 更改主题配置文件中开启一种即可

   three:
     enable: false
     three_waves: false
     canvas_lines: false
     canvas_sphere: false
   #在背景随机出现彩带，鼠标点击后更换
   canvas_ribbon:
     enable: ture
     size: 300 # The width of the ribbon
     alpha: 0.6 # The transparency of the ribbon
     zIndex: -1 # The display level of the ribbon

3. 如果是使用CDN而不是第二种，则在vendors模块中添加

   three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js
   three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/three-waves.min.js
   canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/canvas_lines.min.js
   canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/canvas_sphere.min.js

其他动画的设置：canvas-nest：

1. 在~\themes\hexo-theme-next\source\lib目录下：

   git clone git@github.com:hustcc/canvas-nest.js.git canvas-nest

2. 在主题配置文件中增加：

   # Canvas-nest
   # Dependencies: https://github.com/theme-next/theme-next-canvas-nest
   # For more information: https://github.com/hustcc/canvas-nest.js
   canvas_nest:
     enable: true
     onmobile: true # Display on mobile or not
     color: "0,0,255" 
     opacity: 0.5 
     zIndex: -1 # z-index property of the background
     count: 99 # The number of lines

   • color： 线条颜色
   • opacity：透明度（0-1）
   • count：线条总数目

右上角出现Github角标

点击之后可以跳转到其源码页面，修改主题配置文件中github_banner：

• enable设置是否在页面右上角显示Github三角标
• permalink:填写跳转到的Github地址
• title:设置鼠标移动到图标后显示的文字

github_banner:
  enable: false
  permalink: https://github.com/yourname
  title: Follow me on GitHub

页脚

修改主题配置文件中footer：

• since表示网站成立的年份，不设置的话默认是当前年份
• icon设置年份后面的图标
  • name默认是心形
  • animated用于设置心形是否跳动
  • color设置图标颜色
• copyright显示图标后面的版权所属，也就是作者名，不设置的话默认显示根目录配置文件中的作者名
• powered设定是否显示Powered by Hexo以及当前主题的版本信息

footer:
  #since: 2015
  icon:
    name: fa fa-heart
    animated: false
    color: "#ff0000"
  copyright:
  powered: true

  # Beian ICP and gongan information for Chinese users. See: https://beian.miit.gov.cn, http://www.beian.gov.cn
  beian:
    enable: false
    icp:
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url:

标签的#改成图标

将在主题配置文件中的tag_icon改为true即可

归档页面年份后增加十二生肖

1. 下载十二生肖字体，将解压的三个字体文件全部放在根目录 ~/source/fonts/ 下，在~\themes\hexo-theme-next\layout\_macro\post-collapse.swig文件中，修改 {%- if year !== current_year %}部分为

   {%- if year !== current_year %}
     {%- set current_year = year %}
     <div class="collection-year">
       <{%- if theme.seo %}h2{% else %}h1{%- endif %} class="collection-header">{{ current_year }}
         <div class="chinese-zodiac">
           {%- if current_year % 12 == 0 %}
             <i class="symbolic-animals icon-monkey"></i>
           {%- endif %}
           {%- if current_year % 12 == 1 %}
             <i class="symbolic-animals icon-rooster"></i>
           {%- endif %}
           {%- if current_year % 12 == 2 %}
             <i class="symbolic-animals icon-dog"></i>
           {%- endif %}
           {%- if current_year % 12 == 3 %}
             <i class="symbolic-animals icon-pig"></i>
           {%- endif %}
           {%- if current_year % 12 == 4 %}
             <i class="symbolic-animals icon-rat"></i>
           {%- endif %}
           {%- if current_year % 12 == 5 %}
             <i class="symbolic-animals icon-ox"></i>
           {%- endif %}
           {%- if current_year % 12 == 6 %}
             <i class="symbolic-animals icon-tiger"></i>
           {%- endif %}
           {%- if current_year % 12 == 7 %}
             <i class="symbolic-animals icon-rabbit"></i>
           {%- endif %}
           {%- if current_year % 12 == 8 %}
             <i class="symbolic-animals icon-dragon"></i>
           {%- endif %}
           {%- if current_year % 12 == 9 %}
             <i class="symbolic-animals icon-snake"></i>
           {%- endif %}
           {%- if current_year % 12 == 10 %}
             <i class="symbolic-animals icon-horse"></i>
           {%- endif %}
           {%- if current_year % 12 == 11 %}
             <i class="symbolic-animals icon-goat"></i>
           {%- endif %}
         </div>
       </{%- if theme.seo %}h2{% else %}h1{%- endif %}>
     </div>
   {%- endif %}

2. 在~/source/_data/styles.styl中，增加

   .chinese-zodiac {
       float: right;
   }
   @font-face {
     font-family: 'chinese-zodiac';
     font-display: swap;
     src: url('/fonts/chinese-zodiac.eot');
     src: url('/fonts/chinese-zodiac.eot') format('embedded-opentype'),
          url('/fonts/chinese-zodiac.woff2') format('woff2'),
          url('/fonts/chinese-zodiac.woff') format('woff');
     font-weight: normal;
     font-style: normal;
   }
   .symbolic-animals {
     display: inline-block;
     font: normal normal normal 14px/1 chinese-zodiac;
     font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   .icon-dragon:before { content: '\e806'; }
   .icon-tiger:before { content: '\e809'; }
   .icon-pig:before { content: '\e810'; }
   .icon-horse:before { content: '\e813'; }
   .icon-rat:before { content: '\e816'; }
   .icon-goat:before { content: '\e818'; }
   .icon-snake:before { content: '\e820'; }
   .icon-ox:before { content: '\e822'; }
   .icon-dog:before { content: '\e825'; }
   .icon-rabbit:before { content: '\e826'; }
   .icon-monkey:before { content: '\e829'; }
   .icon-rooster:before { content: '\e82f'; }

增加看板动画

1. 在~下npm install -save hexo-helper-live2d，并在站点配置文件中输入：

   • NAME可选：chitose、epsilon2_1、haru/01、haru/02、haruto、hibiki、hijiki、izumi、koharu、miku、ni-j、nico、nietzsche、nipsilon、nito、shizuku、tororo、tsumiki、unitychan、wanko、z16
   • display中：width和height分别控制宽度和高度，position控制位置，hOffset和vOffset分别控制水平和垂直的偏移
   • mobile中，show控制是否在移动设备上显示，scale控制在移动设备上的缩放
   • react中opacity控制透明度
   • dialog中，enable表示是否显示对话框，hitokoto表示启用的语料库是使用一言API

   live2d:
     enable: true
     scriptFrom: local
     pluginRootPath: live2dw/
     pluginJsPath: lib/
     pluginModelPath: assets/
     tagMode: false
     log: false
     model:
       use: live2d-widget-model-NAME
     display:
       hOffset: 0
       vOffset: -20
       position: right
       width: 150
       height: 300
     mobile:
       show: true
       scale: 0.5
     react:
       opacity: 1.0
     dialog:
       enable: false
       hitokoto: false

2. 在~新建文件夹/live2d_models/NAME，在NAME文件夹下，新建文件NAME.model.json，然后安装模型npm install --save live2d-widget-model-NAME

3. 增加看板动画会导致网站底部和访问量消失，解决办法：https://www.zywvvd.com/2020/03/09/next/13_busuanzi_fix_for_live2d/next-busuanzi-fix-live2d/

Mist主题首页两篇文章之间间距缩小和分割线

在~\themes\hexo-theme-next\source\css_schemes\Mist_posts-expand.styl文件中，修改该数值即可：

.post-block:not(:first-child) {
  margin-top: 120px;
}

将 .post-eof部分修改为

.post-eof {
   display: block;
 //  margin: $post-eof-margin-top auto $post-eof-margin-bottom;  
   width: 100%; //分割线长度
   height: 1px; // 分割线高度
   background: $grey-light;
   text-align: center;
 }