由于WordPress的数据库出了问题,因此花了一段时间,从WordPress切换到了Hexo。本文记录了一部分Hexo配置的记录,仅供大家参考。
安装
下载必要应用程序
Git
下载地址: https://git-scm.com/
Node.js
下载地址: https://nodejs.org/en/
加速Git或取消加速
1 | git config --global https.proxy http://127.0.0.1:XXXX |
Hexo安装与主题下载
Hexo安装
1 | npm install -g hexo-cli |
新建Hexo站点
Hexo是静态博客,需要设定一个文件夹,以后的所有资源文件均存放在该文件夹内。
在目标文件夹内右键Git Bash,然后输入命令 1
hexo init
1
2
3hexo g
或
hexo generate1
hexo s
主题下载
曾经尝试过Hexo-Theme-Flexblock、Hexo-Theme-Fluid主题,也很好看,大家可以尝试。 在尝试了数个主题后,最后决定使用最常见的Hexo主题:Next。Next本身包含数个样式(💟 Muse | 🔯 Mist | ♓️ Pisces | ♊️ Gemini),且更新频繁,比较适合我这样的懒人,日后升级也比较方便。 注:本文提供的NexT主题为7.8.0版本,目前已停止更新,如需使用更新版本的NexT主题,请关注后续版本。
安装方式
直接克隆整个仓库: 1
2cd 你的Hexo文件夹
git clone https://github.com/theme-next/hexo-theme-next themes/next
更新
NexT 每个月都会发布新版本。你可以通过如下命令更新到最新的 master
分支: 1
2cd themes/next
git pull
站点配置
与正常的Hexo设置相同,在根目录下的_config.yml(后文一律称为站点配置文件)进行设置。这里的设置可以根据站点配置文件中的提示进行设置即可。推荐使用VS CODE进行编辑。
启用Next主题
将站点配置文件中的theme
字段改成next
即可。
1
theme: 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 分类,若你的所有文章都未包含标签或分类,此页面将是空的。
新建页面
在终端窗口下,定位到 Hexo 站点目录下。使用 hexo new page
新建一个页面,命名为 tags 或 categories : 1
2
3cd 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
3auto_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
6body {
background:url(/images/background.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:100% 100%;
}1
2
3
4
5
6
7
8
9
10
11custom_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;1
2custom_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: false1
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: "(*´∇`*) 被你发现啦~"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 | cd blog |
填写以下内容: 1
2User-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/
部署Hexo
常见的部署Hexo的方式包括GitHub Pages、Cloudflare Pages配置等方式。具体步骤网上已经很多了,大家可以自行参考。
参考资料
- https://github.com/theme-next/hexo-theme-next
- https://www.yousazoe.top/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA-Blog-Building/
- 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/
- next主题美化——背景图片、动画: https://www.snowmoon.top/2021/02/21/next%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96/