Hexo + Next 搭建博客

发表于： 0001-01-01

字数： 1286 阅读：≈ 3分钟评论：

使用 Hexo + Next 主题建站。

安装前提

安装 Hexo 相当简单，只需要先安装下列应用程序即可：

{% note default %} Node.js Git {% endnote %}

如果您的电脑中已经安装上述必备程序，那么恭喜您！你可以直接前往 安装 Hexo 步骤。

如果您的电脑中尚未安装所需要的程序，请根据以下安装指示完成安装。

sudo pacamn -S git nodejs npm

安装 Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

npm install -g hexo-cli

初始化

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

hexo init <folder>
cd <folder>
npm install

新建完成后，指定文件夹的目录如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

Hexo 配置

设置时区语言以及主题

在_config.yml文件中将timezone设置为Asia/Shanghai，language设置为zh-CN，theme设置为next，并更改title和author。

设置文章链接

npm install hexo-abbrlink --save

在_config.yml中将本来的permalink: :year/:month/:day/:title/注释，然后添加

permalink: posts/:abbrlink.html
abbrlink:
  alg: crc16   #算法： crc16(default) and crc32
  rep: dec     #进制： dec(default) and hex

Hexo 主题配置

下载主题到本地

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

将next主题下的配置文件复制到hexo根目录，并命名为_config.next.yml

cp themes/next/_config.yml _config.next.yml

添加`Aplayer`播放器

取消注释_config.next.yml中的下面该段。

custom_file_path:
  head: source/_data/head.njk

创建source/_data/head.njk文件，填入以下内容

<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/Meting.min.js"></script>
<meting-js
    server="netease"
    id="7519316683"
    type="playlist"
    fixed="true"
    autoplay="true">
</meting-js>

在 themes/next/source 下新建文件夹 dist ，放入文件 Aplayer.min.css, Aplayer.min.js, Meting.min.js {% note success %} 上述文件分别来源于 MetingJS 与 Aplayer {% endnote %}

或者使用 CDN 提供的 js 文件

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js
    server="netease"
    id="7519316683"
    type="playlist"
    fixed="true"
    autoplay="true">
</meting-js>

更改部分样式

取消注释_config.next.yml中的下面该段。

custom_file_path:
  style: source/_data/styles.styl

创建source/_data/styles.styl文件

.headband {
  display:none;
  }

.archive .collection-title {
  display: none !important;
}

在_config.next.yml中选用该主题。

scheme: Pisces

设置头像

avatar:
  # Replace the default image and set the url here.
  # 取消注释
  url: /images/logo.png
  # If true, the avatar will be displayed in circle.
  # 改为true
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

设置社交地址

social:
# 取消注释
  GitHub: https://github.com/chuest || fab fa-github

设置网站开始时间

footer:
  since: 2020

开启字数统计

npm install hexo-word-counter

symbols_count_time:
  separated_meta: false
  item_text_total: false

设置标签为图标

tag_icon: true

开启赞赏

reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: true
  animation: true

reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png

开启代码块复制功能

copy_button:
  enable: true
  # Available values: default | flat | mac
  style: flat

开启返回最上层

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

设置字体为宋体

font:
  enable: true # 改为true
global:
  external: true
  family: Noto Serif SC
  size:

开启 Mathjax

mathjax:
  enable: true

安装pandoc

sudo pacman -S pandoc-cli

卸载默认渲染器，安装pandoc渲染器。

npm un hexo-renderer-marked
npm i hexo-renderer-pandoc

开启 PJAX

pjax: true

使用 Waline 评论

npm install @waline/hexo-next

在_config.next.yml中添加下列内容。

# Waline Config File
# For more information:
# - https://waline.js.org
# - https://waline.js.org/reference/component.html
waline:
  # New! Whether enable this plugin
  enable: true

  # Waline server address url, you should set this to your own link
  serverURL: https://waline.vercel.app

  # Waline library CDN url, you can set this to your preferred CDN
  # libUrl: https://unpkg.com/@waline/client@v2/dist/waline.js

  # Waline CSS styles CDN url, you can set this to your preferred CDN
  cssUrl: https://unpkg.com/@waline/client@v2/dist/waline.css

  # Custom locales
  # locale:
  #   placeholder: Welcome to comment # Comment box placeholder

  # If false, comment count will only be displayed in post page, not in home page
  commentCount: true

  # Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`.
  pageview: false

  # Custom emoji
  # emoji:
  #   - https://unpkg.com/@waline/emojis@1.1.0/weibo
  #   - https://unpkg.com/@waline/emojis@1.1.0/alus
  #   - https://unpkg.com/@waline/emojis@1.1.0/bilibili
  #   - https://unpkg.com/@waline/emojis@1.1.0/qq
  #   - https://unpkg.com/@waline/emojis@1.1.0/tieba
  #   - https://unpkg.com/@waline/emojis@1.1.0/tw-emoji

  # Comment information, valid meta are nick, mail and link
  # meta:
  #   - nick
  #   - mail
  #   - link

  # Set required meta field, e.g.: [nick] | [nick, mail]
  # requiredMeta:
  #   - nick

  # Language, available values: en-US, zh-CN, zh-TW, pt-BR, ru-RU, jp-JP
  # lang: zh-CN

  # Word limit, no limit when setting to 0
  # wordLimit: 0

  # Whether enable login, can choose from 'enable', 'disable' and 'force'
  # login: enable

  # comment per page
  # pageSize: 10

开启搜索功能

npm install hexo-generator-searchdb

local_search:
  enable: true # 改为true