hexo+next主题优化

发表于 更新于 分类于 阅读次数： 本文字数： 6.1k 阅读时长 ≈ 6 分钟
简介：对hexo博客的next主题进行优化

为什么选择next主题

默认的主题是landscope，没有访问量和站内搜索的功能。

next主题可扩展性比较好，集成了许多功能，比较方便自己动手，所以选择了这个主题。

next主题优化

大部分参考https://blog.csdn.net/weidong_y/article/details/90904781

next阅读进度条

看到好多方法都是用的Progress module，再修改主题配置的pace，但是我的next是8.7.0版的，似乎不再支持这个方式了。
​

阅读next的主题配置文件，发现了reading_progress，做出以下修改后，出现顶部进度条。

1
2
3
4
5
6
7
8
9
10
# Reading progress bar
reading_progress:
  enable: true
  # Available values: left | right
  start_at: left
  # Available values: top | bottom
  position: top
  reversed: false
  color: "#37c6c0"
  height: 5px

右下角显示当前浏览百分比

1
2
3
打开 themes/next/_config.yml ，
搜索关键字 scrollpercent 
把 false 改为 true。

插入图片

方法一

参考：https://www.jianshu.com/p/f72aaad7b852

关键代码

打开/node_modules/hexo-asset-image/index.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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
        var link = data.permalink;
    if(version.length > 0 && Number(version[0]) == 3)
       var beginPos = getPosition(link, '/', 1) + 1;
    else
       var beginPos = getPosition(link, '/', 3) + 1;
    // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
    var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
        if ($(this).attr('src')){
            // For windows style path, we replace '\' to '/'.
            var src = $(this).attr('src').replace('\\', '/');
            if(!/http[s]*.*|\/\/.*/.test(src) &&
               !/^\s*\//.test(src)) {
              // For "about" page, the first part of "src" can't be removed.
              // In addition, to support multi-level local directory.
              var linkArray = link.split('/').filter(function(elem){
                return elem != '';
              });
              var srcArray = src.split('/').filter(function(elem){
                return elem != '' && elem != '.';
              });
              if(srcArray.length > 1)
                srcArray.shift();
              src = srcArray.join('/');
              $(this).attr('src', config.root + link + src);
              console.info&&console.info("update link as:-->"+config.root + link + src);
            }
        }else{
            console.info&&console.info("no src attr, skipped...");
            console.info&&console.info($(this));
        }
      });
      data[key] = $.html();
    }
  }
});

缺点：需要修改node_modules下文件，以后再部署时比较麻烦

方法二

hexo 如何上传本地图片

同时在本地对Typora做适配

参考：hexo博客如何插入图片

或者：

1
2
3
格式 - 图像 - 设置图片根目录
设置为当前文档同名目录
ok

Snipaste_2021-08-14_17-24-07

图片加阴影效果

给文章和图片加一个边框阴影效果，效果很好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
打开next\source\css\_common\components\post\post-body.styl

# 给文章加一个边框阴影效果
.post-body {
  padding: 25px;
  -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

# 给图片加一个边框阴影效果
.post-body {
  iframe, img, video, embed {
    -webkit-box-shadow: 0 0 50px rgba(202, 203, 203, .9);
    -moz-box-shadow: 0 0 50px rgba(202, 203, 204, .9);
  }
}

参考：Hexo博客NexT主题下添加文章边框阴影效果

永久链接

参考：优化文章永久链接为数字编号

由于我的博客文章较少，所以采用尽量使文章链接更短的方式，如下

1
2
3
4
permalink: p/:abbrlink/
abbrlink:
  alg: crc16 #support crc16(default) and crc32
  rep: hex   #support dec(default) and hex

字数统计

参考：Hexo之NexT主题中设置symbols_count_time统计单词

其中，我的主题配置设置如下

1
2
3
4
5
6
7
symbols_count_time:
  separated_meta: true     # 是否另起一行（true的话不和发表时间等同一行）
  item_text_post: true     # 首页文章统计数量前是否显示文字描述（本文字数、阅读时长）
  item_text_total: true     # 页面底部统计数量前是否显示文字描述（站点总字数、站点阅读时长）
  awl: 4                   # Average Word Length
  wpm: 275                 # Words Per Minute（每分钟阅读词数）
  suffix: mins.

next主题优化 - 参考：

官方文档 - next开始使用：https://theme-next.iissnan.com/getting-started.html
官方文档 - next主题配置：https://theme-next.iissnan.com/theme-settings.html

Hexo博客优化之Next主题美化

next主题优秀博客：https://qidaink.github.io/posts/e2e8c66d/
其他主题优秀博客：
https://enfangzhong.github.io/
https://shen-yu.gitee.io/

部署

手机服务器可以作为暂时的服务器，新建一个生活博客，部署到手机服务器。

github pages可以作为长期服务器，发布技术方面的博客。

手机服务器+内网穿透

这一种方式挺新鲜的，但是也有不可避免的缺点：

  • 手机需要一直开着，不适合做长期服务器，可以作为暂时服务器使用。
  • 内网穿透用的别人提供的免费版，不稳定，容易崩。

修改本地启动服务时的默认端口：

1
2
打开node_modules\hexo-server\index.js文件
找到port，将4000修改为其他端口

参考：hexo添加admin,修改默认端口

GitHub Pages

部署hexo博客到GitHub pages的教程一大堆，这里不再赘述。需要注意的有两点，一是要选择ssh密钥的方式提交，二是配置url。全部在根目录的_config.yml中配置

首先看git两种连接方式:ssh和http配置介绍。http的方式，如果只是使用一两次的话，确实比较方便，拿来就用。但是如果使用次数比较多，比如需要经常hexo d部署，就不好了，因为比较不稳定，总是卡死。关于卡死，网上给出的办法是把http连接的方式更换为ssh连接的方式。
​

在根目录的_config.yml中找到deploy配置，配置如下

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy: 
  type: git
  repo: 
    github: git@github.com:tsuish/tsuish.github.io.git,deploy

设置ssh连接的步骤如下，需要在命令行中操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 检查是否有.ssh的文件夹
cd ~/.ssh

# 如果没有.ssh文件夹，先查看自己的邮箱，再连续三个回车生成私钥。
git config user.email
ssh-keygen -t rsa -C "xxxx@qq.com"

# 进入生成私钥的文件夹， C:\Users\[yourname]\.ssh
# 右键git bash，复制cat后出现的内容
cat id_rsa.pub
ssh-rsa  xxx...xxx   xxx@qq.com


登录Github，点击头像下的settings，添加ssh。新建一个new ssh key，将id_rsa.pub文件里的内容粘贴上去

# 测试添加ssh是否成功。如果看到Hi后面是你的用户名，就说明成功了
ssh -T git@github.com
ssh -T git@gitee.com
The authenticity of host 'gitee.com (212.64.62.183)' can't be established.
ED25519 key fingerprint is xxxxx
This key is not known by any other names
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'gitee.com' (ED25519) to the list of known hosts.
Hi xxx! You've successfully authenticated, but GITEE.COM does not provide shell access.

如果部署后，打开博客发现样式不对，需要在hexo根目录的_config.yml中配置url，配置如下

1
2
3
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: 'https://tsuish.github.io/'

小提示：

每次部署后，github pages都会有一定延时，这是正常的，稍等一会就好了。这是gitee对此的解答：https://gitee.com/help/articles/4136#article-header0

busuanzi也会有延时，要等的时间比较久。busuanzi的计算结果，似乎与链接有关。

参考：
同时部署到多个pages：https://blog.csdn.net/qintian888/article/details/82195097
OpenSSL SSL报错：https://blog.csdn.net/weixin_43945983/article/details/110882074
GitHub如何配置SSH Key：https://blog.csdn.net/u013778905/article/details/83501204
码云(gitee)配置ssh密钥：https://www.jianshu.com/p/416ac815b2b1