博客前端的二次开发
关于
原前后端已经有云函数这样的机制提高后端配置的自由性了，但是原版前端终究还是有些不足，想要更多的自定义内容，必须对前端进行二次开发了。
此前搭建博客时应该已经将 Shiro fork 进我们自己的仓库了，就以自己的 fork 为基础进行二次开发。
其实是很简单的事情，但是完全没有基础，弄了两天才正式搭建好环境。
环境搭建
需要以下的基础软件环境
- fnm
- Node.js
- pnpm
安装 fnm
以管理员模式打开终端，执行以下命令
choco install fnm
随后执行以下命令进行测试
fnm -h
到这里理论上就够用了，不过还可以配置环境变量
在下面的目录新建 profile.ps1文件
%USERPROFILE%\Documents\WindowsPowerShell\profile.ps1
%USERPROFILE%: 表示用户目录，直接在文件管理的地址栏输入 %USERPROFILE%，然后回车
WindowsPowerShell 为新建的目录, 如果安装 node 后命令仍然无法识别，将文件夹名称改为 PowerShell
将下面的代码写入到上面的配置文件里面
fnm env --use-on-cd | Out-String | Invoke-Expression
安装 Node.js
依据以下界面的指引安装 Node.js
依据不同的环境自行选择，例如我的环境是如下指令进行安装。不过这是由于我原来就安装过 Node.js，所以环境 path 不用另外配置。
winget install Schniz.fnm
fnm env --use-on-cd | Out-String | Invoke-Expression
fnm use --install-if-missing 22
node -v # should print `v22.10.0`
npm -v # should print `10.9.0`
安装 pnpm
在管理员模式打开终端，打如下指令进行安装
Invoke-WebRequest https://get.pnpm.io/install.ps1 -UseBasicParsing | Invoke-Expression
打开工程
由于原工程下就有 .vscode 文件夹，我们使用 vscode 打开原工程文件夹就可以。
在 vscode 终端打如下指令，--frozen-lockfile 是关键，我在这里卡了非常长的时间，有这个参数后就会依据项目中原有的版本指定进行依赖安装。
pnpm install --frozen-lockfile
随后要编写项目下的 .env 文件，编写成和部署时一样就好。
以下两种方法都可以打开服务器进行预览。
启动开发服务器
在 vscode 终端中输入以下指令
pnpm run dev
点击终端中输出的 http://localhost:3000 这样的链接即可打开浏览器预览
构建和启动生产环境
在 vscode 终端中输入以下指令
pnpm run build
构建完成后输入以下指令
pnpm run start
点击终端中输出的 http://localhost:3000 这样的链接即可打开浏览器预览
将 Docker compose 的源切为自己的项目
是群友的教程 为你修改后的 Shiro 构建 Docker 镜像 - Mikuの次行星
直接删除仓库根目录下的.github这个文件夹。
在仓库的.github/workflows目录下新建一个 yml 文件，名字随意，代码如下：
name: Docker Build
on:
push:
branches:
- 'main'
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: Login to Registry
uses: docker/login-action@v3
with:
registry: ghcr.io
username: ${{ github.actor }}
password: ${{ secrets.GITHUB_TOKEN }}
- name: Build and push
uses: docker/build-push-action@v4
with:
context: .
file: ./Dockerfile
platforms: linux/amd64
push: true
tags: ghcr.io/innei/shiro:latest
你只需要修改最下方Build and push步骤中的tag从ghcr.io/innei/shiro:latest修改为你自己认为合适的名称即可，注意其中不要有任何大写字符，为了好记尽量选择使用个人 Github 用户名小写代替innei作为镜像命名空间。
修改服务器中原拉取 docker 镜像的 docker-compose.yml 文件，将其中的 image 条目替换为自己的镜像，例如我将这个条目配置为
image: ghcr.io/stbanana/shiro:latest
因为 stbanana 是我的 github 用户名。