网站升级之三

发表于

更细致地调整了部分间距。

现在，在 goalkeeper 那边提到的最后一个问题也解决了：新专栏——“页边空白”！现在已经能从页面左侧进入。

搞这么一个新栏目还是稍微费点功夫的。我的目标是通过自定义字段 group: narrow-margin，来区分普通文章和“页边空白”文章，并让主页只显示普通文章，而“页边空白”文章则集中显示在专栏页面里。

首先要创建如下的 js 脚本 /scripts/filter_posts.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
const pagination = require('hexo-pagination');

// --- Filter Hook: Runs first to prepare data collections ---
hexo.extend.filter.register('before_generate', function() {
  const allPosts = hexo.locals.get('posts');
  const mainPosts = allPosts.filter(post => !(post.group && post.group === 'narrow-margin'));
  const narrowMarginPosts = allPosts.filter(post => post.group && post.group === 'narrow-margin');
  
  hexo.locals.set('main_posts', mainPosts.sort('-date'));
  hexo.locals.set('narrow_margin_posts', narrowMarginPosts.sort('-date'));
});


// --- Generator #1: For the Homepage ---
hexo.extend.generator.register('my_index_generator', function(locals) {
  // 使用我们在 filter 中准备好的、已经过滤过的文章列表
  const posts = locals.main_posts;
  if (!posts || posts.length === 0) return;

  // 从根目录的 _config.yml 获取分页配置
  const config = hexo.config.my_index_generator || {};
  const perPage = config.per_page || 10;
  
  return pagination('', posts, {
    perPage: perPage,
    layout: ['index', 'archive'],
    format: 'page/%d/',
  });
});


// --- Generator #2: For the "Narrow Margin" Archive Page (This is the new part!) ---
hexo.extend.generator.register('narrow_margin_generator', function(locals) {
  // 1. 获取我们准备好的、专属的文章列表
  const posts = locals.narrow_margin_posts;
  if (!posts || posts.length === 0) return; // 如果没有文章，就不生成任何页面

  // 2. 从 _config.yml 读取这个生成器的配置
  const config = hexo.config.narrow_margin_generator || {};
  const perPage = config.per_page || 10; // 每页文章数，默认10
  const path = config.path || 'narrow-margin'; // 页面的基础路径

//   console.log(`[Narrow Margin Generator] Generating pages for '${path}' with ${posts.length} posts.`);

  // 3. 调用 hexo-pagination 来创建所有分页路由
  return pagination(path, posts, {
    perPage: perPage,
    layout: ['narrow-margin', 'archive'], // 告诉 Hexo 使用 narrow-margin.njk 模板
    format: 'page/%d/', // 分页的 URL 格式
    data: {
      // 你可以在这里传递一些额外的数据给模板
      // 例如：
      title: 'Narrow Margin Archive'
    }
  });
});

这样一来，我们以后就可以用 site.narrow_margin_posts 来访问“页边空白”文章列表，同时用 site.main_posts 来访问普通文章列表了。

然后在 /themes/next/layout/ 下新建 narrow-margin.njk，内容大致是复制 archive.njk，改一些关键的地方就可以。

顺便修复了 more 会跳转到文章中间的问题，现在点击 more 会跳转到文章顶部了，这是通过把 /themes/next/layout/_macro/post.njk 里的

1
2
3
4
5
6
7
{%- if theme.read_more_btn %}
  <div class="post-button">
    <a class="btn" href="{{ url_for(post.path) }}#more" rel="contents">
      {{ __('post.read_more') }} &raquo;
    </a>
  </div>
{%- endif %}

去掉 #more 实现的。要是有人在网址后面直接加 #more 跳转倒也能跳到中间位置。

这代码块怎么不自带 njk 的语法……当纯文本凑合看吧。

等着，很快就会开始更新数学了