最近发现，本博客的文章，绝大多数都是跟长毛象有关的。本来以为写过我的个人主页是怎么配置的，后来发现原来当初是嫌太简单，没写（？）
也好办，读了本文以后，你也能像我一样，做出如此酷炫的个人主页。

今天看见这个主页作者的仓库已经封存3个月了，还写了如下留言，甚是感慨。

致大家
此项目最初只是一个简单的主页。然而，随着越来越多的小伙伴发现了这个项目，它受到了大量本不应有的关注。而且，此项目作为初学前端的作品，其代码相当杂乱且质量低下。此外，该项目还遭到众多不明资源站或下载站的倒卖，致使许多不明真相的购买者从源代码中找到本人的联系方式进行问题咨询或提出功能需求。由于目前个人原因，该仓库进行存档，敬请谅解！

就你国这风气，闭关锁国的，还把抄袭当成先知，呵呵。
我想起来小学里，有同学把我100分的卷子偷去，把名字改成自己的，获得老师表扬，还当上了班干部。我国的人民企业家大概也不过如此吧。马化腾的行径确实是这样，把汉化组给弄进去了。老马下手可比徐逸狠多了。

起因

我看笨蛋冰的主页非常炫酷，就向他求教怎么弄的，他就指路了这个GitHub项目。看语言，应该是Vue框架，又是一个我不懂的领域。
好在他的文档写得还不错，东西远比我的博客和在GitHub写的README要多。

部署

还是很简单

安装依赖

解释器方面仅需要安装node.js
装完node.js以后，安装pnpm包

1
npm install -g pnpm

它需要的包都在package.json里，在该项目的目录打开命令行，直接使用pnpm install统一安装

如果你跟赛博丁真何同学一样不会克隆代码，或者不会在当前目录打开命令行，请立即关闭网页

调试网页

开发过程肯定不能像某些学霸那样人脑跑代码，必定需要看看效果。在目录运行

1
pnpm dev

这个环境非常智能，运行无误会全自动打开端口，并当场打开浏览器。如果你没改过代码，那它就会显示作者的个人主页（当然，项目旧了，不保证每个链接都有效）。你更改代码后，每当你按下保存键，浏览器就会自动刷新网页，即时显示你的修改效果。不需要你手动重新编译、重启进程、刷新网页了。

代码写完后，你要发表。笔者是发布在Cloudflare Pages上的，所以GitHub上找不到我个人主页的开源代码。运行

1
pnpm build

它就会把你的网站编译成一套完整的静态网页，存储在代码目录下的dist目录中。只要把这个目录（拷贝、上传）设为网页服务器的网站根目录，即可在网络上浏览。

建站过程

很多内容都在作者文档里有提过，我不愿赘述，以防读者错过真正有用的部分。
第一步无非是把.env里的环境变量都改成自己的，src/assets目录里的东西也改成自己的。
既然把网址改成了自己的，它只支持作者网站的字体，目录public/font里面，作者也很贴心地留有文档。

坑1：我的三段域名和现在的超长域名

不是每个人的域名都这么简洁，这么靓的。而笨蛋冰的Bingxin后面有个多余的.
而我的三段域名却只能显示2段。现在我的超长域名xuzhou-jiang.su却只能显示省略号。
这个坑，作者的文档里面没有。经过我用F12查看网页源代码，发现在src/components/Message.vue可以改变文字样式和元素多少。
多一个</span>就多一个点

1
2
3
4
5
6
7
8
9
10
11
12
diff --git a/src/components/Message.vue b/src/components/Message.vue
index b130630..53c45da 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -7,6 +7,7 @@
       <div :class="{ name: true, 'text-hidden': true, long: siteUrl[0].length >= 6 }">
         <span class="bg">{{ siteUrl[0] }}</span>
         <span class="sm">.{{ siteUrl[1] }}</span>
+        <span class="sm">.{{ siteUrl[2] }}</span>
       </div>
     </div>
     <!-- 简介 -->

现在我只有两段域名了，把</span>给删掉，再把bg这个类改成sm就行了。

坑2：高德地图api

查看Bingxinの主页，你会发现很多人的天气都是一样问题，都显示“天气数据获取失败”。而我却可以显示用户当地天气。
这是因为我配置了高德api。没错，我申请了api。但这api是实名的，我认为非常不安全。
我按F12发现，这个api就是在前端运行的。那就很好办了。我只要用搜索引擎，把所有用本框架的主页都搜出来，找到能正确显示天气的，把那位老哥的高德api给复制过来。我也不知道他的是不是偷的，反正只要我不被盒了就行

坑3：长毛象署名

这也不算坑，纯粹为了凑个规整。
之前我也在本博客的搭建教程里面提过。这个比较简单，只要在项目根目录的index.html里面添加就行

坑4：添加BlueSky和开往图标

这也不用我废话，直接上网找图标，放进文件夹，在src/assets/socialLinks.json里面引用就行。什么？你说如何找到大小合适的图片？我都自己亲手缩放裁剪的。如果你等学校（或作者）给你发手工课材料或者文具（电脑）以后才肯动手的话，请立即关闭本页面，谢谢！如果你遇上了“我给你发素材/文具/电脑了吗？你就做了”的老板、老师、同学，请帮我揍她qqqxx

坑5：vite编译失败

这个vite的依赖包，编译需要建立软链接，编译很容易报错。错误的发生原因，就是你在NTFS格式的分区编译此项目，从而无法建立软链接。解决办法：在项目的根目录下，添加文件.npmrc，内容添加

1
node-linker=hoisted

以上就是imsyy的个人主页的踩坑心得。写给自己看，也希望读者也能拥有属于自己的酷主页。