维护数据
维护数据
1.迁移数据
(特别注意🛑)
(1)删除模板中存在的老数据
此时,就可以把模板docs目录
下的10.运维、15.前端……65.Teek
等 目录都 给删除了,然后把你之前的个人笔记数据给放到Teek的docs目录下,然后按上面提到的方式命名。
(2)创建自己的新数据
例如,我们会创建如下目录结构:(每个目录下有多个子目录或者md)
具体目录结构截图示例:
特别注意:
在把你之前的数据迁移到teek时,这里需要格外注意一个问题。
teek目前使用rewrite模式的autoformatter插件来给md强制注入永久permalink,每个md的permalink格式为/一级前缀/随机uid
。
因此,当你想要使用teek的rewrite模式后,这里需要我们提前配置一点东西,后续就可以丝滑使用了:
(3)指定一级前缀
规则
编辑docs\.vitepress\config.ts
文件:
{ folderName: "10.运维", prefix: "/linux/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
{ folderName: "15.前端", prefix: "/qianduan/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
{ folderName: "20.编程", prefix: "/code/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
{ folderName: "25.黑客", prefix: "/hacker/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
{ folderName: "30.专题", prefix: "/zhuanti/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
{ folderName: "35.工具", prefix: "/tools/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
{ folderName: "40.生活", prefix: "/life/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
{ folderName: "45.精神小屋", prefix: "/love/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
{ folderName: "50.娱乐", prefix: "/yule/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
{ folderName: "55.兴趣", prefix: "/xingqu/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
{ folderName: "60.关于", prefix: "/about/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
{ folderName: "65.Teek", prefix: "/teek/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
即:有多少个一级目录,那么配置文件那里就必须配置多少行,这样每个一级目录下的内容就会出现在同一个侧边栏了。
配置完成后,不管你之前的md是否有permalink,teek的autoformatter插件都会强制注入永久permalink。(先可以用其他少量文档做下测试,没问题后,再迁移自己的个人数据。我这里都是测试没问题的,大家可以放心食用。🤣)
(4)配置导航栏项
你需要做的就是,在docs\.vitepress\ConfigHyde\Nav.ts
文件里配置对应的url即可:
这里为了方便管理,每个一级目录下最好存放一个md,其序号可以命名为01. 让其为最优先的一个文件。(导航栏对应的菜单就可以配置对应一级目录下这个文件的permalink就行了。)
详细信息
// nav导航栏配置
import { TeekIcon, VdoingIcon, SSLIcon, BlogIcon } from "./icon/NavIcon";
export const Nav = [
{ text: "🏡首页", link: "/" },
// 笔记
{
text: '📚文档',
items: [
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/linux.svg" alt="" style="width: 16px; height: 16px;">
<span>运维</span>
</div>
`,
link: '/linux/linux-index',
},
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/前端.svg" alt="" style="width: 16px; height: 16px;">
<span>前端</span>
</div>
`,
link: '/qianduan/qianduan-index',
},
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/编程.svg" alt="" style="width: 16px; height: 16px;">
<span>编程</span>
</div>
`,
link: '/code/code-index',
},
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/黑客.svg" alt="" style="width: 16px; height: 16px;">
<span>黑客</span>
</div>
`,
link: '/hacker/hacker-index',
},
],
},
// 专题
{
text: '🛠️专题',
items: [
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/teek.svg" alt="" style="width: 16px; height: 16px;">
<span>Teek</span>
</div>
`,
link: '/teek/teek-blog',
},
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/Git.svg" alt="" style="width: 16px; height: 16px;">
<span>Git</span>
</div>
`,
link: '/zhuanti/git',
},
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/脚本.svg" alt="" style="width: 16px; height: 16px;">
<span>脚本</span>
</div>
`,
link: '/zhuanti/jiaoben',
},
],
},
// 生活
{
text: '🏓生活',
items: [
{
// 分组标题1
text: '娱乐',
items: [
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/相册.svg" alt="" style="width: 16px; height: 16px;">
<span>相册</span>
</div>
`,
link: '/yule/photo',
},
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/电影.svg" alt="" style="width: 16px; height: 16px;">
<span>电影</span>
</div>
`,
link: '/yule/movie',
},
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/音乐.svg" alt="" style="width: 16px; height: 16px;">
<span>音乐</span>
</div>
`,
link: '/yule/music',
},
],
},
{
// 分组标题2
text: '小屋',
items: [
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/精神小屋.svg" alt="" style="width: 16px; height: 16px;">
<span>精神小屋</span>
</div>
`,
link: '/love/inner',
},
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/时间管理.svg" alt="" style="width: 16px; height: 16px;">
<span>时间管理</span>
</div>
`,
link: '/love/time-plan',
},
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/文案.svg" alt="" style="width: 16px; height: 16px;">
<span>情感文案</span>
</div>
`,
link: '/love/wenan',
},
// { text: "💖情侣空间", link: "https://fxj.onedayxyy.cn/" },
],
},
// 兴趣
{
text: '兴趣',
items: [
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/旅行.svg" alt="" style="width: 16px; height: 16px;">
<span>旅行</span>
</div>
`,
link: '/xingqu/travel',
},
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/读书.svg" alt="" style="width: 16px; height: 16px;">
<span>读书</span>
</div>
`,
link: '/xingqu/reading',
},
],
},
],
},
// // 兴趣
// {
// text: '🎨兴趣',
// items: [
// {
// text: `
// <div style="display: flex; align-items: center; gap: 4px;">
// <img src="/img/nav/旅行.svg" alt="" style="width: 16px; height: 16px;">
// <span>旅行</span>
// </div>
// `,
// link: '/xingqu/travel',
// },
// {
// text: `
// <div style="display: flex; align-items: center; gap: 4px;">
// <img src="/img/nav/读书.svg" alt="" style="width: 16px; height: 16px;">
// <span>读书</span>
// </div>
// `,
// link: '/xingqu/reading',
// },
// ],
// },
// 索引
{
text: '👏索引',
items: [
{ text: '📃分类页', link: '/categories' },
{ text: '🔖标签页', link: '/tags' },
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/归档.svg" alt="" style="width: 16px; height: 16px;">
<span>归档页</span>
</div>
`,
link: '/archives',
},
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/清单.svg" alt="" style="width: 16px; height: 16px;">
<span>清单页</span>
</div>
`,
link: '/articleOverview',
},
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/登录.svg" alt="" style="width: 16px; height: 16px;">
<span>登录页</span>
</div>
`,
link: '/login',
},
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/风险提示.svg" alt="" style="width: 16px; height: 16px;">
<span>风险链接提示页</span>
</div>
`,
link: '/risk-link?target=https://onedayxyy.cn/',
},
],
},
// 关于
{
text: '🍷关于',
items: [
{ text: '👋关于我', link: '/about/me' },
{ text: '🎉关于本站', link: '/about/website' },
{ text: '💖友链', link: '/about/friend-links' },
{ text: '🌐网站导航', link: '/about/websites' },
{ text: "👂留言区", link: "/about/liuyanqu" },
{ text: "💡思考", link: "/about/thouht" },
{ text: "💡情侣相册", link: "/about/love" },
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/时间轴.svg" alt="" style="width: 16px; height: 16px;">
<span>时间轴</span>
</div>
`,
link: '/about/time-line',
},
{ text: "💡朋友圈", link: "/about/pyq" },
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/网站统计.svg" alt="" style="width: 16px; height: 16px;">
<span>网站统计</span>
</div>
`,
link: 'https://umami.onedayxyy.cn/share/DzS4g85V8JkxsNRk/onedayxyy.cn',
},
{
text: `
<div style="display: flex; align-items: center; gap: 4px;">
<img src="/img/nav/站点监控.svg" alt="" style="width: 16px; height: 16px;">
<span>站点监控</span>
</div>
`,
link: 'https://status.onedayxyy.cn/status/monitor',
},
{ text: "📌我的云盘", link: "https://zdir.onedayxyy.cn/" },
],
},
]
最后形成的导航栏如下:
2.新增md
如果你想要新建一个md,该如何呢?
你只需要在对应目录下,新创建一个md就好,但是注意命名必须类似为 20.中国.md
才行(以此为例)。
运行项目后,Teek里的autoformatter插件会自动给注入formater参数(如下截图)(你无需做任何操作):
运行,然后观察效果:
pnpm docs:dev