输出倒逼思考

0%

使用Hexo + GitHub Pages搭建个人博客站点

发表于
分类于 Valine：
使用Hexo静态博客框架 + NexT主题生成静态HTML，并托管到GitHub Pages搭建个人博客站点。

1 环境安装

1.1 Node.js

Windows 平台直接到Node.js 官网下载安装包进行安装（本文中所使用版本为 v12.14.1，为避免出现版本兼容性问题，请直接安装该版本）；Linux 平台未实操，请自行查询相关方法，也很简单。

1.2 Git

Windows 平台直接到到Git 官网下载最新安装包进行安装（本文中所使用版本为 v2.20.1），安装完成后需配置 Git 相关环境变量，不再赘述；Linux 平台（以 Ubuntu 为例）直接通过终端命令进行安装：

1
sudo apt-get install git

1.3 Hexo

直接通过终端命令进行安装（本文中所使用版本为 v4.2，为避免出现版本兼容性问题，请直接安装该版本）：

1
npm install -g hexo@4.2.0

2 初始化

新建博客目录，进入该目录后通过终端命令进行初始化：

1
hexo init

3 主题安装

安装NexT 主题（本文中所使用版本为 v7.7.1，不同版本间往往差异较大，请直接使用该版本。此外，Wikitten 主题也很不错），两种方式：

  • 方法 1 - 直接下载主题 zip 压缩包，解压到 hexo/themes 目录下
  • 方法 2 - 进入 hexo/themes 目录，直接克隆 GitHub 上的 NexT 主题（速度可能稍慢）：
    1
    git clone https://github.com/theme-next/hexo-theme-next

    将解压或克隆后的主题目录修改为 next（其它名称也可，与 hexo/_config.yml 中的配置保持一致）

4 配置

4.1 站点配置

先配置站点配置文件 hexo/_config.yml 中的Site URL Writing Extensions相关项，后面涉及到主题配置时还需要配置其它内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Site
title: 朝花夕拾 # 站点标题
subtitle: 输出倒逼思考 # 站点子标题
description: Stay hungry, stay foolish. # 站点描述
keywords:
author: ShiPeng # 站点作者
language: zh-CN # 站点语言
timezone: ""

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://blog.shipengx.com # 配置为你的GitHub Pages仓库地址或绑定的个人域名地址

# Writing
post_asset_folder: true # 新建文章时会生成同名文件夹，可以用于存放文章图片等素材

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-next # 主题名称

4.2 主题配置

NexT 主题的可配置项非常丰富，配置文件为 hexo/themes/next/_config.yml，官方文档是非常好的参考资料。

4.2.1 使能主题更新提醒

1
2
# Console reminder if new version released.
reminder: true

4.2.2 配置网站图标

将自己的网站图标（大小为 16x16 和 32x32）放到 hexo/themes/next/source/images 目录下，并修改主题配置文件favicon项的small和medium：

1
2
3
4
5
6
7
favicon:
  small: /images/myfavicon-16x16.png
  medium: /images/myfavicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

我的图标文件来自这里。

4.2.3 配置网站页脚

  • 设置显示内容

    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
    footer:
      # Specify the date when the site was setup. If not defined, current year will be used.
      since: 2020

      # Icon between year and copyright info.
      icon:
        # Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/
        # `heart` is recommended with animation in red (#ff0000).
        name: heart
        # If you want to animate the icon, set it to true.
        animated: true
        # Change the color of icon, using Hex Code.
        color: "#ff0000"

      # If not defined, `author` from Hexo `_config.yml` will be used.
      copyright:

      powered:
        # Hexo link (Powered by Hexo).
        enable: true
        # Version info of Hexo after Hexo link (vX.X.X).
        version: false

      theme:
        # Theme & scheme info link (Theme - NexT.scheme).
        enable: true
        # Version info of NexT after scheme info (vX.X.X).
        version: false

      # Beian ICP and gongan information for Chinese users. See: http://www.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:

  • 设置 footer 居中（仅针对 Mist Scheme）
    找到 hexo/themes/next/source/css/_schemes/Mist/_layout.styl，搜索.footer-inner，将其里面text-align的值设置为center：

    1
    2
    3
    4
    5
    6
    7
    8
    .footer-inner {
      text-align: center;

      +mobile() {
        text-align: center;
        width: auto;
      }
    }

4.2.4 添加 CC License

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language:

4.2.5 选择主题风格

1
2
3
4
5
# Schemes
# scheme: Muse
scheme: Mist
# scheme: Pisces
# scheme: Gemini

4.2.6 为 menu 添加分类按钮

  • 新建 categories 对应的 page，在博客目录下执行终端命令：
    1
    hexo n page categories
  • 设置 categories 页面类型，编辑 hexo/source/categories/index.md 为以下内容：
    1
    2
    3
    4
    5
    6
    ---
    title: 分类
    date: 2020-01-30 15:03:34
    type: "categories"
    comments: false
    ---

    comments: false是为关闭本页面的评论系统（若配置了的话）

  • 修改主题配置文件的menu项，打开categories：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
      home: / || home
      #about: /about/ || user
      #tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat

    可以调换 menu 顺序，会直接反应到站点侧边栏的显示上

4.2.7 使能 menu icons 和 item badges

1
2
3
4
# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: true

4.2.8 侧边栏、头像、社交相关

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
sidebar:
  # Sidebar Position.
  position: left
  #position: right

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  #width: 300

  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  display: post

  # Sidebar padding in pixels.
  padding: 18
  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12
  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: true

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.jpg
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true

# Posts / Categories / Tags in sidebar.
site_state: true

# 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/RocShi || github
  E-Mail: mailto:RocShi@outlook.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype
  #RSS: /atom.xml || rss

social_icons:
  enable: true
  icons_only: true
  transition:

4.2.9 配置侧边栏目录

修改主题配置文件的toc项：

1
2
3
4
5
6
7
8
9
10
toc:
  enable: true
  # Automatically add list number to toc.
  number: false
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: true
  # Maximum heading depth of generated toc.
  max_depth: 6

4.2.10 打赏

将 hexo/themes/hexo-theme-next/source/images 下的 wechatpay.png 和 alipay.png 分别替换为自己的微信收钱码与支付宝收钱码，并修改主题配置文件的reward项：

1
2
3
4
reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png

4.2.11 相关文章推荐

  • 安装hexo-related-popular-posts插件
    1
    npm install hexo-related-popular-posts --save
  • 配置主题配置文件 hexo/themes/next/_config.yml 中的 related_posts
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    related_posts:
    enable: true
    title: 猜你喜欢 # Custom header, leave empty to use the default one
    display_in_home: false
    params:
      maxCount: 5
      #PPMixingRate: 0.0
      #isDate: false
      #isImage: false
      #isExcerpt: false

4.2.12 代码块

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: solarized dark
# Add copy button on codeblock
copy_button:
  enable: true
  # Show text copy result.
  show_result: true
  # Available values: default | flat | mac
  style:

4.2.13 返回顶部

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

4.2.14 阅读进度

1
2
3
4
5
6
reading_progress:
  enable: true
  # Available values: top | bottom
  position: top
  color: "#37c6c0"
  height: 3px

4.2.15 添加 GitHub 角标

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

4.2.16 字体优化

本小节参考自网站字体优化方案。

  • 配置主题配置文件 hexo/themes/next/_config.yml 中的 font 相关项，注意全局字体应设定为英文字体，避免设置为中文字体导致英文字体也被覆盖，中文字体稍后设置

    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
    font:
    enable: true

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

    # Font options:
    # `external: true` will load this font family from `host` above.
    # `family: Times New Roman`. Without any quotes.
    # `size: x.x`. Use `em` as unit. Default: 1 (16px)

    # Global font settings used for all elements inside <body>.
    global:
      external: true
      family: EB Garamond
      size:

    # Font settings for site title (.site-title).
    title:
      external: true
      family: Cinzel Decorative
      size:

    # Font settings for headlines (<h1> to <h6>).
    headings:
      external: true
      family: Noto Serif SC
      size:

    # Font settings for posts (.post-body).
    posts:
      external: true
      family: Noto Serif SC

    # Font settings for <code> and code blocks.
    codes:
      external: true
      family: Source Code Pro

  • 修改 hexo/themes/next/source/css/_variables/base.styl 中的中文字体

    1
    2
    3
    // Font families.
    - $font-family-chinese      = "PingFang SC", "Microsoft YaHei";
    + $font-family-chinese      = "Noto Serif SC";

  • 在 hexo/source/_data/head.swig 中添加中文字体Noto Serif SC的<link>代码段
    进入Google Fonts，搜索Noto Serif SC，按照下面动图中所示获取字体的<link>代码，其它字体操作相同

    在Google Fonts上查找喜欢的字体

    将<link>代码中的将googleapis.com修改为loli.net后添加到 hexo/source/_data/head.swig 中

    1
    + <link href="https://fonts.loli.net/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap" rel="stylesheet">

    若 hexo/source/_data/head.swig 文件不存在，需要开启 hexo/themes/next/_config.yml 中custom_file_path的相关选项，默认是注释掉的

    1
    2
    custom_file_path:
      head: source/_data/head.swig

  • 考虑到宋体的笔画要比黑体细，编辑 hexo/source/_data/styles.styl，自定义 CSS 将字体颜色加深

    1
    2
    3
    .post-body {
      color: #333;
    }

    若 hexo/source/_data/styles.styl 文件不存在，需要开启 hexo/themes/next/_config.yml 中custom_file_path的相关选项，默认也是注释掉的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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

4.2.17 使能顶部加载条

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

4.2.18 添加 sitemap

  • 安装hexo-generator-sitemap插件
    1
    npm install hexo-generator-sitemap --save
  • 在站点配置文件 hexo/_config.yml 中添加plugins配置项
    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    plugins: hexo-generator-sitemap
  • 配置主题配置文件 hexo/themes/next/_config.yml 中的 sitemap menu
    1
    2
    menu:
      sitemap: /sitemap.xml || sitemap

4.2.19 开启站内搜索

  • 安装hexo-generator-searchdb插件，在博客目录下执行终端命令：
    1
    npm install hexo-generator-searchdb --save
  • 在站点配置文件 hexo/_config.yml 中添加如下代码：
    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000
  • 配置主题配置文件 hexo/themes/next/_config.yml 中的local_search项
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Local Search
    # Dependencies: https://github.com/theme-next/hexo-generator-searchdb
    local_search:
      enable: true
      # If auto, trigger search by changing input.
      # If manual, trigger search by pressing enter key or search button.
      trigger: auto
      # Show top n results per article, show all results by setting to -1
      top_n_per_article: 1
      # Unescape html strings to the readable one.
      unescape: false
      # Preload the search data when the page loads.
      preload: false

4.2.20 SEO 优化

  • SEO 优化较为复杂，可参考这篇文章，HTML 元标记中的 content 直接添加至主题配置文件对应位置即可完成站点验证，无需添加至 head.swig；也可以参考这篇文章：

    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
    # ---------------------------------------------------------------
    # SEO Settings
    # ---------------------------------------------------------------

    # Disable Baidu transformation on mobile devices.
    disable_baidu_transformation: false

    # Set a canonical link tag for your Hexo site.
    # See: https://support.google.com/webmasters/answer/139066
    # Remember to set up your URL in Hexo `_config.yml` (e.g. url: http://yoursite.com)
    canonical: true

    # Change headers hierarchy on site-subtitle (will be main site description) and on all post / page titles for better SEO-optimization.
    seo: true

    # If true, site-subtitle will be added to index page.
    # Remember to set up your site-subtitle in Hexo `_config.yml` (e.g. subtitle: Subtitle)
    index_with_subtitle: true

    # Automatically add external URL with Base64 encrypt & decrypt.
    exturl: true

    # Google Webmaster tools verification.
    # See: https://www.google.com/webmasters
    google_site_verification: # 向Google提交网站时将HTML元标记content填到此处

    # Bing Webmaster tools verification.
    # See: https://www.bing.com/webmaster
    bing_site_verification: # 向百度提交网站时将HTML元标记content填到此处

    # Yandex Webmaster tools verification.
    # See: https://webmaster.yandex.ru
    yandex_site_verification:

    # Baidu Webmaster tools verification.
    # See: https://ziyuan.baidu.com/site
    baidu_site_verification: # 向必应提交网站时将HTML元标记content填到此处

    # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
    baidu_push: true # 开启自动向百度提交URL

  • 文章 URL 优化
    首先，安装hexo-abbrlink插件

    1
    npm install hexo-abbrlink --save

    然后，站点配置文件的permalink项，并添加abbrlink项

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

4.2.21 开启图片灯箱

  • 在主题配置文件中使能该功能
    1
    2
    3
    # FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
    # For more information: https://fancyapps.com/fancybox
    fancybox: true
  • 配置 CDN
    1
    2
    3
    4
    5
    6
    7
    # FancyBox
    # jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
    # fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
    # fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
    jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
    fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
    fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
  • 设置图片居中（仅针对 Mist Scheme）
    参考了这篇文章，找到 hexo/themes/next/source/css/_schemes/Mist/_posts-expend.styl，搜索.post-body img，将其里面margin-left的值设置为0 auto：
    1
    2
    3
    .post-body img {
      margin-left: 0 auto;
    }

4.2.22 修改文章内链接的样式

参考这篇文章，v7.7.1 版本的 NexT 主题中的添加位置为 hexo/themes/next/source/css/main.styl

4.2.23 添加 valine 评论系统

  • 参考这篇文章添加 valine 评论系统
  • 为 valine 开启 CDN
    1
    2
    3
    4
    # Valine
    # valine: //cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js
    # valine: //cdnjs.cloudflare.com/ajax/libs/valine/1.3.10/Valine.min.js
    valine: //cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js
  • 通过Valine 扩展应用增强 Valine 的邮件通知功能，实践中将邮件发送方指定为了个人 QQ 邮箱，将邮件接收方指定为了个人 outlook 邮箱，功能测试正常。如果评论收不到邮件通知，请检查 Leancloud 云引擎的的环境变量是否正确设置，尤其是 SMTP_PASS 参数（一般为邮件服务商的授权码）

4.2.24 配置 canvas_nest 背景效果

  • 在主题配置文件中使能该选项
    1
    2
    3
    4
    5
    6
    7
    canvas_nest:
      enable: true
      onmobile: true # Display on mobile or not
      color: "0,0,255" # RGB values, use `,` to separate
      opacity: 0.5 # The opacity of line: 0~1
      zIndex: -1 # z-index property of the background
      count: 99 # The number of lines
  • 配置 CDN
    1
    2
    3
    4
    5
    # Internal version: 1.0.0
    # canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js
    # canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest-nomobile.min.js
    canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js
    canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest-nomobile.min.js

4.2.25 配置标题锚点

  • 在博客目录下安装hexo-theme-next-anchor插件
    1
    npm install hexo-theme-next-anchor
  • 在主题配置文件中添加如下内容：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    anchor:
    enable: true
    color: "#0e83cd"
    position: right # If left, anchors will always be visible.
    margin: 7px
    text: "#"
    icon:
      # If true, the `text` option will be ignored.
      enable: false
      # By default, NexT has built-in FontAwesome support.
      # This option means `font-family: FontAwesome`, so DO Not change it.
      # Also you can choose ForkAwesome, but that's another story.
      font: FontAwesome
      content: \f0c1 # CSS content for FontAwesome & ForkAwesome.

4.2.26 为归档页面添加十二生肖图标

  • 首先，点击这里下载十二生肖字体。下载后将解压的三个字体文件全部放在 hexo/source/fonts/目录下（若无 fonts 文件夹需要自行创建）
  • 然后，编辑 hexo/themes/next/layout/_macro/post-collapse.swig 文件
    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
    - <{%- if theme.seo %}h2{% else %}h1{%- endif %} class="collection-header">{{ current_year }}</{%- if theme.seo %}h2{% else %}h1{%- endif %}>
    + <{%- 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 %}>
    最后，编辑 hexo/source/_data/styles.styl，添加自定义样式
    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
    .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'; font-size: 35px;}
    .icon-tiger:before { content: '\e809'; font-size: 35px;}
    .icon-pig:before { content: '\e810'; font-size: 35px;}
    .icon-horse:before { content: '\e813'; font-size: 35px;}
    .icon-rat:before { content: '\e816'; font-size: 35px;}
    .icon-goat:before { content: '\e818'; font-size: 35px;}
    .icon-snake:before { content: '\e820'; font-size: 35px;}
    .icon-ox:before { content: '\e822'; font-size: 35px;}
    .icon-dog:before { content: '\e825'; font-size: 35px;}
    .icon-rabbit:before { content: '\e826'; font-size: 35px;}
    .icon-monkey:before { content: '\e829'; font-size: 35px;}
    .icon-rooster:before { content: '\e82f'; font-size: 35px;}
    若 hexo/source/_data/styles.styl 文件不存在，需要开启 hexo/themes/next/_config.yml 中custom_file_path的相关选项，默认是注释掉的
    1
    2
    custom_file_path:
      style: source/_data/styles.styl
    添加后的效果请查看这里，还是很有意思的。

4.2.27 添加数学公式渲染支持

Hexo 默认使用hexo-render-marked渲染引擎将 markdown 文件渲染为静态 HTML 文件，但该引擎会把一些特殊的 markdown 符号转换为相应的 HTML 标签，因为类 LaTex 格式书写的数学公式下划线’_‘表示下标，有特殊的含义，如果被强制转换为<em>标签，那么 MathJax 引擎在渲染数学公式的时候就会出错。例如，$x_i$在开始被渲染的时候，处理为$xi$，这样 MathJax 引擎就认为该公式有语法错误，不会渲染。解决办法：

  • 将渲染引擎更换为hexo-renderer-kramed
    1
    2
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-kramed --save
  • 编辑 hexo/node_modules/kramed/lib/rules/inline.js，解决hexo-renderer-kramed引擎语义冲突造成的行内公式渲染问题
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var inline = {
    - escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
    + escape: /^\\([`*\[\]()#$+\-.!_>])/,
      autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
      url: noop,
      html: /^<!--[\s\S]*?-->|^<(\w+(?!:\/|[^\w\s@]*@)\b)*?(?:"[^"]*"|'[^']*'|[^'">])*?>([\s\S]*?)?<\/\1>|^<(\w+(?!:\/|[^\w\s@]*@)\b)(?:"[^"]*"|'[^']*'|[^'">])*?>/,
      link: /^!?\[(inside)\]\(href\)/,
      reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
      nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
      reffn: /^!?\[\^(inside)\]/,
      strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
    - em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
    + em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
      code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
      br: /^ {2,}\n(?!\s*$)/,
      del: noop,
      text: /^[\s\S]+?(?=[\\<!\[_*`$]| {2,}\n|$)/,
      math: /^\$\$\s*([\s\S]*?[^\$])\s*\$\$(?!\$)/,
    };

  • 配置主题配置文件中的 MathJax 配置项

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    # Math Formulas Render Support
    math:
      # 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

      # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
      katex:
        enable: false
        # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
        copy_tex: false

  • 配置主题配置文件中的 MathJax CDN 加速

    1
    2
    3
    4
    5
    6
    7
    # MathJax
    # mathjax: //cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS-MML_HTMLorMML
    # mathjax: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML
    # mhchem: //cdn.jsdelivr.net/npm/mathjax-mhchem@3
    # mhchem: //cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.3.0
    mathjax: //cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS-MML_HTMLorMML
    mhchem: //cdn.jsdelivr.net/npm/mathjax-mhchem@3
  • 为需要公式渲染的文章的 Front-matter 里打开 mathjax 开关，之所以要在文章头里设置开关，是因为考虑只有在用到公式的页面才加载 Mathjax，这样不需要渲染数学公式的页面的访问速度就不会受到影响了
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
      ---
      title: C++ Primer - 第2章 变量和基本类型
      categories:
      - 技术
      - 程序语言
      - C/C++
      - 《C++ Primer》
      tags:
      - C/C++
      - C++ Primer
      description: 本系列文章为阅读《C++ Primer》过程中的书摘与学习笔记，持续更新。
      abbrlink: e005f4cb
    + mathjax: true
      ---

4.2.28 添加豆瓣读书

  • 在博客目录下安装hexo-douban插件，这里是插件的 git 仓库
    1
    npm install hexo-douban --save
  • 在站点配置文件 hexo/_config.yml 中增加如下配置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    douban:
      user: mythsman
      builtin: false
      book:
        title: "读书"
        quote: "那些你读过的书"
      # movie:
      # title: 'This is my movie title'
      # quote: 'This is my movie quote'
      # game:
      # title: 'This is my game title'
      # quote: 'This is my game quote'
      timeout: 10000
    user: 你的豆瓣 ID。打开豆瓣，登入账户，然后在右上角点击 “个人主页” ，这时候地址栏的 URL 大概是这样：”https://www.douban.com/people/xxxxxx/“ ，其中的”xxxxxx”就是你的个人 ID；
    builtin: 是否将生成页面的功能嵌入hexo s和hexo g中，默认是 false,另一可选项为 true(1.x.x 版本新增配置项)；
    title: 该页面的标题；
    quote: 写在页面开头的一段话,支持 html 语法；
    timeout: 爬取数据的超时时间，默认是 10000ms，如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。
  • 在主题配置文件 hexo/themes/next/_config.yml 中添加 books 的菜单按钮
    1
    2
    3
    4
    5
    6
    7
    menu:
      home: / || home
      categories: /categories/ || th
      tags: /tags/ || tags
      archives: /archives/ || archive
      books: /books/ || book
      about: /about/ || user
  • 中文化 books 菜单按钮，修改 hexo/themes/hexo-theme-next/languages/zh-CN.yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    menu:
      home: 首页
      archives: 归档
      categories: 分类
      tags: 标签
      about: 关于
      search: 搜索
      schedule: 日程表
      sitemap: 站点地图
      commonweal: 公益 404
      books: 读书
  • 在主题配置文件 hexo/themes/next/_config.yml 中开启 lazyload 选项
    1
    2
    3
    # Vanilla JavaScript plugin for lazyloading images.
    # For more information: https://github.com/ApoorvSaxena/lozad.js
    lazyload: true
    配置 lazyload 的 CDN 加速
    1
    2
    3
    4
    # Lazyload
    # lazyload: //cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js
    # lazyload: //cdnjs.cloudflare.com/ajax/libs/lozad.js/1.9.0/lozad.min.js
    lazyload: //cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js
  • 在主题配置文件 hexo/themes/next/_config.yml 中关闭 pjax 选项（若开启了的话）
    1
    2
    3
    # Easily enable fast Ajax navigation on your website.
    # Dependencies: https://github.com/theme-next/theme-next-pjax
    pjax: false
    关闭了 pjax 后，在博客站点页面间互相访问时每次都会刷新页面，会稍微降低访问速度，但影响不大。

若未开启 lazyload 且未关闭 pjax，则会出现如下情况：
无法持续正常显示豆瓣读书页面

此外，使用中发现，新版的 Node.js（v14.16.1）会导致豆瓣插件抓不到个人数据，所以请务必使用上文中指定版本的 Node.js。

4.2.29 在博客中隐藏指定文章

有时，我们可能面临这样一种应用场景：同时在写多篇文章，其中某篇文章尚未完成，而其它文章已完成，我们希望将已完成的文章呈现在我们的 hexo 博客中，而暂时隐藏尚未完成的文章。这个需求可以通过 hexo-hide-posts 插件完成，步骤如下：

  • 在博客目录下安装 hexo-hide-posts 插件，这里是插件的 git 仓库

    1
    npm install hexo-hide-posts --save

  • 在站点配置文件 hexo/_config.yml 中增加如下配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # hexo-hide-posts
    hide_posts:
      # 可以改成其他你喜欢的名字
      filter: hidden
      # 指定你想要传递隐藏文章的 generator，比如让所有隐藏文章在存档页面可见
      # 常见的 generators 有：index, tag, category, archive, sitemap, feed, etc.
      public_generators: []
      # 为隐藏的文章添加 noindex meta 标签，阻止搜索引擎收录
      noindex: true

    例如，如果设置 filter: hide 后，就可以通过在 front-matter 中添加 hide: true 字段来隐藏文章了；public_generators 字段指定的是隐藏的文章在博客的哪些页面可见，例如，如果设置了 public_generators: [archive] 后，隐藏的文章将只在存档页面可见，在首页等其它页面不可见。

  • 在文章的 front-matter 中添加 filter 相关控制字段

    1
    hide: true

值得注意的是，隐藏的文章仍可通过链接访问，前提是访问者知道文章对应链接。

5 新建文章

先将 post 模板 hexo/scaffolds/post.md 中的内容修改为：

1
2
3
4
5
6
7
8
---
title: {{ title }}
date: {{ date }}
categories:
tags:
keywords:
description:
---

再进入到博客目录下通过终端命令新建文章：

1
hexo n post postName

6 生成静态页面

  • 如果仅修改或增删了文章，请在博客目录下执行：
    1
    hexo g
  • 如果主题配置或样式等也做了修改，请在博客目录下执行：
    1
    2
    hexo clean
    hexo g

7 本地启动

1
hexo s

8 部署到 GitHub Pages

  • 申请 GitHub 账号并进行配置 SSH Key 等，不再赘述
  • 创建 GitHub Pages 项目
  • 部署
    首先修改站点配置文件的deploy项，将repository修改为个人的 GitHub Pages 仓库地址（仅第一次部署时需要）：
    1
    2
    3
    4
    deploy:
      type: "git"
      repository: git@github.com:RocShi/rocshi.github.io.git
      branch: master
    然后在博客目录下安装hexo-deployer-git插件（第一次部署时）：
    1
    npm install hexo-deployer-git --save
    最后在博客目录下进行部署：
    1
    hexo d

9 GitHub Pages 绑定到个人域名

  • 购买域名（以腾讯云为例）

  • 添加 CNAME 解析记录
    主机记录设置为blog（以二级域名为例，其它也可），记录值设置为 GitHub Pages 仓库名rocshi.github.io

  • 设置 GitHub Pages 项目
    Custom domain添加待绑定域名，我的是二级域名 blog.shipengx.com，开启Enforce HTTPS。可能会遇到以下问题：

    • 问题 1 - 绑定到二级域名浏览器提示不安全，绑定到一级域名安全
      起初绑定的为一级域名 shipengx.com，后改为了二级域名 blog.shipengx.com，出现此问题的原因为浏览器缓存了绑定一级域名时的 SSL 证书，关闭浏览器并清理浏览器缓存即可解决
    • 问题 2 - 绑定域名后 valine 评论系统不可用
      绑定域名后评论框下方提示：
      1
      Code 403: 访问被api域名白名单拒绝,请检查你的安全域名设置.
      原因为未将所绑定域名添加至 LeanCloud 的 Web 安全域名白名单，添加即可解决
  • 在 hexo/source 目录下创建无扩展名的 CNAME 文件，内容为待绑定域名，我的是二级域名 blog.shipengx.com

10 参考

  1. hexo 你的博客
  2. Hexo Docs
  3. Theme next docs
  4. Hexo 博客设置以及 Next 主题美化
  5. Hexo Next 主题进阶设置
  6. Hexo-NexT 主题个性优化
  7. Valine Docs
  8. Hexo 博客使用 valine 评论系统无效果及终极解决方案
  9. yearito 的系列文章
  10. flunggg 的系列文章
  11. 用 Hexo 做个人 Wiki 知识管理系统
  12. hexo 链接持久化终极解决之道
  13. Next 主题配置文件详解
  14. Hexo NexT 7 谷歌收录 必应收录 百度收录
  15. Sanarous 得个人博客
  16. 在 Hexo 中渲染 MathJax 数学公式
猜你喜欢
Thank you for your donate!