hexo博客3：主题选择-阿里云开发者社区

目前来看，整个页面的样式并不是那么喜欢，想换一个风格，这就涉及到主题的配置了。

一、选择主题

目前 Hexo 里面应用最多的主题基本就是 Next 主题了，这个主题还是挺好看的，另外它支持的插件和功能也极为丰富。

并且配置这个主题后，博客可以支持更多的扩展功能，比如阅览进度条、中英文空格排版、图片懒加载等等。

二、下载主题

那么首先就让我们来安装下 Next 这个主题吧，目前 Next 主题已经更新到 7.x 版本了，我们可以直接到 Next 主题的 GitHub Repository 上把这个主题下载下来。

主题的 GitHub 地址是：

https://github.com/theme-next/hexo-theme-next

，可以直接把 master 分支 Clone 下来。

首先命令行进入到项目的根目录，执行如下命令即可：

git clone https://github.com/theme-next/hexo-theme-next themes/next

执行完毕之后 Next 主题的源码就会出现在项目的 themes/next 文件夹下。

然后需要修改下博客所用的主题名称，修改项目根目录下的 _config.yml 文件，找到 theme 字段，修改为 next 即可，修改如下：

theme: next

然后本地重新开启服务，访问刷新下页面，就可以看到 next 主题就切换成功了，预览效果如下：

C:\Windows\System32\MyBlog\themes\next

Hexo 下的分类和表签无法显示，解决方法：

打开页面的时候标签和分类，总是提示Cannot GET /tags/这个错误

步骤以tags标签为例

注意：冒号后面都需要添加一个空格

三、主题配置

现在已经成功切换到 next 主题上面了，接下来就对主题进行进一步地详细配置吧，比如修改样式、增加其他各项功能的支持，下面逐项道来。

参考：https://cuiqingcai.com/7625.html

具体的效果大家可以设置后根据喜好选择。

Next 主题内部也提供了一个配置文件，名字同样叫做 _config.yml，只不过位置不一样，它在 themes/next 文件夹下，Next 主题里面所有的功能都可以通过这个配置文件来控制，下文所述的内容都是修改的 themes/next/_config.yml 文件。

3.1 样式

Next 主题还提供了多种样式，风格都是类似黑白的搭配，但整个布局位置不太一样，通过修改配置文件的 scheme 字段即可，我选了 Pisces 样式，修改 _config.yml （注意是 themes/next/_config.yml 文件）如下：

scheme: Pisces

另外还有几个可选项，大家可以自行根据喜好选择。

3.2 favicon

favicon 就是站点标签栏的小图标，默认是用的 Hexo 的小图标，如果我们有站点 Logo 的图片的话，我们可以自己定制小图标。

但这并不意味着我们需要自己用 PS 自己来设计，已经有一个网站可以直接将图片转化为站点小图标，站点链接为：https://realfavicongenerator.net[1]，到这里上传一张图，便可以直接打包下载各种尺寸和适配不同设备的小图标。

图标下载下来之后把它放在 themes/next/source/images 目录下面。

然后在配置文件里面找到 favicon 配置项，把一些相关路径配置进去即可，示例如下：

favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon.png
  safari_pinned_tab: /images/safari-pinned-tab.svg

配置完成之后刷新页面，整个页面的标签图标就被更新了。

3.3 avatar

avatar 这个就类似站点的头像，如果设置了这个，会在站点的作者信息旁边额外显示一个头像。比如将1.png 图片放置到 themes/next/source/images/1.png 路径，然后在主题 _config.yml 文件下编辑 avatar 的配置，修改为正确的路径即可。

# Sidebar Avatar
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.png
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # If true, the avatar would be rotated with the cursor.
  rotated: true

3.4 Sidebar Avatar

这里有 rounded 选项是是否显示圆形，rotated 是是否带有旋转效果，大家可以根据喜好选择是否开启。

配置完成之后就会显示头像。

3.5 rss

博客一般是需要 RSS 订阅的，如果要开启 RSS 订阅，这里需要安装一个插件，叫做 hexo-generator-feed，安装完成之后，站点会自动生成 RSS Feed 文件，安装命令如下：

npm install hexo-generator-feed --save

在项目根目录下运行这个命令，安装完成之后不需要其他的配置，以后每次编译生成站点的时候就会自动生成 RSS Feed 文件了。

3.6 code

把代码的颜色修改为黑色，并把复制按钮的样式修改为类似 Mac 的样式，修改 _config.yml 文件的 codeblock 区块如下：

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night bright
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac

3.7 top

我们在浏览网页的时候，如果已经看完了想快速返回到网站的上端，一般都是有一个按钮来辅助的，这里也支持它的配置，修改 _config.yml 的 back2top 字段即可，我的设置如下：

back2top: 
  enable: true  
  # Back to top in sidebar. 
  sidebar: false  
  # Scroll percent label in b2t button. 
  scrollpercent: true

enable 默认为 true，即默认显示。sidebar 如果设置为 true，按钮会出现在侧栏下方，个人觉得并不是很好看，就取消了，scrollpercent 就是显示阅读百分比，个人觉得还不错，就将其设置为 true。

3.8 reading_process

reading_process，阅读进度。大家可能注意到有些站点的最上侧会出现一个细细的进度条，代表页面加载进度和阅读进度，如果大家想设置的话也可以试试，我将其打开了，修改

_config.yml 如下：
reading_progress: 
  enable: true  
  # Available values: top | bottom  
  position: top 
  color: "#222" 
  height: 2px

设置之后显示效果如下：

3.9 bookmark

书签，可以根据阅读历史记录，在下次打开页面的时候快速帮助我们定位到上次的位置，大家可以根据喜好开启和关闭，我的配置如下：

bookmark: 
  enable: false 
  # 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
github_banner

3.10 Github跳转

在一些技术博客上，大家可能注意到在页面的右上角有个 GitHub 图标，点击之后可以跳转到其源码页面，可以为 GitHub Repository 引流，大家如果想显示的话可以自行选择打开，我的配置如下：

# `Follow me on GitHub` banner in the top-right corner. 
github_banner:  
  enable: true  
  permalink: https://github.com/NightTeam/nightteam.github.io 
  title: NightTeam GitHub

记得修改下链接 permalink 和标题 title，显示效果可以看到在页面右上角显示了 GitHub 的图标，点击可以进去到 Repository 页面。

3.10 gitalk

由于 Hexo 的博客是静态博客，而且也没有连接数据库的功能，所以它的评论功能是不能自行集成的，但可以集成第三方的服务。

其中，gitalk是利用 GitHub 的 Issue 来当评论，样式也比较不错。

首先需要在 GitHub 上面注册一个 OAuth Application，链接为：

https://github.com/settings/applications/new

，注册完毕之后拿到 Client ID、Client Secret 就可以了。

首先需要在 _config.yml 文件的 comments 区域配置使用 gitalk：

# Multiple Comment System Support 
comments: 
  # Available values: tabs | buttons  
  style: tabs 
  # Choose a comment system to be displayed by default. 
  # Available values: changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte  
  active: gitalk

主要是 comments.active 字段选择对应的名称即可。

然后找打 gitalk 配置，添加它的各项配置：

# Gitalk  
# Demo: https://gitalk.github.io  
# For more information: https://github.com/gitalk/gitalk  
gitalk: 
  enable: true  
  github_id: NightTeam  
  repo: nightteam.github.io # Repository name to store issues 
  client_id: {your client id} # GitHub Application Client ID  
  client_secret: {your client secret} # GitHub Application Client Secret  
  admin_user: germey # GitHub repo owner and collaborators, only these guys can initialize gitHub issues  
  distraction_free_mode: true # Facebook-like distraction free mode 
  # 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

配置完成之后 gitalk 就可以使用了。GitHub 授权登录之后就可以使用了，评论的内容会自动出现在 Issue 里面。

3.11 pangu

如果希望写中文和英文的时候中间必须要留有间距，一个简单直接的方法就是中间加个空格，但某些情况下可能习惯性不加或者忘记加了，这就导致中英文混排并不是那么美观。

pangu 就是来解决这个问题的，我们只需要在主题里面开启这个选项，在编译生成页面的时候，中英文之间就会自动添加空格，看起来更加美观。具体的修改如下：

pangu: true

3.11 math

一些情况下我们需要写一个公式，比如演示一个算法推导过程，MarkDown 是支持公式显示的，Hexo 的 Next 主题同样是支持的。

Next 主题提供了两个渲染引擎，分别是 mathjax 和 katex，后者相对前者来说渲染速度更快，而且不需要 JavaScript 的额外支持，但后者支持的功能现在还不如前者丰富，具体的对比可以看官方文档：

https://theme-next.org/docs/third-party-services/math-equations

所以我这里选择了 mathjax，通过修改配置即可启用。

math:
  enable: true
  # Default (true) 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 false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true
  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: true

mathjax 的使用需要我们额外安装一个插件，叫做 hexo-renderer-kramed，另外也可以安装 hexo-renderer-pandoc，命令如下：

npm un hexo-renderer-marked --save  
npm i hexo-renderer-kramed --save

另外还有其他的插件支持，大家可以到官方文档查看。

3.12 pjax

pjax 这个技术实际上就是，利用 Ajax 技术实现了局部页面刷新，既可以实现 URL 的更换，有可以做到无刷新加载。

要开启这个功能需要先将 pjax 功能开启，然后安装对应的 pjax 依赖库，首先修改 _config.yml 修改如下：

pjax: true

然后安装依赖库，切换到 next 主题下，然后安装依赖库：

$ cd themes/next  
$ git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

这样 pjax 就开启了，页面就可以实现无刷新加载了。

四、其他设置

另外关于 Next 主题的设置还有挺多的，这里就介绍到这里了，更多的主题设置大家可以参考官方文档：https://theme-next.org/docs/。

hexo博客3：主题选择

一、选择主题

二、下载主题

三、主题配置

3.1 样式

3.2 favicon

3.3 avatar

3.4 Sidebar Avatar

3.5 rss

3.6 code

3.7 top

3.8 reading_process

3.9 bookmark

3.10 Github跳转

3.10 gitalk

3.11 pangu

3.11 math

3.12 pjax

四、其他设置

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

hexo博客3：主题选择

一、选择主题

二、下载主题

三、主题配置

3.1 样式

3.2 favicon

3.3 avatar

3.4 Sidebar Avatar

3.5 rss

3.6 code

3.7 top

3.8 reading_process

3.9 bookmark

3.10 Github跳转

3.10 gitalk

3.11 pangu

3.11 math

3.12 pjax

四、其他设置

热门文章

最新文章

相关电子书

相关实验场景