换个口味~部署一个清新简约的个人主页

2024-09-13 16:02:17 1点赞 1收藏 0评论

大家好,我是羊刀仙。

之前也分享过不少主页类的Docker项目,本篇带来的是另一款清新简约的主页应用。作者的Demo界面如下。

换个口味~部署一个清新简约的个人主页

作者的话

此项目最初只是一个简单的主页。然而,随着越来越多的小伙伴发现了这个项目,它受到了大量本不应有的关注。而且,此项目作为初学前端的作品,其代码相当杂乱且质量低下。此外,该项目还遭到众多不明资源站或下载站的倒卖,致使许多不明真相的购买者从源代码中找到本人的联系方式进行问题咨询或提出功能需求。但由于目前个人生活方面的原因,且本人未曾从此项目获取任何收益,所以已无力维护此项目。该仓库不会存档,会积极接受各位大佬的 PR,不过不会针对任何新功能或 Bug 做出更新,敬请谅解!

折腾过程确实有些乱,但是配置完之后,还真的挺好看,还是忍不住分享给各位。

部署流程

首先安装git工具。在威联通应用中心的设置中,添加软件源,输入git搜索并安装。

换个口味~部署一个清新简约的个人主页


ssh连接NAS,依次输入以下命令:

cd /share/Container # 默认的威联通docker路径 git clone https:// # 下载项目文件,详见下面图片 cd home # 下载后会在Container下得到一个home文件夹,cd进去 #vim docker-compose.yml # 可选项,进入文件修改端口号,修改镜像名 mv .env.example 1.env # 重命名为1.env,正常应该重命名为.env,但是为了方便后面修改,我们暂且这样 docker compose up -d # 部署运行项目,个人建议读完下文调整参数后再进行此操作

等待部署完毕即可。

换个口味~部署一个清新简约的个人主页

默认端口为12445,本地访问web输入 NAS_IP:12445 便能访问。

但是此时还是文章开头作者的个人主页配置,需要我们在NAS中手动修改。

参数调整

先安装一个威联通神器:Text Editor 文本编辑器。

web打开NAS界面,打开文件管理中心找到对应配置文件修改,修改后别忘了保存。全部改完保存后,重新启动docker即可。

⭕️ .env环境变量

红框中内容需要我们额外自行申请,这里就不过多介绍。站点信息等先全部改为自己的内容。

换个口味~部署一个清新简约的个人主页

⭕️ 自定义网站链接

对应区域如下图所示。

换个口味~部署一个清新简约的个人主页

参考上文,配置文件位置:/Container/home/src/assets/siteLinks.json。右键使用Text Editor打开。

换个口味~部署一个清新简约的个人主页

icon/name/link这三项都可以修改。如果不够想增加内容,一组组copy就行。

换个口味~部署一个清新简约的个人主页

关于更多icon图标,点击我自行添加,配置文件位置:/Container/home/src/components/Links.vue

换个口味~部署一个清新简约的个人主页

大概在40-60行左右,按照格式添加新的图标进去即可。图标网址见配置文件。

这段代码是使用了 @vicons/fa 这个图标库来引入一系列图标,并将它们定义为 siteIcon 对象。这些图标大多来自 FontAwesome(简称 fa),一个非常流行的图标集。

换个口味~部署一个清新简约的个人主页

⭕️ 社交链接

对应位置如下图。移动到对应图标,右侧会跳出来一个Tip,点击的话则会跳转。

换个口味~部署一个清新简约的个人主页

配置文件目录:/Container/home/src/assets/socialLinks.json

换个口味~部署一个清新简约的个人主页

依旧是文本编辑器打开。除了icon需要手动匹配图片外,都是自定义配置。

换个口味~部署一个清新简约的个人主页

这里的icon需要我们自己准备图标图片,并移动到对应目录下。icon存放目录:/Container/home/public/images/icon

换个口味~部署一个清新简约的个人主页换个口味~部署一个清新简约的个人主页

社交图标我没动,单纯把网站图标和logo给替换掉了。添加完毕后,按照上面格式正确填写路径即可。

另外背景图也可在/Container/home/public/images下进行替换。

⭕️ 页脚

.env中的改动其实不太够,只能删除备案号。想要删除底部的&符号,更美观一些,在如下位置。

换个口味~部署一个清新简约的个人主页

Made by 这里为尊重作者,我并没有修改。如果想要对外发布并植入链接,可在下图位置修改。

换个口味~部署一个清新简约的个人主页

最后

主页链接建议使用主域名,可以看到并没显示完整,但是页脚羊刀仙点击可以正常点击跳转。

换个口味~部署一个清新简约的个人主页

如果大家想要进行更多的设置更改,可以多看看各个配置文件。

展开 收起
0评论

当前文章无评论,是时候发表评论了
提示信息

取消
确认
评论举报

相关文章推荐

更多精彩文章
更多精彩文章
最新文章 热门文章
1
扫一下,分享更方便,购买更轻松