如何在 reference 项目中通过环境变量自定义导航菜单与页脚信息? 📅 发布时间:2026/9/15 19:08:38 👁 浏览次数: 如何在 reference 项目中通过环境变量自定义导航菜单与页脚信息【免费下载链接】reference面向开发者的技术速查清单Cheat Sheets集合整理常见技术、工具与开发流程帮助快速查阅关键信息提高开发效率。项目地址: https://gitcode.com/GitHub_Trending/referen/reference当你要部署自己的 referenceQuick Reference 备忘清单实例时默认的导航菜单、页脚与版权文字往往对不上你的站点。项目支持在项目根目录的.env文件中通过REF_URL、REF_LABEL、REF_FOOTER、LICENSE四个环境变量自定义导航菜单与页脚/版权信息编译后dist目录下的静态页面会按你的设置显示这些内容。环境要求package.json中声明了node: 16.0.0。克隆仓库并安装依赖git clone https://gitcode.com/GitHub_Trending/referen/reference.git cd reference npm i # 安装依赖CONTRIBUTING.md 的本地开发一节说明除npm外也可以使用pnpm或yarn作为包管理器。创建 .env 文件定义菜单、页脚与版权变量在项目根目录即仓库根目录中创建.env文件docs/quickreference.md 环境变量一节的原文要求“在项目根目录中创建.env文件”。以下取值来自 CONTRIBUTING.md 与 docs/quickreference.md 中的示例请按自己站点的实际值替换REF_URLhttp://ref.xxx.cn/ REF_LABEL网站首页 REF_FOOTER备案号沪ICP备20220000000号-1 LICENSECopyright (c) b2022/b 小弟调调™四个变量的用途以文档说明为准REF_URLREF_LABEL导航菜单。REF_URL是菜单链接地址替换为你自己的站点地址文档示例为http://ref.xxx.cn/REF_LABEL是菜单显示文字文档示例为网站首页。REF_FOOTER页脚添加支持 HTML 字符串。LICENSE修改版权信息支持 HTML 字符串示例值中使用了b标签。如果只改导航菜单写入REF_URL和REF_LABEL两项即可REF_FOOTER与LICENSE按需添加。注意首页的卡片式导航菜单是由根目录README.md自动生成编辑其中的 Markdown 卡片与 rehype 注释与本文的.env环境变量是两条不同的自定义入口本文只处理后者。编译静态页面npm run buildpackage.json 中build脚本的内容是refs-cli npm run cpyrefs-cli负责把文档编译成 HTML 并输出到仓库根目录下的dist目录cpy把appicon/*.png复制到dist/appicon。CONTRIBUTING.md 方法三“克隆仓库自己编译添加导航菜单”给出的顺序就是克隆 →npm install→ 建.env→npm run build。验证浏览器打开 dist/index.html 检查菜单与页脚编译产物存放在仓库根目录下的dist目录。按 docs/quickreference.md 本地编译一节的说明“将dist/index.html静态页面在浏览器中打开预览”。在打开的页面中确认三点导航菜单显示REF_LABEL的文字链接指向REF_URL的地址页脚出现REF_FOOTER的内容版权信息处显示LICENSE的内容。需要调整菜单或页脚文字时修改.env后重新执行npm run build再打开dist/index.html复核。如果处于持续调整阶段可以改用npm run start # 监听 md 文件编译输出 HTML可选在 CI 中先生成 .env 再构建CONTRIBUTING.md 给出了用 GitHub Actions 定时更新实例的做法其构建步骤先写入.env再安装依赖和编译- name: ♻️ 编译静态文件 run: | echo -e REF_URLhttps://refs.xxx.net/\nREF_LABEL网站首页 .env npm install npm run build同一示例还在 workflow 层面设置了TZ: Asia/Shanghai文档说明“设置时区可使页面中的最近更新时间使用时区时间”。REF_URL的值请替换为你自己的站点地址。可选用配置文件代替环境变量页脚与版权文本同样可以通过配置文件配置将.refsrc.json存放在项目根目录下docs/quickreference.md 的配置示例中相关字段为{ home: { label: 首页, url: https://你的网站 }, footer: br /备案号支持HTML字符串, license: 支持 HTML 字符串 }footer与license字段同样支持 HTML 字符串示例中home.url的https://你的网站是需要替换的占位值换成你自己的站点地址即可。除 JSON 外配置加载还支持 JSONC、JSON5、YAML、TOML、INI、CJS、TypeScript 与 ESM完整文件名列表如.refsrc.toml、refs.config.ts等见 docs/quickreference.md 的“支持更多配置加载”一节。【免费下载链接】reference面向开发者的技术速查清单Cheat Sheets集合整理常见技术、工具与开发流程帮助快速查阅关键信息提高开发效率。项目地址: https://gitcode.com/GitHub_Trending/referen/reference创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考