南溟丷

我想在那里最蓝的大海扬帆

0%

关于HEXO博客的配置

我是采用本地编辑文档然后通过Git同步到服务器的方式。

并且直接用阿里云的root用户秘钥登陆。

没有另外去配置用户【嫌烦。

博客配置

本地端

安装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

服务端

安装Git

1
yum -y install git

安装Nodejs

1
2
curl --silent --location https://rpm.nodesource.com/setup_10.x | sudo bash -
yum -y install nodejs

Git配置

服务器上建立一个裸库。

1
git init --bare blog.git

创建一个钩子用于同步本地端的博客。

1
vim /路径/blog.git/hooks/post-receive

输入如下,路径看个人。

1
2
#!/bin/sh
git --work-tree=/博客路径/blog --git-dir=/钩子路径/blog.git checkout -f

赋予其可执行命令

1
chmod +x post-receive

修改本地端的blog根目录下的_config.yml配置Git同步
拉到最后一行修改

1
2
3
deploy:
type: git
repo: root@SERVER:/路径/blog.git

折腾完后如果在执行hexo d的时候出现一大串什么黄黄的什么LF。。

删除目录下的.git,然后重新初始化。

1
git init

还有一个问题就是上传的时候。

如果更改了文件名的大小写。

hexo -d的时候会提示说nothing to commit, working tree clean

这个时候需要开启一下下面这个东西。

1
git config core.ignorecase false

插件

配置文章加密
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.yml50行,关闭powertheme的信息显示。

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.yml106行,更改主题为Gemini

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

导航栏

themes/Next/_config.yml125行,启用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.yml170行,设置头像地址。

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.yml186行,设置联系方式。

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

友链

themes/Next/_config.yml203行,设置友链样式。

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

文章详情

themes/Next/_config.yml265行,我关闭了更新时间。

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.yml283行。

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

文章评论

使用Valine

创建一个Leancloud应用并填入idkey

themes/Next/_config.yml647行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
valine:
enable: true
appid: # Your leancloud application appid
appkey: # Your leancloud application appkey
notify: false # Mail notifier
verify: false # Verification code
placeholder: 喵!被我抓到你偷鱼了! # Comment box placeholder
avatar: mm # Gravatar style
guest_info: nick,mail,link # Custom comment header
pageSize: 10 # Pagination size
language: # Language, available values: en, zh-cn
visitor: false # Article reading statistic
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: false # Whether to record the commenter IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
#post_meta_order: 0

Valine后台,存储位置中的数据里面创建Class,名称必须为命名为Comment

修正汉化,路径themes/Next/scripts/filters/comment/common.js

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
'use strict';

function capitalize(input) {
return input.toString().charAt(0).toUpperCase() + input.toString().substr(1);
}

module.exports = {
iconText(icon, key, defaultValue) {
if (!defaultValue) {
defaultValue = capitalize(key);
}
return `
<span class="post-meta-item-icon">
<i class="fa fa-${icon}"></i>
</span>
{%- set post_meta_comment = __('post.comments.${key}') %}
{%- if post_meta_comment == 'post.comments.${key}' %}
{%- set post_meta_comment = '${defaultValue}' %}
{%- endif %}
<!--
<span class="post-meta-item-text">{{ post_meta_comment + __('symbol.colon') }}</span>
-->
<span class="post-meta-item-text">评论数:</span>
`;
}
};

文章阅读量

关于阅读量呢,这边Leancloud有一个漏洞需要修改,出处于此,此处感谢原作者

注册什么的就不说了。

进入创建Class,名称一定要为Counter,权限选择无限制

把设置/应用Key中的App-IdApp-Key复制进主题配置文件,themes/Next/_config.yml726行。

1
2
3
4
leancloud_visitors:
enable: true
app_id: <<your app id>>
app_key: <<your app key>>

设置/安全中心,然后把自己的域名填进安全域名中。

然后是比较关键的一步,云引擎-部署-在线编辑,然后创建函数,再选择Hook类型beforeUpdate-Counter并输入如下代码。

1
2
3
4
5
6
7
8
var query = new AV.Query("Counter");
if (request.object.updatedKeys.indexOf('time') !== -1) {
return query.get(request.object.id).then(function (obj) {
if (obj.get("time") + 1 !== request.object.get("time")) {
throw new AV.Cloud.Error('Invalid update!');
}
})
}

路径themes/Next/languages/zh-CN.yml,阅读次数改为热度。

最后部署,更详细的配置就去源文章看吧XD

访客统计

这里用的不蒜子,themes/Next/_config.yml747行。

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: false
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
{%- 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.styl14行。

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.ymlcustom_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
body {
background: url("/images/bg.png");
background-attachment: fixed;
background-size: cover;
}

透明度样式

一个简单些,但是会直接改变文章内容的透明度。

路径如上,在自己的样式文件中themes/Next/source/css/_my/mycss.styl

增加如下。

1
2
3
nav, article, aside, .header-inner, .comments ,.archive, .page{
opacity: 0.8 !important;
}

另一个麻烦些,如下,仅供参考,尽符合我个人审美,一些细节没改。

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
.post-block, .header-inner, .sidebar-inner,
.use-motion .post-block, .use-motion .pagination, .use-motion .comments
{
background: rgba(255,255,255,0.7) !important;
}

.sidebar,
tbody tr:nth-of-type(odd),
pre
{
background: transparent !important;
}

.menu-item-active a, .menu .menu-item a:hover, .menu .menu-item span.exturl:hover,
.btn,
.highlight,
.hbe-input-container input
{
background: rgba(0,0,0,0.1) !important;
}

.highlight .gutter pre{
color: #222 !important;
}

.highlight .gutter {
background: rgba(0,0,0,0.2) !important;
}

图片位置

使用了hexo-assert-images插件,不知为何会把文章目录生成两次,略作修改。

路径在node_modules/hexo-asset-image/index.js,大约在48行左右。

1
2
3
4
5
6
var same = link.split('').reduce((acc, o) => !src.startsWith(acc += o) ? acc = '' : acc, '')
var res = link.slice(0, -same.length).concat(src)

$(this).attr('src', config.root + res);

console.info && console.info("update link as:-->" + config.root + res);

老婆

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

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

themes/Next/layout/_partials/footer.swig14行。

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.js160行左右。

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

themes/Next/source/live2d-widget/waifu.css24行,注释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