用HEXO搭建你自己的博客！（中）

前言

前几天我搭建了我的博客！
现在我把搭建的过程记下来（顺便存个档防止健忘症en）
本文是使用Windows 10 LTSC作为平台搭建的，但Hexo完全跨平台，大部分命令通用（有些命令要加sudo哦）
PS:本项目无任何预算！全部是免费的XD

以下转载与ARIA的github仓库——

修改你站点的`_config.yml`

把主题修改为 `aria`

1	`theme: aria`

语言设置，可以设置的值为 `zh_CN`、`zh_HK`、`zh_TW` 或 `en`。如果你从别的主题转移过来比如旧版本 NexT，请注意这里不是 `zh-Hans` 而是 `zh_CN`。`default` 是 `en` 的别名。

1	`language: zh_CN`

Hexo 搜索插件的配置

# Hexo local search
search:
  path: search.xml
  field: all

Hexo RSS 插件的配置

# Hexo feed
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

高亮设置，Hexo 内置的语法高亮功能使用了 highlight.js，但默认却没有给高亮的类名添加 `hljs-` 的前缀，而 highlight.js 项目提供的 CSS 文件却使用了这个前缀。为了保持和 highlight.js 项目 CSS 文件的兼容性，你需要像下面一样添加 `hljs: true` 到对应的配置里：

highlight:
  enable: true
  hljs: true # 添加这一行！
  line_number: true
  auto_detect: true
  tab_replace:

复制 ARIA 配置：把 `_config.yml.example` 复制为 `_config.yml`：

1	`cp themes/aria/_config.yml.example themes/aria/_config.yml`

修改主题配置，下面的配置需要修改 ARIA 目录下的主题的 `_config.yml`，不需要修改所有的配置项，只要修改你需要的部分就可以了：

菜单设置

如果你想要启用“分类”和“标签”页面，取消注释 categories 和 tags，然后运行 hexo new page categories 和 hexo new page tags 生成这两个页面，最后分别把 layout: categories 和 layout: tags 添加到对应文件的文件头里。如果你想要启用“关于”页面，运行 hexo new page about 并取消注释即可：

menu:
  - name: home
    link: /
    icon: <i class="fas fa-home"></i>
  - name: archives
    link: archives/
    icon: <i class="fas fa-archive"></i>
  - name: categories
    link: categories/
    icon: <i class="fas fa-th-list"></i>
  - name: tags
    link: tags/
    icon: <i class="fas fa-tags"></i>
  - name: about
    link: about/
    icon: <i class="fas fa-user-edit"></i>

生成`Favicon`

首先准备好一张图片作为你想要的 favicon 的原图，然后访问 https://realfavicongenerator.net/ 生成各种不同浏览器的 favicon，然后下载压缩包，解压到你站点目录下 source/favicons 目录里（没有则创建一个）。ARIA 会自动加载这些图标。

网站关键词

将 keywords 项设置为关键词列表。

CreativeCommons 许可证

设置 creative_commons 项。为了保证美观，ARIA 会将链接显示在网站底部。可选的许可证有 by、by-sa、by-nd、by-nc、by-nc-sa、by-nc-nd，有关它们的区别参见 https://creativecommons.org/licenses/。

代码高亮主题

ARIA 内置了四种常见代码高亮主题，设置 highlight 项为 atom-one-dark、atom-one-light、solarized-dark、solarized-light 中的一个。ARIA 使用了 Hexo 内置的 highlight.js，因此如果你想添加更多的高亮主题，直接访问 highlight.js 的样式仓库，下载你需要的 CSS 文件到你站点的 source/css/ 目录（也即在你存放 Markdown 文件的 source/ 目录下面创建一个 css/ 目录，你也可以把它放到主题的 source/css/ 目录，但是这样会污染 git 工作区），然后设置这里的值为你下载的文件名（不要添加.css 后缀，这个是自动添加的）。

自定义信息

custom_info 项的值会显示在网站底部，出于格式考虑请不要设置过长的字符串。

头像

设置 avatar 项为你头像的链接，例如设置 avatar: images/myavatar.png，则你需要把自己的头像放置到站点根目录下的 source/images/myavatar.png。

自定义 Logo

设置方法类似于头像，logo 项的值将会被显示在默认顶部 ARIA 的位置，或者如果你想隐藏 logo，把这一项留空。

自定义主题色

主题色 color 会被用于页眉和页脚的背景上，一些浏览器也会使用它来辅助变色，例如 Android 版 Chrome 的标题栏颜色，默认为网站的深色。由于颜色以 # 开头，需要加双引号以防止被作为 YAML 的注释。如果你没有特殊需求，最好不要修改这里的颜色。

Google 页面验证

如果想把你的网站提交给 Google，需要证明你是此网站的所有者，当 Google 要求你验证时，选择“使用元标签”，复制 content 属性的值，填写到 google_verification 项，然后重新生成发布网站。

Tim_Paik留：如果还需要添加其他标签可以到\themes\aria\layout\_layout.njk中修改

网站创建年份

将 since 值设为你网站的创建年份，如果留空或者填写年份与当前年份一致，网站底部只会显示当前年份，否则显示 创建年份 - 当前年份。

搜索设置

如果需要启用搜索，首先确保第一步中安装了 hexo-generator-search，并且按照第二步配置过了，然后将 search 设置为 true，搜索框会显示在侧边栏的上部。

侧边栏设置

有 left、right 和 false 三种选择，设置为 false 则不会显示侧边栏。

动画

将 animate 设置为 true 则会启用卡片的翻转动画效果（不建议启用，在某些浏览器和较低配置电脑上可能会导致卡顿）。

不蒜子计数

如果需要关闭不蒜子计数，将 busuanzi 设置为 false，否则在页面底部会显示 站点访问次数、站点访问人数、页面访问次数。

推荐关闭，因为这会使完全加载网站变慢

MathJax 设置

MathJax 是一套用于在网页上显示数学公式和符号的 JavaScript 排版库，由于其体积较大，ARIA 没有内置，如果你有数学写作需要，首先设置 mathjax 下的 enable 为 true，然后将 cdn 项设置为你要使用的 MathJax CDN，然后在需要使用的页面添加文件头 mathjax: true。设置 global 为 true 可以在全部页面启用 MathJax，但可能会拖慢非数学页面的显示速度。

常用库 CDN

可以对 ARIA 内置的库使用 CDN 加速，首先将 lib_cdn 下的 enable 设置为 true，然后将 CDN 地址添加到配置中即可，如果你不了解自己在做什么，请直接跳过这部份。

社交链接

先将 social 下面 enable 设置为 true，然后在 links 下添加你的个人社交链接，格式如下：

social:
  enable: true
  links:
    - name: 显示名称
      link: 网页地址
      icon: 你所使用的 Font Awesome 图标的 HTML 标签
    - name: 显示名称
      link: 网页地址
      icon: 你所使用的 Font Awesome 图标的 HTML 标签

前往 Font Awesome 获取你想要的图标。

友情链接

先将 blogroll 下面的 enable 设置为 true，然后在 links 下添加友情链接，格式如下：

blogroll:
  enable: true
  links:
    - name: 显示名称
      link: 网页地址
      icon: 你所使用的 Font Awesome 图标的 HTML 标签
    - name: 显示名称
      link: 网页地址
      icon: 你所使用的 Font Awesome 图标的 HTML 标签

前往 Font Awesome 获取你想要的图标。

评论系统

首先将 comment 下 enable 设成 true 以全局启用评论（首页、归档、分类、标签页面除外），然后填入你的 Disqus Shortname。如果你有哪个页面想单独关闭评论，添加文件头 comment: false （comment 不是 comments！）。

如果你使用 commentjs，首先将它的 enable 设置成 true，然后根据你的网站页面存放位置设置 type，支持 github 和 oschina，user 是你在这些网站的用户名，repo 是你这个仓库的名字，client_id 和 client_secret 需要你去 github 或者 oschina 生成一个应用，然后复制 Token。

如果你使用 Valine，首先设置 api_id 与 api_key，并将 enable 设置为 true，其它配置项参照 Valine 文档设置。

如果启用多个评论系统，默认只会显示顺序靠前的（顺序：Disqus，commentjs，Valine）。

Tips：如果想批量更改新生成的文件的文件头，编辑站点目录下 scaffolds 目录里的文件，Hexo 会把这个目录内的文件作为生成新文件时的模板。

打赏

将 reward 下 enable 设置为 true 启用打赏，然后在 comment 项设置你的打赏提示语，然后按需设置三种打赏方式的二维码（微信支付，支付宝，比特币），设置方式同头像，如果想关闭某一项留空即可。

自动截断摘要

如果你想自动生成首页的文章摘要，你可以使用这个选项。例如设置 auto_excerpt: 200 就会让主题截取文章的前 200 个字符（不含 HTML 标签）作为摘要。但是如果你想要更好的显示效果，建议你 在想要的地方放置一个  标签，在这个标签之前的文章内容会被作为文章的摘要。

自定义字体

首先将 custom_font 下面的 enable 为 true，然后去提供网页字体服务的网站比如 Google Fonts（如果你不能访问，找个替代品），然后选择所有你需要的字体，把生成的 <link> 标签里面的 href 属性网址复制出来粘贴到 link 选项下面。然后给不同的部分设置不同的字体。

示例如下：

custom_font:
  enable: true
  link: //fonts.googleapis.com/css?family=Lato|Roboto+Condensed|Skranji|Ubuntu|Ubuntu+Mono
  all: Ubuntu # <body> 的字体。
  title: Roboto Condensed # 标题字体。
  subtitle: Roboto Condensed # 副标题字体。
  main: Ubuntu # 主要部份字体（菜单以下页脚以上）。
  code: Ubuntu Mono # 代码字体。

内置写作样式

Markdown 会被编译成 HTML，所以你可以直接在有效的 Markdown 文件里面写 HTML 代码。为了能更好地组织文章结构，主题内置了一些自定义样式类，可以在写作时使用。

居中引用

只要给你的 HTML 代码添加 .centerquote 这个类，你就能得到一个有上下边框的居中引用。推荐给 <blockquote></blockquote> 标签使用这个类：

1	`<blockquote class="centerquote">居中引用样例</blockquote>`

彩色警告块

只要给你的 HTML 代码添加 .alert-red, .alert-green 或 .alert-blue：

1
2
3

<div class="alert-red">红色警告块样例</div>
<div class="alert-green">绿色警告块样例</div>
<div class="alert-blue">蓝色警告块样例</div>

自定义 CSS 和 JavaScript

如果你需要用自定义的 CSS 覆盖 ARIA 内置的 CSS 样式，可以编辑 themes/aria/source/css/custom.styl，这个文件会被最后加载。

如果你需要使用自定义的 JavaScript，可以编辑 themes/aria/source/js/custom.js，这个文件会被最后加载。

更新主题

如果你使用了自定义的 CSS 或 JavaScript，更新之前请先用 Git 把它们提交。只有工作区干净的时候才能进行拉取

然后使用 git pull 拉取最新的更新，如果有冲突请手动合并提交。

每次更新完了不要忘记对比 _config.yml 和 _config.yml.example，并手动将 example 中的更改应用到你自己的配置中。

转载完毕！

未完待续

留言

还有什么问题可以直接在评论区提！我会尽量回复的！
这里是Tim_Paik，如果有什么好想法或者求助可以找这个邮箱：timpaik#163.com（把#换成@）
转载请注明作者en

前言

目录

安装主题！