这两天在看别人做的博客,发现有人喜欢给博客做个home,尤其是我看到了imsyy/home的模板,极简毛玻璃 + 动态背景 + 时间天气导航页,虽然看到最后一次更新是2024年11月,但是确实很好看

所以我点开了我的小豆包,虽然它属金鱼,偶尔抽风,回答牛头不搭马嘴(也许是我不会用提示词,不 ,不是我的问题肯定是豆包的问题),但是能识别图文对我来说非常方便.在经过几次点不开的连接豆包终于把对的链接发给我了,不是我不愿意直接去github找,而是我确实是刚接触这些,只能借助”小逗包”了.

一.下载模板

https://github.com/imsyy/home

打开这个链接 → <> code → Download ZIP

然后豆包开始作妖了说会得到一堆文件：

• index.html
• assets/ 文件夹
• css /js 之类

然后我看来半天没有一个对的上,截图给他这个不是成品没办法直接使用,我就把压缩包的图和宝塔的图截给它.

好吧,重新来,但是”小逗包”在找到失效链接这方面从来没有让人失望过,又是打不开的,也可能是我网络问题,但是提供的镜像也是用不了的.这时候有两个方法,一个是下载别人打包好的成品,一个是自己打包,我其实很想尝试自己动手,看看自己能不能做成成品,但是豆包建议我不要自己动手,可是他给的链接已经失效了,那看来天意让我自己动手哈哈.

我对编程这方面一知半解,在尝试的过程中我还担心很复杂,最后的结果是好的,操作一两次就会了.

这里其实还有个小插曲,我没有在GitHub上找到成品的时候,给豆包截个图,然后~~~~有点无语了

不知道是不是对于教会我打包,对豆包来说比较困难,它干脆自己生成个index.html让我复制粘贴了，但是我还是告诉他我还是倾向于自己动手的

二.用node.js打包

1.下载安装一个工具（Node.js）

链接是豆包给的我直接复制下来了：https://nodejs.org/dist/v20.10.0/node-v20.10.0-x64.msi

2.开始打包

1.找到你解压的 home-dev 文件夹，点进去

2.在这个文件夹的空白处，按住 Shift 键，同时按鼠标右键 在弹出的菜单里，选择「在此处打开 PowerShell 窗口」

3.安装依赖（第一次会比较慢，耐心等跑完）

npm install

4.打包成网站文件

npm run build

跑完之后，文件夹里会出现一个新的 dist 文件夹，里面就是要上传的成品文件！

三.上传到宝塔

1. 进入宝塔目录：/www/wwwroot/nav.cbrcyy.top
2. 把里面默认的 index.html 删掉
3. 把打包好的dist 文件夹里面的内容都上传上去

最后看成品

完美运行。

其实在这个过程中,我打包了很多次,因为第一次打包上传完后才发现,完全忘记修改内容,然后修修改改了好多次,反复打包了好多次,修改链接,修改文心api才做成现在的样子了,但我认为成品是非常不错的,哈哈!