Ekkles' Diary

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

0%

Hexo配置

由于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-FlexblockHexo-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/