我使用Excel文件管理友链💢

使用静态站点虽然部署简单，但是处理一些动态数据非常麻烦，而且时效性特别差。像常见的友链数据就是这样！

最开始我使用的 JSON 文件来管理我的友链，但是可视化效果不是特别好。然后我修改了下目前使用 Excel 管理友链数据，但是相比于有后端服务的博客站点还是比较麻烦的。

首先我需要拉取最新的代码，然后编辑 Excel 文件，最后再提交文件发布数据。还好 Github 或者其他托管服务大部分都支持在线打包，比如 Github 的 Action 等，只需要提交代码就可以自动发布。

相比于在本地打包，然后在发布到服务器上，简单一点。(我最开始就是这样本地打包，然后写个脚本发布到服务器上的 Nginx 目录下。)

使用 Excel 文件和使用 JSON 文件其实是一样的，都是加载读取文件内容，渲染到页面上。

在 Docusaurus 中首先需要自定义个友链的插件，然后在插件加载的过程中加载并读取 Excel 记录的邮件数据，最后在友链卡片组件上展示出来即可。

第一步：新建友链插件

import * as XLSX from 'xlsx';
import fs from 'fs/promises';
export default function friendsPlugin(context, options) {
    return {
        name: 'plugin-friends',
        async contentLoaded({ content, actions }) {
            const { createData, addRoute, setGlobalData } = actions;
            const friends = [];
            // 读取Excel中的友链数据
            const binaryData = await fs.readFile('data/Friends.xlsx');
            const workbook = XLSX.read(binaryData, { type: 'buffer' });
            const worksheet = workbook.Sheets['friends'];
            friends.push(...XLSX.utils.sheet_to_json(worksheet));
            // 整理数据
            const friendsJsonPath = await createData('friends.json', JSON.stringify(friends));
            setGlobalData({
                friends: friends
            });
            // 增加页面路由
            addRoute({
                path: '/friends',
                component: '@site/src/components/friends/index.jsx',
                modules: {
                    friends: friendsJsonPath
                },
                exact: true
            });
        }
    };
}

这是参考官网的插件开发文档。主要是读取 Excel 文件将读取的结果写入到全局上下文中以及对应的页面组件中。 比如放到全局上下文中，那么我就可以在任意地方调用，比如首页的底部。

可以看到我页面的路由是/friends，对应的组件路径@site/src/components/friends/index.jsx，组件的路径是随意的，你想放在哪里都可以。

第二步：新建友链展示组件

这个就随你发挥了，用React发挥你的想象力。不行就上https://codepen.io/ 找找好看的样式，我的组件大多数组件样式来自这里（想设计个好看的页面比编码难得多了！）

export default function Friends({ friends }) {
    return (
        <Layout title="友链" description="友人帐">
            <div className="container">// 发挥 ^_^</div>
            <BackToTopButton />
        </Layout>
    );
}

主要是这里我们就可以得到上面解析好的友链数据！

第三步：注册组件

需要在配置文件 docusaurus.config 中添加刚才我们新建的友链组件

const config = {
  plugins: [
    ['./src/plugin/plugin-friends', {}]
}

最终：访问展示

最终访问页面：友链

除此之外，不但可以管理友链，你可以管理任何你想整的数据，比如：Mac 软件站点列表

虽然使用 Excel 比 JSON 可视化好一些，但是依然需要拉代码修改等等一系列操作。我看其他静态站点的小伙伴有的使用其他厂家比如飞书的云文档，他们提供 API 查询，这样的话就非常方便了，直接在飞书云文档编辑，站点直接通过 API 动态查询。

还有其他的在线处理 Excel 文件的云服务，也有 API。

除此之外，自己还可以去CloudFlare部署个CRUD的 API，就是对友链的数据的增删改查，实现起来也很容易，但是想到自己小破站一年也不会添加几次所以我当前用 Excel 的方式还挺方便的 😄。

纸上得来终觉浅，绝知此事要躬行！