NexT主题配置记录

发表于 更新于 分类于 阅读次数： 本文字数： 8k 阅读时长 ≈ 7 分钟

原来折腾了很久的Yilia主题，然而搞了半天终于还是来到了NexT的怀抱，NexT提供的功能相比于Yilia确实多了不少，这篇就作为一个记录，稍微记载下NexT中的一些配置吧。

2022.9.10 更新 以后打算就在这里记录一下对博客的更新情况

  • 2024.9.18 更新作品集页面(AI真好用)
  • 2024.2.15 修改默认字体
  • 2023.12.24 添加twentytwenty图片对比插件，但是仍有很多问题有待解决
  • 2022.12.5 添加hexo-auto-category，自动根据文件夹目录设置categories
  • 2022.9.11 中英文切换功能，中英文板块分离;
  • 2022.9.10 增加Portfolio页面; 添加DarkMode以及切换功能;
  • 2021.7.18 切换主题为Next主题并进行配置;

修改默认字体

Next的配置项中可以直接对字体进行更改，相关配置如下 

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
# ---------------------------------------------------------------
# Font Settings
# ---------------------------------------------------------------
# Find fonts on Google Fonts (https://fonts.google.com)
# All fonts set here will have the following styles:
#   light | light italic | normal | normal italic | bold | bold italic
# Be aware that setting too much fonts will cause site running slowly
# ---------------------------------------------------------------
# Web Safe fonts are recommended for `global` (and `title`):
# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS
# ---------------------------------------------------------------

font:
  enable: enable

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host:

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Inter
    size:

  # Font settings for site title (.site-title).
  title:
    external: true
    family: Noto Serif SC
    size:

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family: Noto Serif SC
    size:

  # Font settings for posts (.post-body).
  posts:
    external: true
    family: Noto Serif SC

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: Fira Code

现在直接统一调成了中文字体，但实际上还是有点想要中英文字体进行一下区分，参考Hexo NexT 主题的字体更换，但是最后没有成功不知道为什么。

Hexo图片对比插件

作为一个图形学选手，渲染的结果经常需要进行对比。jQuery的twentytwenty插件能够方便的提供双图以至四图的对比，所以我就试图寻找一个插件实现这个功能。hexo-tag-twentytwenty刚好可以。但是这个插件还有一些问题，按照github上的描述从cdn中加载twentytwenty.js是可行的，但是似乎这个版本并不是很好，在cdn上也并没有找到一个更好的其他的版本。这个版本的问题在于，一无法居中对齐，二无法设置alt参数。我在本地有一个我期望的twentytwenty版本，但是尝试各种方法之后，发现都很难通过本地路径嵌入到静态网页当中去，感觉肯定是有办法的，但是确实不是很熟悉。以后如果有空再尝试尝试吧。此外，这个插件太老了，而且现在的next没有了jquery，所以在他的基础上进行一些更改。代码如下

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

hexo.extend.filter.register('theme_inject', function (injects) {
  injects.postBodyEnd.raw('jquery', '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>', {}, { cache: true });
  injects.postBodyEnd.raw('jquerymove', '<script src="https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/js/jquery.event.move.min.js"></script>', {}, { cache: true });
  injects.postBodyEnd.raw('twtwscript', '<script src="https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/js/jquery.twentytwenty.min.js"></script>', {}, { cache: true });
  injects.postBodyEnd.raw('twtwcss', '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/css/twentytwenty.min.css"/>', {}, { cache: true });
  injects.postBodyEnd.file('twtwscripts', 'js/twtw.swig', {}, { cache: true });
});

hexo.extend.tag.register('twtw', function(args, content){
  var beforeImg       = args[0];
  var afterImg        = args[1];
  var imgWidth        = "";
  var maxWidth        = "";
  var imgHeight       = "";

  if(args.length > 2){
    imgWidth = ' data-width="' + args[2] + '"';
    maxWidth = ' style="max-width:' + args[2] + 'px"';
  }
  if(args.length > 3){
    imgHeight = ' data-height="' + args[3] + '"';
  }

  var returnHTML  = '<div class="twentytwenty-container"' + maxWidth + '>\n'
            + '<img src="'+ beforeImg +'"' + imgWidth + imgHeight + '>\n'
            + '<img src="'+ afterImg +'"' + imgWidth + imgHeight + '>\n'
            + '</div>';
  return returnHTML;
}, {
  async: true,
  ends: false
});

并且在styles.styl中需要添加以下格式

1
2
3
4
5
6
7
.post-body .twentytwenty-container {
    margin: auto
}

.post-body .twentytwenty-container img {
    margin-bottom: 0px;
}

在根目录下添加js/twtw.swig，这个文件可以自行更改路径和名称没有什么规定。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
(function(){
  $(document).ready(
    function() {
      initialize_twentytwenty();
    }
  );
  function initialize_twentytwenty(){
    if($(".twentytwenty-container").twentytwenty){
      $(".twentytwenty-container").twentytwenty();
    }else{
      setTimeout(function(){
        initialize_twentytwenty();
      },250);
    }
  }
})();
</script>

其中第一行css就是尝试让图片居中，同时还需要为图片设置合适大小的width，才能正常居中，否则因为twentytwenty-container默认是full width，会占据整个页面，而图片在右侧，只能暂时通过这种方式解决，更加合理的解决办法还有待研究。 另外目前还有一个问题，似乎两边的图片有点色差，不知道是什么导致的问题……不过也只能先凑活着用着

Hexo博客中英文板块以及切换

由于一些原因准备给博客添加英文板块，主要想要实现的功能是中英文板块单独分离，用户在点击中英文切换的按钮后跳转到对应的页面。Next原本就支持双语切换，但是只有Menu等少部分元素的切换，并不是想要的效果。在网上找了很多相关的资料，最终决定还是使用最简单的办法：在github中创两个仓库，hexo_zh和hexo_en，分别作为中文博客和英文博客，并且在Menu上添加外链，点击可以进行跳转。

需要修改的地方主要有：

  1. en博客删除_post中不需要的中文博客

  2. 修改_config.yml的URL

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # URL
    ## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
    # 这里是中英文对应的url，由于是subdirectory，所以需要按照以下写法
    url: https://lucas-hao.github.io/hexo_en/
    root: /hexo_en/
    permalink: :year/:month/:day/:title/
    permalink_defaults:
    pretty_urls:
      trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
      trailing_html: true # Set to false to remove trailing '.html' from permalinks

  3. 修改_config.next.yml（即主题配置文件，参见Configuration | NexT (theme-next.js.org)）的Menu，添加切换的外链。这里还有一些Bug没有解决，目前仍然存在的问题是点击切换按钮后只有内容板块切换到了中英文对应的post页面，但是其他包括左侧的边栏以及评论板块都没有刷新，也就是说因为en和zh在同一个root下，所以hexo默认为站内的切换而并非外链，有待寻找解决办法。 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    menu:
         home: / || fa fa-home
         about: /about/ || fa fa-user
         tags: /tags/ || fa fa-tags
         categories: /categories/ || fa fa-th
         portfolio: /portfolio/ || fa fa-archive
         中文: https://lucas-hao.github.io/hexo_zh/ || fa fa-language
         #archives: /archives/ || fa fa-archive
         #schedule: /schedule/ || fa fa-calendar
         #sitemap: /sitemap.xml || fa fa-sitemap
         #commonweal: /404/ || fa fa-heartbeat

  4. 修改Deploy的git地址

参考资料 - Hexo 创建中英文博客 | YoungForest's blog - Hexo添加多语言支持「国际化i18n」 - SaltyLeo's Blog (tstrs.me) - Hexo Next 8 双语切换

Hexo站点内页面跳转的问题

在Hexo站点内部文章页面跳转在hexo中可以使用My portfolio: {% poge_link "Post Name"}这种方式简便的实现，但是由于我想要实现的是两个Page之间的跳转，而不是一个post跳转到另一个post，这种方式就无法实现了。最傻的办法就是直接使用markdown传统的网址链接的方式，但是感觉有点不是太方便，具体的页面跳转的方式有待查证(TODO)

参考资料

添加可以切换模式的DarkMode支持

目前Next主题已经支持DarkMode了，可以直接在_config.yml中进行配置，但是没有切换的功能，所以采用了hexo-dark-mode插件来实现深色模式。可以使用自定义styl的方式分别设置浅色深色模式的背景，让背景图片和主题更搭一些。 自定义styl需要在source/文件夹下创建_data/文件夹，然后再创建一个styles.styl文件，并在_config.next.yml中设置custom_file_path。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
    background-image: url(/images/body-light.jpg); // 可以是路径也可以是链接
    background-repeat: no-repeat; // 不重复
    background-attachment:fixed; // 固定住背景图片
    background-position:50% 50%; // 图片位置：居中
    background-size: 100% 100%; // 图片长宽扩充为100%
}

body.darkmode--activated {
    background-image: url('/images/body-dark.jpg')
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50%, 50%;
    background-size: 100%, 100%;
}

参考资料

使用mathjax对\(\LaTeX\)公式进行渲染

我们在markdown中或多或少都会用到Latex来书写数学符号，NexT就为\(\LaTeX\)提供了非常方便的渲染方式。我们只需要找到/next/__config.yml，然后找到如下配置并修改

1
2
3
4
mathjax:
    enable: true
    # Available values: none | ams | all
    tags: none

然而，由于hexo自带的hexo-renderer-marked会造成一些bug，所以我们使用pandoc会更加好一点

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save

然后，进行部署就会发现渲染成功啦

更新2022.9.12

今天写的时候发现一个问题，$$符号没有隐藏，然后发现是因为似乎pandoc自动渲染了\begin{align}中的公式，所以外层的$$就被忽略了，所以去掉就好了，但是这样子就会有一个问题，就是在typora中是无法预览的，不是很方便，也许有机会研究一下如何解决吧 (TODO)

参考资料

NexT主题的目录层级问题

发现如果跨级使用目录的话，就会造成bug导致目录下的层级错乱，这就是由于我比较喜欢二级标题跟着四级标题，如果标题逐级递减就不会有这个问题了，把四级标题都改成三级标题就好了

image-20210723224432413

更新 (2022.10.6) 最近又出现了目录乱七八糟的问题，这次是二级标题+三级标题但是还是有问题，尝试了一下严格的使用一级标题二级标题，发现就好了，以后还是一级标题起手吧orz。