Ekkles' Diary

All human wisdom is summed up in two words: Wait and Hope

0%

Hexo配置

发表于 更新于 分类于 ，
本文字数： 8.6k 阅读时长 ≈ 8 分钟

由于WordPress的数据库出了问题，因此花了一段时间，从WordPress切换到了Hexo。本文记录了一部分Hexo配置的记录，仅供大家参考。

安装

下载必要应用程序

Git

下载地址: https://git-scm.com/

Node.js

下载地址: https://nodejs.org/en/

加速Git或取消加速

1
2
3
4
5
git config --global https.proxy http://127.0.0.1:XXXX
git config --global https.proxy https://127.0.0.1:XXXX
git config --global --unset http.proxy
git config --global --unset https.proxy
npm config delete proxy

Hexo安装与主题下载

Hexo安装

1
npm install -g hexo-cli

新建Hexo站点

Hexo是静态博客，需要设定一个文件夹，以后的所有资源文件均存放在该文件夹内。 在目标文件夹内右键Git Bash，然后输入命令 

1
hexo init
这时在该文件夹内生成必要文件。 部署Hexo： 
1
2
3
hexo g 
或
hexo generate
本地预览： 
1
hexo s

主题下载

曾经尝试过Hexo-Theme-Flexblock、Hexo-Theme-Fluid主题，也很好看，大家可以尝试。 在尝试了数个主题后，最后决定使用最常见的Hexo主题：Next。Next本身包含数个样式（💟 Muse | 🔯 Mist | ♓️ Pisces | ♊️ Gemini），且更新频繁，比较适合我这样的懒人，日后升级也比较方便。 注：本文提供的NexT主题为7.8.0版本，目前已停止更新，如需使用更新版本的NexT主题，请关注后续版本。

安装方式

直接克隆整个仓库： 

1
2
cd 你的Hexo文件夹
git clone https://github.com/theme-next/hexo-theme-next themes/next

更新

NexT 每个月都会发布新版本。你可以通过如下命令更新到最新的 master 分支： 

1
2
cd themes/next
git pull

站点配置

与正常的Hexo设置相同，在根目录下的_config.yml（后文一律称为站点配置文件）进行设置。这里的设置可以根据站点配置文件中的提示进行设置即可。推荐使用VS CODE进行编辑。

启用Next主题

将站点配置文件中的theme字段改成next即可。 

1
theme: next
至此，NexT主题安装完成。注意，切换主题前推荐使用hexo clean来清除缓存。

设置语言

同样，编辑站点配置文件中的language字段即可。 这里设置为简体中文。 

1
language: zh-CN
大家可以根据自己的喜好选择。

Language Code Example
English en language: en
简体中文 zh-CN or zh-Hans language: zh-CN or language: zh-Hans
Français fr-FR language: fr-FR
Português pt language: pt or language: pt-BR
繁體中文 zh-hk or zh-tw language: zh-hk
Русский язык ru language: ru
Deutsch de language: de
日本語 ja language: ja
Indonesian id language: id
Korean ko language: ko

主题配置

数据文件存放

Next可以采用传统的Hexo默认方式来进行配置，即存储部分配置在 Hexo 站点配置文件（/_config.yml），而另一部分在主题配置文件（/themes/next/_config.yml）。但是这种方式会导致使用git pull更新主题时产生一定的困难。 因此，我选择使用NexT提供的数据文件方式进行配置。

使用这一方式，你现在可以将你的全部配置置于同一位置（/source/_data/next.yml），并且不需要修改 /themes/next/_config.yml。 但是可能无法让所有 Hexo 外部库都准确处理它们的附加选项（举个例子，hexo-server 模块只会从 Hexo 默认配置文件中读取选项）。

如果在新的 release 中出现了任何新的选项，那么你只需要从 /themes/next/_config.yml 中将他们复制到 /source/_data/next.yml 中并设置它们的值为你想要的选项。

这一方法依赖于 Hexo 的数据文件特性。因为数据文件是在 Hexo 3 中被引入，所以你需要更新至 Hexo 3.0 以后的版本来使用这一特性。

用法 请确认你的 Hexo 版本为 3.0 或更高。 在你站点的 /source/_data 目录创建一个 next.yml 文件（如果 _data 目录不存在，请创建之）。 以上步骤之后有 两种选择，请任选其一然后继续后面的步骤。

选择 1：override: false（默认）：

检查默认 NexT 配置中的 override 选项，必须设置为 false。 在 next.yml 文件中，也要设置为 false，或者不定义此选项。 从站点配置文件（/_config.yml）与主题配置文件（/themes/next/_config.yml）中复制你需要的选项到 /source/_data/next.yml 中。 选择 2：override: true：

在 next.yml 中设置 override 选项为 true。 从 /themes/next/_config.yml 配置文件中复制所有的 NexT 主题选项到 /source/_data/next.yml 中。 然后，在站点的 /_config.yml 中需要定义 theme: next 选项（如果需要的话，source_dir: source）。 使用标准参数来启动服务器，生成或部署（hexo clean && hexo g -d && hexo s）。

选择主题

如前文所述，Next包含4种不同的Scheme(💟 Muse | 🔯 Mist | ♓️ Pisces | ♊️ Gemini)，本Blog使用的是Gemini。 更改next.yml中的选项，将需要设定的Scheme前面的注释标志#去掉即可。 

1
2
3
4
5
6
7
# Schemes
- scheme: Muse
+ #scheme: Muse
#scheme: Mist
#scheme: Pisces
- #scheme: Gemini
+ scheme: Gemini
## 添加「标签」 or 「分类」页面

新建「标签」or 「分类」页面，并在菜单中显示「标签」or 「分类」链接。「标签」or 「分类」页面将展示站点的所有标签 or 分类，若你的所有文章都未包含标签或分类，此页面将是空的。

新建页面

在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 tags 或 categories ： 

1
2
3
cd your-hexo-site
hexo new page tags
或者 hexo new page categories
### 设置页面类型

编辑刚新建的页面，将页面的类型设置为tags或者categories，主题会自动设置相应的内容。 

1
2
3
4
5
---
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
---
1
2
3
4
5
---
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
---

摘要显示

auto_excerpt 功能已经从NexT中被移除，因此我们需要使用插件来实现这个功能。 这里使用的是hexo-auto-excerpt插件。参见：https://github.com/ashisherc/hexo-auto-excerpt

安装

1
npm install --save hexo-auto-excerpt

设置

在next.yml中添加如下内容： 

1
2
3
auto_excerpt: 
  enable: true
  length: 100

背景设置

NexT 主题本身是没有背景图片的，会显得比较简陋。一个好的背景图片可以让blog更加吸引读者，也让自己的心情会变好。

添加背景图片

把想设置的背景放入./themes/next/source/images中，命名为background.jpg。在根目录的source文件夹下新建文件夹_data与style文件source/_data/styles.styl，输入以下代码: 

1
2
3
4
5
6
body {
 	background:url(/images/background.jpg);
 	background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:100% 100%;
}
background:url为图片路径，也可以直接使用链接。 background-repeat：若果背景图片不能全屏，那么是否平铺显示，充满屏幕 background-attachment：背景是否随着网页上下滚动而滚动，fixed为固定 background-position：图片展示大小这里设置 100%，100% 的意义为：如果背景图片不能全屏，那么是否通过拉伸的方式将背景强制拉伸至全屏显示。 再在next.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
去除对应的注释#即可。

博客内容透明化

NexT 主题的博客文章均是不透明的，在设置背景图片后会影响读者的观看体验，在上文中新建的style.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
  //博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.8;
}
.main-inner { 
   // margin-top: 60px;
   // padding: 60px 60px 60px 60px;

 .post-block {
    background: rgba(255,255,255,0.7) none repeat scroll !important;
}
}
//侧边框的透明度设置
.sidebar-inner {
  background: rgba(255,255,255,0.7) none repeat scroll !important;
  }

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.8);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.8;
}

//评论区透明度
.comments {
    background: rgba(255,255,255,0.7) none repeat scroll !important;
}

圆角显示

在source/_data/variables.styl中输入以下代码，注意，$并不是多余的 

1
2
3
// 圆角设置
$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;
然后在 NexT 的配置文件next.yml中取消 variables.styl 的注释： 
1
2
custom_file_path:
  variable: source/_data/variables.styl

添加阴影效果

在source/_data/style.styl文件中添加如下代码 

1
2
3
4
5
6
7
8
    // 主页文章添加阴影效果
.post {
   margin-top: 60px;
   padding: 20px;
   margin-bottom: 60px;
   -webkit-box-shadow: 0 0 5px rgba(120, 128, 114, 1.5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

动态彩带背景

我们可以在next.yml 中修改： 

1
2
3
4
5
6
7
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: ture
  three_waves: false
  canvas_lines: ture
  canvas_sphere: false
接着替换原先的 CDN： 
1
2
3
4
5
6
7
8
9
# Internal version: 1.0.0
 # three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js
 # three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three-waves.min.js
 # canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_lines.min.js
 # canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_sphere.min.js
 three:
 three_waves:
 canvas_lines: //cdn.jsdelivr.net/gh/bynotes/texiao/source/js/caidai.js # 动态彩带
 canvas_sphere:

网页标题欺诈(不推荐)

打开主题配置文件 config.yml，添加以下内容： 

1
2
3
4
5
# a trick on website title
title_trick:
  enable: true
  leave: "(つェ⊂)我藏好了哦~"
  enter: "(*´∇｀*) 被你发现啦~"
打开 themes.swig 文件，如果没有，则新建： 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{# 搞怪网页标题 #}
{% if theme.title_trick.enable %}
  <script>
    var OriginTitile = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function() {
      if (document.hidden) {
        document.title = '{{ theme.title_trick.leave }}' + OriginTitile;
        clearTimeout(titleTime);
      } else {
        document.title = '{{ theme.title_trick.enter }}' + OriginTitile;
        titleTime = setTimeout(function() {
          document.title = OriginTitile;
        }, 2000);
      }
    });
  </script>
{% endif %}

robots.txt设置

1
2
cd blog
vi ./source/robots.txt

填写以下内容： 

1
2
User-agent: *
Sitemap: https://**/sitemap.xml

评论设置

Next内置了很多评论系统，本Blog采用了Disqus的评论方式，并使用Disqusjs来方便进行国内评论显示。

Disqus：https://disqus.com/

Disqusjs：https://blog.skk.moe/post/disqusjs/

Next中已经内置了disqusjs的设置，因此我们只需要进行相关设置就可以了。

首先你需要注册 Disqus，注册后，点击首页的 “GET STARTED”，并选择 “I want to install Disqus on my site” 选项。重要的设置是 “Shortname”（Website Name，这个很重要，会在 Hexo 设置时用到），其他的设置不重要。 计划选择 “Basic” 即可，无需付费。 在 Installation 选择界面，由于我们不需要手动设置，直接点击左侧进入到下一步骤。 后续的留言板相关设定与评论审核机制等，按照自己的喜好选择即可。在设置好一切后，网站就注册成功了。

之后打开disqus的应用设置disqus application，注册一个Application，注意，要设置好Domain，注意设置好子域名，比如如果你设置为www.XXX.com，则用于www.XXX.com。如果你设置为XXX.com，则所有子域名也会包含在内。 读写权限设置为"Only Read"即可（因为disqusjs仅使用查看功能) 设置好之后，保存好Public Key，不要对外使用或泄露Secret Key。 打开next.yml，并选择Disqusjs进行配置： 

1
2
3
4
5
6
7
8
9
10
11
# DisqusJS
# For more information: https://disqusjs.skk.moe
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: [apiKey] # Register new application from https://disqus.com/api/applications/
  shortname: [shortname] # See: https://disqus.com/admin/settings/general/
上文中的API使用的是skk提供的反代，如果你有自己的反代可以进行相应替换。详细内容可见https://github.com/SukkaW/DisqusJS。 如果你遇到了当前 Thread 尚未创建的错误，是很正常的（如下图所示）。 disqus thread error 只需要正常使用可以访问Disqus的网络访问一次，Disqus就会自动创建Thread，DisqusJS就可以正常工作了。

部署Hexo

常见的部署Hexo的方式包括GitHub Pages、Cloudflare Pages配置等方式。具体步骤网上已经很多了，大家可以自行参考。

参考资料

  1. https://github.com/theme-next/hexo-theme-next
  2. https://www.yousazoe.top/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA-Blog-Building/
  3. https://xfdj.github.io/2020/05/02/%E4%BC%98%E5%8C%96%E5%8D%9A%E5%AE%A2%EF%BC%88%E5%8D%81%E5%85%AD%EF%BC%89%EF%BC%9ANexT%E4%B8%BB%E9%A2%98%E4%B8%8D%E5%86%8D%E6%94%AF%E6%8C%81auto-excerpt%E4%B9%8B%E5%90%8E/
  4. next主题美化——背景图片、动画: https://www.snowmoon.top/2021/02/21/next%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96/
相关文章