完整部署hexo和next

发表于 | 分类于 | |

安装hexo

首先安装noejs，Ubuntu源中的nodejs时旧版本，所以需要在安装后更新nodejs;

1
2
3
sudo apt-get install nodejs
sudo apt install nodejs-legacy
sudo apt install npm

更换成淘宝的镜像，否则非常慢

1
sudo npm config set registry https://registry.npm.taobao.org

可以通过 sudo npm config list 查看是否生效

安装更新版本的工具N

1
sudo npm install n -g

更新版本

1
sudo n stable

可以看到有 installed：版号，说明更新成功

安装hexo

1
sudo npm install -g hexo

hexo使用theme出现“ {% extends ‘_layout.swig‘ %} {% import ‘_macro/post.swig‘ as post_template %}”问题
原因是hexo在5.0之后把swig给删除了需要自己手动安装

1
npm i hexo-renderer-swig

增加评论

leancloud增加应用，增加Comment和Counter字段

1
2
3
4
5
6
7
8
9
10
# 显示文章阅读次数、评论次数、valine评论系统
# 可以看到，这是基于leancloud,需要先注册leancloud帐号，创建应用，进入应用的设置/应用Keys里获取AppID和AppKey。
# https://leancloud.cn/
valine:
  enable: true
  appid: jORjTi9nzzltvtOLz5wo451A-gzGzoHsz
  appkey: MMNo2bLWoSpTyqgdMUYFF5GC
  placeholder: 来都来了，不撩一句嘛~，留言记得在上面留下【邮箱】，方便收到回复通知~
  language: zh-cn # Language, available values: en, zh-cn
  visitor: true # 文章阅读统计

在next主题添加微信公众号二维码
打开博客工作区路径：\themes\next\layout_macro\sidebar.swig这个文件在里面搜索theme.back2top.enable，在这个if语句之前添加下面的代码；然后保存，hexo g -d部署即可。

1
2
3
4
5
6
<div class="wechat_OA">
    <span>欢迎关注我的公众号</span>
    <br>
    <!-- 这里添加你的二维码图片 -->
    <img src ="https://cdn.jsdelivr.net/gh/happy2h/PicPool_cdn/qrcode_for_gh_13e96145e8ee_344.jpg">
</div>

修改主题页面布局为圆角

打开文件，路径：/themes/next/source/css/_variables/custom.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 修改主题页面布局为圆角
// Variables of Gemini scheme
// =================================================
@import "Pisces.styl";
// Settings for some of the most global styles.
// --------------------------------------------------
$body-bg-color = #eee
// Borders.
// --------------------------------------------------
$box-shadow-inner = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12)
$box-shadow = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12), 0 -1px .5px 0 rgba(0,0,0,.09)
$border-radius-inner = initial
$border-radius = initial
$border-radius-inner = 15px 15px 15px 15px;
$border-radius = 15px;

显示当前浏览进度

打开主题配置文件，搜索找到b2t和scrollpercent。修改为true。

添加站内搜索
参考地址：https://blog.csdn.net/weixin_45877759/article/details/107141789
首先安装插件，输入以下命令：

npm install hexo-generator-searchdb –save

之后先在站点配置里末尾增加以下代码：

1
2
3
4
5
search:
  path: search.json 
  field: post 
  format: html 
  limit: 10000

设置侧边栏设置圆形可旋转头像

找到生成的Hexo目录\themes\next\source\css_common\components\sidebar下的sidebar-author.styl，将里面的css样式内容全部替换为：

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
.site-author-image {
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  transition: 1.4s all;
}

.site-author-image:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -transform: rotate(360deg);
}

.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}

.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}