OneNav
一个简单美观的个人网址导航主页 依托GitHubPages和Workflows无服务器部署
Install / Use
/learn @MadisonWirtanen/OneNavREADME
部署与配置
本库可直接通过Workflows自动生成html并部署到GitHubPages, 只需修改links.yml或其它文件后提交即可, 同时也可以将已生成的页面通过Vercel等平台发布.
GitHub部署与初步配置
-
fork本项目, 注意两个分支同时fork, 勿勾选仅fork主分支, 以下操作均在fork得到的仓库进行;
-
在
Settings -> Actions -> General -> Actions permissions选择Allow all actions and reusable workflows保存, 在Workflow permissions选择Read and write permissions保存, 确保Workflows的权限; -
在仓库主页按
。键或将网址中的com改为dev来进入编辑器界面, 不嫌麻烦也可以直接clone到本地进行配置; -
在编辑器中找到
links.yml, 根据注释选择性修改, 然后找到最左侧第三个图标Source Control输入Message并Commit; -
在主页选择Actions, 等待部署成功后在
Settings -> Pages处可找到对应链接, 若部署失败请阅读错误代码并核查之前的步骤; -
此外如果在fork时将仓库名字改为
${yourname}.github.io即可直接通过https://${yourname}.github.io访问.
Gitpod进行个性配置
-
使用GitHub账户注册登录Gitpod后点击
New Workspace并选中刚fork的仓库点击Continue等待Workspace启动; -
使用命令
bash gitpod.sh即可复现Workflows的工作同时在8000端口打开了一个http服务以供访问查看效果, 或者也可以使用插件进行实时预览, 根据需要进行个性化的修改与调整.
使用Vercel发布网页
-
Vercel默认对主分支进行部署, 而要部署的html文档在gh-pages分支, 因此可以在
Settings -> General -> Default branches中点switch将gh-pages设置为主分支, 然后再进行Vercel部署, 部署成功后再切换回原来的主分支不会影响Vercel之后的部署. 需注意上述gitpod.sh脚本是将html文档输出到了主分支根目录, 所以如果使用了此脚本, 则无需切换分支也可成功部署; -
使用GitHub账户注册登录Vercel后点击
Add New -> project并选择fork的仓库直接点击Deploy即可; -
Vercel部署成功后可添加自定义域名(自动生成的二级域名已被墙), 可在dynv6免费获取二级域名并按提示配置.
常用配置项说明
index.hbs
此文件为生成html的模板
69行: 网页侧栏有宽窄两种形式且可通过按钮调节, 此处有collapsed是默认窄, 删去则默认宽;
161-301行: 搜索栏的配置, 未写入links.yml, 可自行删减搜索项目;
391-407行: 版权信息定义处;
css
style.css
32行: 定义了壁纸, 为必应每日一图, api接口来自第三方, 可替换
36行: 定义了页面主体部分的透明度为0.88, 可修改
40行: 定义了一行显示多少个链接, 此处25%宽度即同时显示四个, 可修改
92/238/607/955行: #ffffffdd定义了顶侧底栏颜色为ffffff, 透明度为十六进制的dd/ff, 可修改
dark.css
13行: 定义了透明度为0.66的黑色对壁纸遮罩, 可修改
19行: 定义了夜间模式的壁纸, 同上api, 可替换
89/159/172-259行: #464646dd定义了顶侧底栏颜色为464646, 透明度为十六进制的dd/ff, 可修改
项目说明
源码来自于已归档的OneNav 本仓库进行了一些简单的整理并通过geneasy文档生成工具与Workflows实现了无服务器的部署, 只需修改links.yml添加链接即可自动生成html文档.
Related Skills
node-connect
339.3kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
83.9kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
339.3kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
commit-push-pr
83.9kCommit, push, and open a PR
