抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

一方の笔记本

The only source of knowledge is experience.

博客

随笔

朋友

归档

关于

随笔栏的实现过程

网站相关

发布于：2022年9月14日

这篇博客用于记录配置自定义分页的过程。

安装 hexo-generator-index2

按照作者的教程进行安装即可。

使用如下命令卸载博客自带的分页生成器并安装 hexo-generator-index2 。

1
2
npm install hexo-generator-index2 --save
npm uninstall hexo-generator-index --save

根配置文件

阅读说明后，我进行了如下配置，注意最好将原来的生成器相关配置注释掉。

首先是路径配置。

1
2
3
# Directory
# other paths as default
essay_dir: essays

然后是生成器相关的配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# index2 generator related configuration
index2_include_index: false # suggested false

# the custom index2 generator, can be array or object
index2_generator:
  - layout: 'index' # use existing index layout
    path: ''        # default path
    per_page: 10
    order_by: -date
    index: true # home page layout or not
    exclude:
      - category essays

  - layout: 'index' # use existing index layout
    path: 'essays' # your-website/essays
    index: false
    per_page: 10
    order_by: -date
    include:
      - category essays

修改 generator2.js

阅读代码后我发现该生成器生成的网站标题名默认为路径，这有些不太美观，因此我做了如下细节的修改。

1
2
3
4
5
6
7
8
// file: blog-root-path/node_modules/hexo-generator-index2/lib/generator2.js
    // ...
        opts.title = generator.path; // line: 92
        /* for essays */
        if(generator.path == 'essays') {
            opts.title = '随笔';    // my code
        }
    //../

细节上的完善

我主要修改了一部分 ejs 文件使得细节方面更加美观。

首先是主题文件夹中布局目录下 _widget 中的 category.ejs。

1
2
3
4
5
6
7
8
9
<!-- 主页侧边栏不显示essays分类 -->
<!-- file: blog-root-path/themes/volantis/layout/_widget/category.ejs -->
      <!-- ... -->
        <% site.categories.sort('path').each(function(category){ %> <!-- line: 7, not modified -->
          <% if(category.name != 'essays') { %> 
            <!-- ... -->
          <% } %>
        <% } %>
      <!-- ... -->

其次是 post.ejs。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 分页界面文章标签左下角不显示分类 -->
<!-- file: blog-root-path/themes/volantis/layout/_partial/post.ejs -->
      <!-- ... -->
        <% if (post.categories && post.categories.length > 0) { %> <!-- line: 108, not modified -->
          <% 
            let contains_essays = false;
            for(cat of post.categories.toArray()) {
                if(cat.name == 'essays') {
                    contains_essays = true;
                    break;
                }
            }
            if(!contains_essays) { %>
            <!-- ... -->
          <% } %>
        <% } %>
      <!-- ... -->

类似地，还可以修改以下两个 categories.ejs。

1
2
3
4
5
6
7
8
9
<!-- 所有分类界面不显示essays分类 -->
<!-- file: blog-root-path/themes/volantis/layout/category.ejs -->
      <!-- ... -->
        <% site.categories.sort('path').each(function(category){ %> <!-- line: 16, not modified -->
          <% if(category.name != 'essays') { %>
            <!-- ... -->
          <% } %>
        <% }) %>
      <!-- ... -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 所有随笔文章头部不显示essays分类 -->
<!-- file: blog-root-path/themes/volantis/layout/_meta/category.ejs -->
<% if (post.categories && post.categories.length){ %> <!-- line: 1, not modified -->
  <% 
  let contains_essays = false;
  for(cat of post.categories.toArray()) {
      if(cat.name == 'essays') {
          contains_essays = true;
          break;
      }
  }
  if(!contains_essays) { %>
    <!-- ... -->
  <% } %>
<% } %>

随笔博客的翻页范围应该与一般博客区分开了，将 article.ejs 进行修改是一种办法。

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
<!-- 除去随笔页面中的翻页功能，但该方法治标不治本，不应采用 -->
<!-- file: blog-root-path/themes/volantis/layout/_partial/article.ejs -->
<%  <!-- line: about 150, not modified -->
  <!-- ... -->
    <!-- for essays begin -->
    let contains_essays = false;
    if (post.categories && post.categories.length){
      for(cat of post.categories.toArray()) {
        if(cat.name == 'essays') {
            contains_essays = true;
            break;
        }
      }
    }
    <!-- for essays end -->
    if (['docs'].includes(post.layout) && (prev || next) && (!contains_essays)) { %>
      <div class="prev-next">
        <% if (prev.path) { %>
          <a class='prev' href='<%- url_for(prev.path) %>'>
            <p class='title'><i class="fa-solid fa-chevron-left" aria-hidden="true"></i><%- prev.title || '' %></p>
            <!--<p class='content'><%- prev.exp %></p>-->
          </a>
        <% } %>
        <% if (next.path) { %>
          <a class='next' href='<%- url_for(next.path) %>'>
            <p class='title'><%- next.title || '' %><i class="fa-solid fa-chevron-right" aria-hidden="true"></i></p>
            <!--<p class='content'><%- next.exp %></p>-->
          </a>
        <% } %>
      </div>
    <% } %>

  <% } %>

  <%
  <!-- for essays begin -->
  let contains_essays = false;
  if (post.categories && post.categories.length){
    for(cat of post.categories.toArray()) {
      if(cat.name == 'essays') {
          contains_essays = true;
          break;
      }
    }
  }
  <!-- for essays end -->
  if ((post.prev || post.next) && (!contains_essays)) { %>  <!-- not modified line -->
  <!-- ... -->

然而，上述方法并没有改变每篇博客逻辑上的前后页，而只是不显示翻页功能而已，这将导致一般博客在有随笔博客作为前页或后页时出现问题，因此合理的方式应该是修改 post.js，即从逻辑上修改这一般博客与随笔博客的前后页设置。修改完成后，可以将 article.ejs 中关于删除分页功能的逻辑删除即可。

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
// file: blog-root-path/node_modules/hexo/lib/plugins/generator/post.js
// 对于hexo新版的hexo，应修改blog-root-path/node_modules/hexo/dist/hexo/post.js
'use strict';

function postGenerator(locals) {
  const posts = locals.posts.sort('-date').toArray();
  const { length } = posts;

  return posts.map((post, i) => {
    const { path, layout } = post;

    if (!layout || layout === 'false') {
      return {
        path,
        data: post.content
      };
    }

    /*
    if (i) post.prev = posts[i - 1];
    if (i < length - 1) post.next = posts[i + 1]; 
    */
    // get prev & next
    function catContainEssays(post) {
      let result = false;
      if(post.categories && post.categories.length > 0) {
        post['categories'].toArray().forEach(cat => {
          if(cat.name == 'essays') result = true;
        });
      }
      return result;
    }
    let curPostContainsEssays = catContainEssays(post);
    let j = i - 1;
    while(j >= 0 && curPostContainsEssays ^ catContainEssays(posts[j])) j--;
    if(j >= 0) post.prev = posts[j];
    j = i + 1;
    while(j < length && curPostContainsEssays ^ catContainEssays(posts[j])) j++;
    if (j < length) post.next = posts[j];

    const layouts = ['post', 'page', 'index'];
    if (layout !== 'post') layouts.unshift(layout);
    post.__post = true;

    return {
      path,
      layout: layouts,
      data: post
    };
  });
}

module.exports = postGenerator;

如果不希望随笔出现在归档页面，可以进行如下修改。

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

// file: blog-root-path/themes/volantis/layout/archive.ejs
  // ...
    // about line 15, keyword: <div> label with class 'timenode'
						<% if (post.categories && post.categories.length > 0) {
							let contains_essays = false;
							for(cat of post.categories.toArray()) {
								if(cat.name == 'essays') {
									contains_essays = true;
									break;
								}
							}
							if(!contains_essays) { %>
								<div class='timenode'>
									<a class="meta" href="<%= url_for(post.link || post.path) %>">
										<time><%= date(post.date, 'MM-DD') %></time>
										<% if(post.title || post.seo_title){ %>
											<%- post.title || post.seo_title %>
										<% } else if (post.date) { %>
											<%= date(post.date, config.date_format) %>
										<% } %>
										<% if(theme.plugins.aplayer && theme.plugins.aplayer.enable && post.music && post.music.enable != false){ %>
											&nbsp;<i class="fa-solid fa-headphones-alt music" aria-hidden="true"></i>
										<% } %>
										<% if (post.icon) { %>
											&nbsp;<i class="<%- post.icon %>" aria-hidden="true"></i>
										<% } %>
										<% (post.icons && post.icons||[]).forEach(function(icon){ %>
											&nbsp;<i class="<%- icon %>" aria-hidden="true"></i>
										<% }) %>
									</a>
								</div>
							<% } %>
						<% } %>
  // ...

总结

目标至此完成实现。

笔者在此前几乎没有接触过 js 的相关项目，对于 Hexo 的细节了解也不够充分，但是最终仍然算是自行解决了问题，我认为得益于如下工具或因素：

  • VS Code 的在文件中搜索文本功能；
  • 耐心阅读官方文档；
  • 仔细思考后再行动，这一点也是片上系统综合实践课程老师所提醒我的，千次盲目的尝试比不过静心思考后的一次实践；
  • 此外，根据已有的基础知识部分阅读并修改大型项目的一部分代码也是计算机人应有的能力，同时也需要具有对专业名词的敏感性。

这次自定义博客不仅达到了预期目标，还锻炼了我的学习方法和思考问题的方式，我收获颇丰。

终于可以写随笔了！

评论