🌝
Table of Contents

一个用于展示个人项目的网页生成器

Posted at — Aug 27, 2021

去年考研复习时就想做个个人项目聚合网页,用来统一展示项目,包括项目名、项目简介、项目标签、仓库地址和在线预览地址等等。结果鸽了快大半年了,不过现在终于做好了,取名叫 x26,效果如下图所示,或直接在线浏览 👀

image image

个人觉得挺好看 😆 每个方块表示一个项目(第一张图),点击方块可以弹出项目详情(第二张图)方块的数量、大小、位置和里面显示的内容都是可以自定义的(具体使用方法见下)除了展示项目,还可以把 x26 当个人首页使用,甚至可以用来显示简历,若你愿意,hehe。

使用

只需要 6 步,就能拥有一个 x26 小站。

第 1 步 - 安装

在使用之前,确保你已经安装好 NodeGit 环境。首先克隆这个仓库,然后进入其根目录

1
2
git clone git@github.com:mivinci/x26.git
cd x26

x26 使用 pnpm 管理 node 模块,所以需要先安装 pnpm,以 npm 为例

1
npm i -g pnpm

然后安装 x26 依赖

1
pnpm i

第 2 步 - 预览

成功安装依赖后,运行下面命令,然后打开浏览器输入 localhost:3000 预览当前的网页效果

1
pnpm dev

第 3 步 - 配置

这一步是 x26 的核心步骤。x26 通过识别配置来决定渲染的内容和样式,支持本地和远程两种配置方式。

本地配置让 x26 在打包期就知道要渲染的数据,编辑根目录的 x26.json 配置文件,如

 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
{
  "mode": "local",
  "settings": {
    "title": "x26",
    "slogon": "A man and his 26 projects.",
    "mask": ["A", "B", "C", "D", "...", "Z"],
    "column": 5,
    "legend": {
      "green": "完成",
      "yellow": "进行",
      "red": "出错"
    }
  },
  "projects": {
    "X": {
      "name": "x26",
      "description": "x26 is a single web page, you can use it for aggregating projects or as your personal homepage.",
      "repository": "https://github.com/mivinci/x26",
      "homepage": "https://26.xjj.pub",
      "tags": ["svelte", "homepage"],
      "status": "green",
      "shape": "normal"
    },
    "O": {
    }
  }
}

如果完成了第 2 步,网页会实时自动与该配置文件同步,所以接下来试着更改 x26.json 中的字段值来观察哪个字段被渲染到网页的哪个部分,从而了解到 x26 的工作原理。注意下面几个字段值有特别限制

字段支持的值
statusgreen, yellow, red
shapenormal, horizon, vertical, large

尝试切换不同的值来观察不同的渲染效果。

x26 能从远程服务器获取配置内容,只需要将 x26.json 中的 mode 字段的值设为 "network",然后提供远程配置的地址即可,像下面这样

1
2
3
4
{
  "mode": "network",
  "url": "https://exmaple.com/x26.json"
}

若使用远程配置,x26会忽略 x26.json 中除 modeurl 以外的其他配置内容。

远程配置的地址可以是一个文件路径,也可以是个后端接口,只要满足下面两个条件即可

  1. 使用 HTTP/HTTPS 协议
  2. 响应内容格式与本地配置的一致

第 4 步 - 打包

编写好配置后,运行下面命令来打包 x26

1
pnpm build

打包好的静态文件会自动放到 dist 目录下,若果你愿意,可以运行下面命令来预览打包好的效果

1
pnpm preview

第 5 步 - 部署

我们尝试使用 GitHub Action 来部署 x26,这样当我们每次更新配置文件,通过 git push ,GitHub 就能自动为我们打包并部署。所以这需要你最好 fork 该仓库到你的账号下。(当然你也可以使用任意你喜欢的方式来部署,反正误无非就是把 dist 目录托管起来)

我写好了一个 workflow 配置,你只需要将该配置文件中第 29 行的 cname 字段值改为你自己的域名即可。如果你没有域名,那么就将这行删掉。

现在,GitHub Action 在收到我们一个 push 操作后,会自动执行第 4 步,并将打包好的内容放到 gh-pages 分支中,所以最后你需要做的就是在仓库的设置中,将 Pages 服务指向该分支。

好了,我们完事儿了。

若有啥提议或 Bug 报告,请发到这儿

评论插件加载中 OvO