这个项目的诞生是因为网络上找不到心仪的主页,总觉得跟预期稍有偏差 (⊙x⊙;)。刚好咱有那么一点点的前端能力,嗦以决定自己写一个…… o((>ω< ))o
项目使用 Vue3 + Vite 构建,克隆下来后可以现在本地跑一下试试看
安装依赖:npm install
运行项目:npm run dev
项目构建:npm run build
克隆下来之后得先安装一下依赖,然后根据自己的需求改配置文件。配置文件有两个都是在根目录下面,一个叫 .env
,一个叫 Configuration.js
。
这里面存放的是站点的基本信息 (●'◡'●)
# 站点标题
VITE_TITLE =
# 站点logo
VITE_FAVICON =
# 站点描述
VITE_DESCRIPTION =
# 站点关键字
VITE_KEYWORDS =
这里面存放就是展示的信息了 ( ̄y▽, ̄)╭ ,文件里面基本都有注释,看着改就行了,下面挑一些需要说的
在一些配置中看到存在 enable
的话代表这个模块是可以关闭的,比如侧边栏的座右铭。一般默认是 true
,改成 false
就可以把对应的模块关了
一般所填充的静态资源都是存在于 public
文件夹下面,设置静态资源相对路径的时候 /
代表 public
文件夹,/
后面的路径是相对于 public
文件夹的,比如要设置的是 public
文件夹下面的 img
文件夹,那么就是 /img
这个就谈谈 info
中的配置:
{
name: 'GitHub',
icon: 'icon-GitHub',
url: 'https://github.com/ximuliunian'
}
name:展示的名字
icon:iconfont图标库软件,#具体点我
url:这是点击按钮需要跳转的链接
参考社交链接……
这个是用的 skillicons 这个项目
GitHub:https://github.com/tandpfun/skill-icons
GitCode:https://gitcode.com/gh_mirrors/sk/skill-icons
这个项目收录了很多常用的技术栈图标,具体有什么图标可以通过jin上面的链接查看一番(建议使用GitCode国内快)。具体详情什么的这里不做赘述。使用的时候进入项目找到图标对应的关键字,如下图:
然后把关键字加入 list 配置中即可
在配置社交链接或者其他地方会看到 icon
的配置(avatar_status里面的不算),图标可以去 iconfont 中进行挑选,步骤如下:
-
进入 iconfont 选择需要的图标添加入库,选择完之后添加到项目中(没有就创建一个)
-
添加到项目中后修改一下图标名字什么的,然后点击项目名称下面的三个选项中的 Symbol 选项,之后下面会出现一个链接
-
进入到链接内复制里面全部的内容然后找到本项目的
public/js/icon.js
文件,把复制的内容替换掉文件中的内容。不要替换错了public/system/
目录下也有一个相同的文件 -
最后在需要使用图标的地方的 icon 选项内使用自己的即可
{
name: 'bilibili',
url: 'https://space.bilibili.com/1304924540',
icon: 'icon-bilibili'
}
这个因为我有这个需求,在对应的站点展示或者不展示对应的ICP号。domain
里面填写顶级域(如:xxx.com
),后面的 info
填写对应的备案号
这个脚本已经写好了(路径:.github\workflows\main.yml
),什么都不用改。它的执行流程就是每当当前仓库有提交的时候会执行一次,然后就是会在每周一早上八点执行一次。
它执行完成后会提交一个svg文件(github-contribution.svg
)到 public/img/
目录下
注意:使用这个得修改一下Workflow权限,不然会执行失败
修改权限:依次点击仓库的 Settings -> Actions -> General 拉到最下面 找到 "Workflow permissions" 选择 Read and write permissions 点击保存