最新发布页的实现

2022/05/19

zola 除了规范了站点项目的本地目录，同时还规范了页面模板的目录。所以，整个项目的结构非常整洁，写作者只需要关注 content 内容目录即可。

├── config.toml
├── content
├── sass
├── static
├── templates
└── themes

路径页

整个静态站除了 [/, /tags/{name}, /catagories/{name}] 几个基础访问路径外，其它路径均通过 content 目录中的内容页所在路径进行生成。

所以，增加一个自定义页，对于自定义路径，如 /latest 路径，首先要做的就是在内容页增加一个对应的 markdown 文件。同时，设置自定义的页面模板即可。

在 content 目录下，增加文件 content/latest/index.md :

+++
title = "最新发布"
template = "latest.html"
+++

在 themes/[name]/templates 目录下，增加模板文件 themes/[name]/templates/latest.html. 这样就可以开始自定义路径页的实现。

数据源

在实现 /latest 自定义路径页，关键是获取最新文章发布列表。如果 content 目录只有一级目录，不存在子目录的化，获取最新文章列表的数据非常简单。但是，常规情况下，文章肯定是需要分文件夹进出归类，这样就出现一个问题：

官方只提供按 section 取接一级目录下的文章的列表

为了得到所有文章的列表数据，唯一可以获取的办法就是 atom.xml 文件。而该文件是在发布阶段生成的。所以，就需要写一个简单前端脚本来读取 atom.xml 文件中的文章列表，再渲染成列表页。

渲染脚本

进入 themes/[name] 主题目录，开始编写渲染脚本。

首先，初始化项目，因为需要用到 @hendt/xml2json 依赖库，创建一个简单的前端项目，并通过 webpack 打包发布。

$: yarn init -y

创建 themes/[name]/src/latest.js 脚本，并通过 webpack 打包到 themes/[name]/static/js 目录，在页面模板中调用该发布脚本即可。

如果不会使用 webpack 打包，请参考：快速简明教程: webpack

最简单的 webpack 配置：

const path = require('path');

module.exports = {
    entry: {
        latest: path.resolve(__dirname, "./src/latest.js"),
    },
    output: {
        path: path.resolve(__dirname, "./static/js"),
        filename: "[name].js",
    }
}

本站渲染脚本 themes/[name]/src/latest.js 如下:

import xml2json from '@hendt/xml2json';

const root = document.getElementById("root");
if (root) {
    fetch('/atom.xml')
        .then(response => response.text())
        .then(str => xml2json(str))
        .then(data => {
            for (let item of data.feed.entry) {
                const dt = new Date(item.published);
                const ds = dt.toISOString().substring(0, 10);
                const el = document.createElement('div');
                const itemHTML = `<h4>
                <a href="${item.link.href}">${item.title}</a>
                <time style="float: right;" datetime="${ds}" class="date" itemprop="datePublished">
                ${ds}
                </time>
                </h4>
                <p>${item.summary}</p>
                <p>... <a style="float: right;" href="${item.link.href}">阅读全文</a></p>`;                
                el.innerHTML = itemHTML;
                root.appendChild(el);
            }
        });    
}

具体效果，请访问: 最新发布.

通用脚本

渲染脚本很简单，也满足本站的页面需求。虽然是个性化需求，但如果想分享成果仅仅将以上开发思路记录成文，还差一点。对于其他用户而言，如果想使用这块代码。如果不想重头开始的化，可以

None None

最新发布页的实现

路径页

数据源

渲染脚本

通用脚本

评论