关于HEXO博客的配置

发表于 分类于 阅读次数：

本地编辑文档然后通过 Github 同步到服务器的方式。

博客配置

本地端

安装 Hexo。

1
npm install -g hexo-cli

建立一个文件夹存放博客。

1
hexo init blog

安装一些插件【这个主要看自己的需求，我这里安装了一个用于支持图片和本地预览以及Git同步的插件。

1
npm install --save hexo-deployer-git hexo-server hexo-asset-image

修改 Blog 根目录下的 _config.yml 用于支持图片。

1
post_asset_folder:true

Github 配置

项目的 Settings/Security/Actions/Secrets 处 New repository secret，名称为 DEPLOY_PRIVATE，用于传递环境变量。

Deploy 配置

dependabot 配置

1
2
3
4
5
6
7
8
9
# .github/dependabot.yml

version: 2
updates:
- package-ecosystem: npm
  directory: "/"
  schedule:
    interval: daily
  open-pull-requests-limit: 20

deploy 配置

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
# .github/workflows/deploy.yml

name: Hexo Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source
        uses: actions/checkout@v2
        with:
          ref: main

      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '16'

      - name: Setup Hexo
        env:
          DEPLOY_PRIVATE: ${{ secrets.DEPLOY_PRIVATE }}
        run: |
          mkdir -p ~/.ssh/
          echo "$DEPLOY_PRIVATE" > ~/.ssh/id_rsa
          chmod 700 ~/.ssh
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          git config --global user.email "i@southsea.st"
          git config --global user.name "Southseast"
          sudo apt install pandoc
          npm install hexo-cli -g
          npm install
      - name: Deploy
        run: |
          hexo clean
          hexo deploy

插件

配置文章加密

1
npm install --save hexo-blog-encrypt

站点地图

1
npm install --save hexo-generator-sitemap hexo-generator-baidu-sitemap

图片

1
npm install --save hexo-asset-image

主题配置

使用了 Next 主题，以下配置仅供参考，仅符合本人使用习惯和审美。

底部信息

**themes/next/_config.yml，50** 行，关闭 power 和 theme 的信息显示。

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

  # 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: user
    # If you want to animate the icon, set it to true.
    animated: false
    # Change the color of icon, using Hex Code.
    color: "#808080"

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

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

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

主题样式

**themes/next/_config.yml，106** 行，更改主题为 Gemini。

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

导航栏

**themes/Next/_config.yml，125** 行，启用 tags 界面。

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

头像

**themes/Next/_config.yml，170** 行，设置头像地址。

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.gif
  # If true, the avatar will be dispalyed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: false

联系方式

**themes/Next/_config.yml，186** 行，设置联系方式。

1
2
3
social:
  GitHub: https://github.com/southseast || fab fa-github
  E-Mail: mailto:i@southsea.st || fa fa-envelope

友链

**themes/Next/_config.yml，203** 行，设置友链样式。

1
2
3
4
5
6
# Blog rolls
links_settings:
  icon: link
  title: Links
  # Available values: block | inline
  layout: inline

文章详情

**themes/Next/_config.yml，265 **行，关闭了更新时间。

1
2
3
4
5
6
7
8
# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: false
    another_day: true
  categories: true

文章标签样式

**themes/Next/_config.yml，283 **行。

1
2
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

文章评论

**themes/Next/_config.yml，695** 行。

1
2
3
4
5
6
7
8
9
disqusjs:
  enable: true
  # API Endpoint of Disqus API (https://disqus.com/api/docs/).
  # Leave api empty if you are able to connect to Disqus API. Otherwise you need a reverse proxy for it.
  # For example:
  # api: https://disqus.skk.moe/disqus/
  api: https://disqus.skk.moe/disqus/
  apikey: # Register new application from https://disqus.com/api/applications/
  shortname: # See: https://disqus.com/admin/settings/general/

访客统计

这里用的不蒜子，**themes/Next/_config.yml，747**行。

1
2
3
4
5
6
7
8
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

路径是 **themes/Next/layout/_third-party/statistics/busuanzi-counter.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
{%- if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
  <script{{ pjax }} async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  {%- if theme.busuanzi_count.total_visitors %}
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
    <!--
      <span class="post-meta-item-icon">
        <i class="fa fa-{{ theme.busuanzi_count.total_visitors_icon }}"></i>
      </span> 
    -->
      有
      <span class="site-uv" title="{{ __('footer.total_visitors') }}">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
  {%- endif %}

  {%- if theme.busuanzi_count.total_visitors and theme.busuanzi_count.total_views %}
    <span class="post-meta-divider">只猫来偷了</span>
  {%- endif %}

  {%- if theme.busuanzi_count.total_views %}
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
    <!--
      <span class="post-meta-item-icon">
        <i class="fa fa-{{ theme.busuanzi_count.total_views_icon }}"></i>
      </span>
    -->
      <span class="site-pv" title="{{ __('footer.total_views') }}">
        <span id="busuanzi_value_site_pv"></span>
      </span>
      条鱼
    </span>
  {%- endif %}
</div>
{%- endif %}

宽度更改

路径 **themes/Next/source/css/_variables/Pisces.styl，14**行。

1
$content-desktop-largest      = 90%;

站点地图

百度站点地图有点麻烦，不知道为啥 CNAME 过不了，在 **themes/Next/layout/_partials/head/head.swig** 中加入如下代码去验证。

1
<meta name="baidu-site-verification" content="5ZQsOe30cm" />

背景

这里开始需要修改css样式，因此引入自己的样式文件，方便修正。

打开 **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: themes/Next/source/css/_data/styles

然后创建样式文件，路径 **themes/Next/source/css/_data/styles**。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
  background: url("/images/bg.jpeg");
  background-attachment: fixed;
  background-size: cover;
}

if (hexo-config('disqusjs.enable') and hexo-config('darkmode')) {
  @media (prefers-color-scheme:dark) {
    body {
      background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("/images/bg.jpeg");
      background-attachment: fixed;
      background-size: cover;
    }
  }
}

透明度样式

一个简单些，但是会直接改变文章内容的透明度，增加如下。

1
2
3
4
5
6
.post-block, .header-inner,
.use-motion .post-block, .use-motion .pagination, .use-motion, .comments, .column
{
  opacity: .95 !important;
}

老婆

我采用的是部署在自己 Github 上的方式。

1
git clone https://github.com/stevenjoezhang/live2d-widget.git themes/Next/source/live2d-widget

**themes/Next/layout/_partials/footer.swig，14** 行。

1
2
3
<div class="copyright">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="/live2d-widget/autoload.js"></script>

themes/Next/source/live2d-widget/autoload.js，启用自己的路径。

1
2
3
// 注意：live2d_path 参数应使用绝对路径
// const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
const live2d_path = "/live2d-widget/";

路径在public/live2d-widget/waifu-tips.js，160 行左右。

1
2
3
4
5
if (modelId === null) {
  // 首次访问加载 指定模型 的 指定材质
  modelId = 1; // 模型 ID
  modelTexturesId = 50; // 材质 ID
}

themes/Next/source/live2d-widget/waifu.css，24 行，注释 left，添加 right。

1
2
3
4
5
6
7
8
9
10
#waifu {
    bottom: -1000px;
    /* left: 0; */
    right: 100px;
    line-height: 0;
    position: fixed;
    transform: translateY(3px);
    transition: transform .3s ease-in-out, bottom 3s ease-in-out;
    z-index: 1;
}

搜索

1
npm install --save hexo-generator-searchdb

然后 759 行左右。

1
2
local_search:
  enable: true

在博客的 **_config.yml**中。

1
2
3
4
5
6
# 搜索
search:
  path: search.xml
  field: post
  content: true
  format: html

Refer

阿里云 VPS 搭建自己的的 Hexo 博客

Hexo 博客主题 NexT 使用自定义的 CSS 样式

hexo-helper-live2d