Len's Study-Log

集中一点，登峰造极！

0%

我的博客

发表于 分类于 Valine：
我的博客选择用hexo来搭建，与之搭配的是next主题

搭建方案

我的博客选择用hexo来搭建，与之搭配的是next主题。

搭建hexo博客用的是腾讯云服务器，利用 Jenkins + Gitee WebHook 做了一个自动构建。当我写完一篇文章后，向gitee里的hexo项目push，WebHook 就会通知jenkins来拉取这篇文章，并且执行一段shell脚本把这个文章复制到hexo服务器上。这样就做到了只需要一个push就自动部署发布博客了。

jenkins的安装和配置就不细说了，具体可以看看我的这篇博客：Jenkins+Gitee+Docker+maven自动化构建Springboot项目

本地编辑软件使用的是 typora，与之搭配的用到了picgo，再通过github图床+jsDelivr CDN图片加速，完美解决图片保存和快速浏览的问题。

1
2
3
4
5
6
7
8
# jsDelivr的使用

原始github图片地址的格式为: https://raw.githubusercontent.com/用户名/仓库名/分支名/目录/图片名.png，https://raw.githubusercontent.com/94len/images/master/picgo_img/typora-icon.png，


更改后的图片地址的格式: https://cdn.jsdelivr.net/gh/用户名/仓库名@分支名/目录/图片名.png，

https://cdn.jsdelivr.net/gh/94len/images@master/picgo_img/typora-icon.png

picgo配置：github图床

image-20210220005129002

出现的错误：

今天突然发现typora不能自动上传图片了，查了一下本地端口，发现36677这个端口没被占用，也就是picgo的服务都没打开。

打开picgo设置，打开【设置server】，看到server端口设置成了36682，这是picgo默认配置的？

那改成36677就可以了

image-20210307134839898

部署方式

hexo 服务器方式

让后hexo一直在linux后台运行：hexo s -p 8080
ctrl + z // 暂停hexo进程
bg // 让hexo进程在后台运行
exit //退出shell（一定要用exit退出，不能直接关闭窗口）

ps 查看当前系统的所有进程

强制杀死该端口进程 fuser -k -n tcp 8080

插件安装

可能会遇到的问题

npm install -g hexo-cli命令执行卡住，或者报错连接不上

可能是 npm 源速度太慢，可以尝试修改淘宝源解决，再重新执行安装命令。npm 源的概念就和 Python 中的 pip 源一样，默认源是https://registry.npmjs.org/。

1
2
3
4
5
6
# 查看 npm 源
npm config get registry
# 临时修改 npm 源安装 hexo (仅本条命令有效)
npm --registry=https://registry.npm.taobao.org install -g hexo-cli
# 或者永久修改 npm 源
npm config set registry https://registry.npm.taobao.org

如果是公司内网使用代理访问外网 (比如ping registry.npmjs.org ping registry.npm.taobao.org都不通)，可以尝试给 npm 配置代理解决，再重新执行安装命令。

1
2
3
4
5
6
7
8
9
10
# 设置代理
npm config set proxy http://serverip:port
npm confit set https-proxy http:/serverip:port
# 设置带用户名密码的代理
npm config set proxy http://username:password@serverip:port
npm confit set https-proxy http://username:password@serverip:port
# 取消代理
npm config delete proxy
npm config delete https-proxy

hexo init命令执行卡住，或者报错连接不上

如果是公司内网使用代理访问外网 (比如ping GitHub.com 不通)，可以尝试给 git 配置代理解决，再重新执行初始化命令。

1
2
3
4
5
6
7
8
9
10
11
12
13
# 设置代理
git config --global http.proxy http://serverip:port
git config --global https.proxy http:/serverip:port
# 设置带用户名密码的代理
# 注意：如果密码中带了特殊字符需要进行转义, 将特殊字符替换为下面对应的转义字符即可
#  !   #   $   &   '   (    )  *   +   ,   /   :   ;   =   ?   @   [   ]
# %21 %23 %24 %26 %27 %28 %29 %2A %2B %2C %2F %3A %3B %3D %3F %40 %5B %5D
npm config set proxy http://username:password@serverip:port
npm confit set https-proxy http://username:password@serverip:port
# 取消代理
git config --global --unset http.proxy
git config --global --unset https.proxy

评论插件

这里我使用的评论系统是 Valine。Valine 诞生于2017年8月7日，是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。

  1. 前往LeanCloud注册或登录，进入首页创建应用。

    image-20210310001119389

  2. 打开刚创建的应用，点击 设置 -> 应用Keys，就可以获取到下面需要使用的AppID和AppKey

    image-20210310002440478

  3. 修改Next的配置文件 _config.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: changyan | disqus | disqusjs | gitalk | livere | valine
  active: valine
  # Setting `true` means remembering the comment system selected by the visitor.
  storage: true
  # Lazyload all comment systems.
  lazyload: true
  # Modify texts or order for any navs, here are some examples.
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    #gitalk:
    #  order: -2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: true
  appid: 123456 # Your leancloud application appid
  appkey: 123456 # Your leancloud application appkey
  notify: true # Mail notifier
  verify: false # Verification code
  placeholder: 请输入您的评论 # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 15 # Pagination size
  language: zh-cn # 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
  1. 如果谋篇文章不需要评论。在文章头加入comments: false即可：
1
2
title: 我的博客
comments: false

相关热门文章插件

安装：

1
2
$ npm install hexo-related-popular-posts
$ hexo clean

永久链接

Hexo 默认文章链接生成规则是按照年、月、日、标题来生成的。一旦文章标题或者发布时间被修改，URL 就会发生变化，之前文章地址也会变成 404，而且 URL 层级很深，不利于分享和搜索引擎收录。

插件源码地址 hexo-abbrlink

  1. 安装：
1
npm install hexo-abbrlink --save

可能会出现依赖，依据提示安装即可。

  1. 修改根目录配置文件 _config.yml
1
2
3
4
5
6
# permalink: :year/:month/:day/:title/
permalink: p/:abbrlink.html  # p 是自定义的前缀
abbrlink:
    alg: crc32   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex

不同算法和进制生成不同的格式：

1
2
3
4
5
6
7
8
9
crc16 & hex
https://lenqq.cn/posts/66c8.html
crc16 & dec
https://lenqq.cn/posts/65535.html

crc32 & hex
https://lenqq.cn/posts/8ddf18fb.html
crc32 & dec
https://lenqq.cn/posts/1690090958.html
  1. 验证

先清理下本地的文件 hexo clean，然后重新生成 hexo g，启动博客 hexo s。该插件会在每篇文章的开头增加内容：abbrlink: df27ccfb

搜索插件

1
npm install hexo-generator-searchdb

Next主题自定义修改

hexo 备用主题配置

  1. 请确认你的Hexo版本在5.0或以上。
  2. 在根目录创建一个配置文件，该配置文件命名模式：_config.[name].yml。[name]对应的是themes目录下的主题文件夹的名称。例如我的主题文件夹命名为next-8.2.0，那么这个备用主题文件名就应该是_config.next-8.2.0.yml。
  3. hexo的配置文件中
  4. _config.next-8.2.0.yml中所有的配置项向右移动两个空格。

修改首页样式

效果图：

image-20210309184417083

修改文件themes\next\source\css_schemes\Mist\_posts-expand.styl：

image-20210309184955700

样式放到 &.index 里面会只作用于首页，如果放到外层的 .posts-expand 里，则作用于全局（这点是我猜的0.0）。

自定义文章永久链接

参考：

  1. 在主题文件夹的scripts目录中创建articleline.js文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
'use strict';
var hexo = hexo || {};
hexo.extend.filter.register('before_post_render',function(data)
{
    var log = this.log;
    if (data.layout == 'post') 
    {
        let articlelink
        if (!articlelink) 
        {
            var getdate = data.date;
            // 文章链接以文章创建时间来确定
            data.articlelink = getdate.format('YYYYMMDDhhmmss');
        }
    }
    return data
},15);
  1. 修改hexo的配置文件：
1
2
3
#permalink: :year/:month/:day/:title/
permalink: article/:articlelink.html
articlelink:

自定义转载文章标示

我找了一下，Next 好像没有转载别人文章的标示，然后，就自己手动改吧。

预期目标：

在我原创的文章下面，声明我自己的版权；在我转载的文章下面，标示一下出处。

这个功能的开关，当然是放到转载文章的Front-matter里面啦。

（也就是所有文章都会自动开启版权声明，我转载的文章开了copied，这个文章就会开启转载标示）

开搞~

#1

文章的Front-matter里新增转载开关copied

image-20210406220012703

#2

next版权声明的开关是在next\source\css\_common\components\post\post.styl中，开关代码如下所示：

1
@import 'post-copyright' if (hexo-config('creative_commons.post'));

next版权声明那块的代码是放在next\layout\_partials\post\post-copyright.swig中的，修改版权声明代码逻辑，开了copied的文章显示转载标示，没开的显示版权声明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{%- set ccIcon = '<i class="fa fa-fw fa-creative-commons"></i>' %}
{%- set ccText = theme.creative_commons.license | upper %} 

{%- if page.copied and page.copied != '' %}
<div class="copied">
<ul>
  <li>本文章转载自：{{- page.copied }}</li>
  <li>如有侵权请联系修正或删除</li>
</ul>
</div>
{%- else %}
<div>
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>{{ __('post.copyright.author') + __('symbol.colon') }} </strong>
    {{- page.author or author }}
  </li>
  <li class="post-copyright-link">
    <strong>{{ __('post.copyright.link') + __('symbol.colon') }}</strong>
    {{ next_url(page.permalink, page.permalink, {title: page.title}) }}
  </li>
</ul>
</div>
{%- endif %}

post-copyright 的样式是在next\source\css\_common\components\post\post-copyright.styl中的，我们也来写一个copied的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.copied {
  background-color: #FFFFFF;
  border-left: 3px solid #c5c5c5;
  list-style: none;
  margin: 20px 0 0;
  padding: 0 12px;
  color: #bbb;
  font-size: 1rem;
  line-height: 150%;
}
.copied ul {
  padding: 0;
}
.copied ul li {
  list-style-type:none;
}

#3

效果：

image-20210406220550524

自定义转载文章标示 V2

看了一下知乎的版权声明，好像应该是要把转载标示放到文章开头的….

再改一下

#1

修改next\layout\_partials\post\post-copyright.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
{%- set ccIcon = '<i class="fa fa-fw fa-creative-commons"></i>' %}
{%- set ccText = theme.creative_commons.license | upper %} 

{%- if page.copied and page.copied != '' %}
<div hidden class="copied">
<ul>
  <li>本文章转载自：{{- page.copied }}</li>
  <li>如有侵权请联系修正或删除</li>
</ul>
</div>
{%- else %}
<div>
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>{{ __('post.copyright.author') + __('symbol.colon') }} </strong>
    {{- page.author or author }}
  </li>
  <li class="post-copyright-link">
    <strong>{{ __('post.copyright.link') + __('symbol.colon') }}</strong>
    {{ next_url(page.permalink, page.permalink, {title: page.title}) }}
  </li>
</ul>
</div>
{%- endif %}

#2

找了一下，文章内容的渲染好像是放在next\layout\_macro\post.swig中的，在【 POST BODY 】块前面加入我的【COPIED】块，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{##############}
   {### COPIED ###}
   {##############}
{%- if page.copied and page.copied != '' %}
	<div class="copied">
	<ul>
	  <li>本文转自：{{- page.copied }}</li>
	</ul>
	</div>
{%- endif %}

   {#################}
   {### POST BODY ###}
   {#################}

#3

效果如下：

image-20210406224226078

修改链接样式

样式示例：www.example.com

修改位置：next\source\css_common\components\post\post.styl

1
2
3
4
5
6
7
.post-body a {
    color: #428BCA;
    font-weight: bold;
}
.post-body a:hover {
	color:#FF0000;
}

遇到的问题

标签 tags

  • 当把springboot这个词设置成标签后，会触发错误：

image-20210326154230698

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
Unhandled rejection Template render error: (D:\len\2project\person\lenblog\hexo\themes\next\layout\post.swig)
  Template render error: (D:\len\2project\person\lenblog\hexo\themes\next\layout\post.swig)
  Template render error: (D:\len\2project\person\lenblog\hexo\themes\next\layout\post.swig) [Line 19, Column 14]
  Template render error: (D:\len\2project\person\lenblog\hexo\themes\next\layout\post.swig)
  Template render error: (D:\len\2project\person\lenblog\hexo\themes\next\layout\_partials\head\head-unique.swig) [Line 10, Column 23]
  Template render error: (D:\len\2project\person\lenblog\hexo\themes\next\layout\post.swig) [Line 3, Column 3]
  Template render error: (D:\len\2project\person\lenblog\hexo\themes\next\layout\post.swig)
  Template render error: (D:\len\2project\person\lenblog\hexo\themes\next\layout\_partials\header\index.swig) [Line 6, Column 15]
  Template render error: (D:\len\2project\person\lenblog\hexo\themes\next\layout\post.swig)
  Template render error: (D:\len\2project\person\lenblog\hexo\themes\next\layout\_partials\header\sub-menu.swig) [Line 2, Column 29]
  Template render error: (D:\len\2project\person\lenblog\hexo\themes\next\layout\post.swig)
  Template render error: (D:\len\2project\person\lenblog\hexo\themes\next\layout\_partials\header\sub-menu.swig)
  Template render error: (D:\len\2project\person\lenblog\hexo\themes\next\layout\post.swig) [Line 5, Column 3]
  Template render error: (D:\len\2project\person\lenblog\hexo\themes\next\layout\post.swig) [Line 9, Column 12]
  Template render error: (D:\len\2project\person\lenblog\hexo\themes\next\layout\_macro\post.swig) [Line 214, Column 16]
  Template render error: (D:\len\2project\person\lenblog\hexo\themes\next\layout\_partials\post\post-related.swig)
  TypeError: this.localeData(...).postformat is not a function
    at Object._prettifyError (D:\len\2project\person\lenblog\hexo\node_modules\nunjucks\src\lib.js:36:11)
    at D:\len\2project\person\lenblog\hexo\node_modules\nunjucks\src\environment.js:563:19
    at Template.root [as rootRenderFunc] (eval at _compile (D:\len\2project\person\lenblog\hexo\node_modules\nunjucks\src\environment.js:633:18), <anonymous>:43:3)
    at Template.render (D:\len\2project\person\lenblog\hexo\node_modules\nunjucks\src\environment.js:552:10)
    at D:\len\2project\person\lenblog\hexo\themes\next\scripts\renderer.js:32:29
    at _View._compiled (D:\len\2project\person\lenblog\hexo\node_modules\hexo\lib\theme\view.js:136:50)
    at _View.render (D:\len\2project\person\lenblog\hexo\node_modules\hexo\lib\theme\view.js:39:17)
    at D:\len\2project\person\lenblog\hexo\node_modules\hexo\lib\hexo\index.js:64:21
    at tryCatcher (D:\len\2project\person\lenblog\hexo\node_modules\bluebird\js\release\util.js:16:23)
    at D:\len\2project\person\lenblog\hexo\node_modules\bluebird\js\release\method.js:15:34
    at RouteStream._read (D:\len\2project\person\lenblog\hexo\node_modules\hexo\lib\hexo\router.js:47:5)
    at RouteStream.Readable.read (_stream_readable.js:459:10)
    at resume_ (_stream_readable.js:948:12)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)
  • 当tags标签名称一样的时候，会报错：

image-20210404122214007

image-20210404122311461

image-20210404122345009

hexo使用markdown加粗语法不生效

如果在英文输入法输入的字符后面加**，加粗会不生效！

如：

**加粗示例（1）** 这样写会正常显示加粗效果：加粗示例（1）。

**加粗示例(1)** 这样写会显示异常：加粗示例(1)。

其他优化

安装了其他插件如果出现bug，并且调不过来，就重装hexo吧（下下策）：

1
2
3
4
5
# 卸载hexo
npm uninstall hexo-cli -g

# 再安装hexo
npm --registry=https://registry.npm.taobao.org install -g hexo-cli

文章发表/更新时间

我想我的文章发表时间和创建时间都是自己控制的。

修改hexo 的配置文件：

1
2
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'date'

修改next 的配置文件：

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