Vuepress vs Vitepress - 适合所有围墙爱好者的终极指南
苹果到波姆 我这个星期六开始晚了,出于内疚,我冲出去跳绳 x 2500 次。但是,我没有太多时间慢慢思考一篇完整的文章,纯粹因为懒惰和缺乏技能而将一个苹果与另一个苹果进行比较🤪 我跳到结论。 优点 在我尝试了两者之后(通过尝试我的意思是使用两者构建 2 个完整的文档站点)。我去了Vitepress。 获胜积分为: 1\。更好的主页布局: * Vue 的垂直布局 vs Vite 更现代的水平布局
苹果到波姆
我这个星期六开始晚了,出于内疚,我冲出去跳绳 x 2500 次。但是,我没有太多时间慢慢思考一篇完整的文章,纯粹因为懒惰和缺乏技能而将一个苹果与另一个苹果进行比较🤪
我跳到结论。
优点
在我尝试了两者之后(通过尝试我的意思是使用两者构建 2 个完整的文档站点)。我去了Vitepress。
获胜积分为:
1\。更好的主页布局:
* Vue 的垂直布局 vs Vite 更现代的水平布局
* Vue 的专栏风格featurevs Vite 更时尚的卡片风格feature
* 如果你愿意,Vue 的纯文本 vs Vite 的渐变
/** in /docs/.vitepress/theme/custom.css */
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(
120deg,
#e60737,
#ea1845,
#ff7e28,
#f5c662
);
进入全屏模式 退出全屏模式
2\。更好的_sidebar_设计和展示
3\。来自 vitepress 团队的积极响应式帮助(答应我,不要在issues中查找我的愚蠢问题)
4\。甚至你的观点和他对 vitepress 光明未来的倡导
Vitepress 的关闭功能是:
1\。更少的组件和插件(可能是故意的:Evan You 在 vitepress 的社区讨论中的“VitePress 试图尽可能地保持最小化”)
例如,vitepress 没有我喜欢的
badge组件,所以我提出了功能请求
2\。 Vitepress 的 1.0.0-alphaxx 还很年轻,而 vuepress 已经 v2.x 并且更加成熟
3\。 Vitepress 的文档有点落后于它的开发。 所以去它的 GitHub 项目中的issues、changelog和discussions,你可能会找到更多最新的信息。
例如:
它实际上是支持的:
export default{
lastUpdated: true,
lastUpdatedText: 'Update Date'
themeConfig:{
lastUpdated: ..
lastUpdatedText: .. /*Stupid me,
it doesn't show no matter how I put these
two fields.
But then in the end, it popped up when
I finally deployed it in GitHub Page.
So pardon me lazy enough to find out
which plays the trick.
RULE OF THUMB: DON'T F TOUCH IT IF IT WORKS!*/
}
}
进入全屏模式 退出全屏模式
并且在 vitepress 中没有提到 i18n 但实际上它与 vuepress 相同(尚未尝试但这是我的大胆但 出色和合乎逻辑的判断! )。
侧边栏深潜
Vuepress 的侧边栏让我非常恼火。
1\。默认
默认情况下,如果您在制作侧边栏方面付出了 0 的努力(通过不声明它),则默认行为是不可取的。 它仅显示页内标题的导航(sidebarDepth仅控制您希望在侧边栏中显示的标题的级别,2表示直到H3)。
theme: defaultTheme({
logo: ...,
//sidebar: {},
...
进入全屏模式 退出全屏模式
默认侧边栏很可悲,因为它无法实现网站的导航目标。
2\。使用侧边栏数组
如果您决定对此做点什么,那么痛苦的旅程就会在您面前展开。
您可以使用侧边栏数组:
/**.vuepress/config.js */
theme: defaultTheme({
logo: ...,
sidebar: [
{
text: "Guide",
link: "/1-Guide/",
children: [
{
text: "Getting Started",
link: "/1-Guide/Getting Started.md",
},
{
text: "01 Introduction",
link: "/1-Guide/01 Introduction.md",
},
],
},
{
text: "Admin",
link: "/admin/",
children: [
{ text: "Account", link: "/admin/account.md", children: [] },
{
text: "admin",
link: "/admin/admin.md",
children: [],
},
],
},
],
进入全屏模式 退出全屏模式
当然,您可以使用 javascript 自动生成文件夹或文件夹中的所有侧边栏项目
const fs = require("fs");
const sidebar = () => {
const files = fs.readdirSync("./docs", { withFileTypes: true });
//get folders (and not .**)
const dirs = files //iterate all the folders in docs/
.filter(
(dirent) =>
dirent.isDirectory() && //no root files
dirent.name.indexOf(".") == -1 && //no .vuepress
dirent.name !== "zh" //not your lang foler
)
.map((dir) => dir.name);
console.log(dirs);
//get all sub
let sidebar = [];
dirs.forEach((dir) => {
let mds = fs
.readdirSync(`./docs/${dir}`, { withFileTypes: true })
.filter(
(dirent) =>
!dirent.isDirectory() &&
dirent.name.indexOf(".md" != -1) &&
dirent.name !== "README.md" &&
dirent.name !== "index.md"
)
.sort((a, b) => {
return a.name - b.name;
}) //
.map((dirent) => {
return {
text: dirent.name.split(".md")[0],
link: `/${dir}/${dirent.name}`,
children: [],
};
});
console.log(mds);
sidebar.push({
text: dir,
collapsible: false,
link: `/${dir}/`,
children: mds,
});
// sidebar[`/${dir}/`]=
});
进入全屏模式 退出全屏模式
在我使用这个冗长的代码进行升级后,我深感遗憾。
我的页面导航在哪里??!!看,不是侧边栏中的页面导航不好,好吗?!如果只有页面导航,那就不好了!我从来没有说过我不想把它和网站的其他文章放在一起!!来吧,把它还给我!现在!
3.绝望的侧边栏项目对象
这个小小的挫折绝不会阻止我。
sidebar: {
"/1-Guide/": [
{
text: "Guide",
children: ["/1-Guide/README.md", "/1-Guide/Getting Started.md"],
},
],
"/2-Account/": [
{
text: "Account",
children: ["/2-Account/01 Sign Up.md", "/2-Account/02 Sign In.md"],
},
],
},
进入全屏模式 退出全屏模式
仅从这段代码,您就可以预料会发生什么:当您在 /guide/ 路径中时,所有页面仅在侧边栏中显示指南文章,而您需要转到 /account/ 路径才能在侧边栏中查看帐户文章
那又怎样,我的页面导航回来了,我还是觉得里面不完整!!!
4\。如果你想变得聪明,就会陷入死亡陷阱
愚蠢的我,为什么不将所有项目都放在路径中,这样即使我在该路径中,我仍然可以从侧边栏项目导航整个站点。
sidebar: {
"/1-Guide/": [
{
text: "Guide",
children: ["/1-Guide/README.md", "/1-Guide/Getting Started.md"],
},
{
text: "Account",
children: ["/2-Account/01 Sign Up.md", "/2-Account/02 Sign In.md"],
},
],
},
进入全屏模式 退出全屏模式
是的,它现在在侧边栏中显示所有文章,但是当您单击“注册”时,它转到/1-guide/signup.html而不是/2-account/signup.html,导致404
太棒了!愚蠢的侧边栏!我永远都不会原谅你的!!
好吧,笑话不说,然后我在vuepress的逻辑中弄清楚,当你的文章被组织到不同的文件夹中时,vuepress的方法是使用顶部的导航栏在不同的主题(文件夹)之间导航,并在每个文件夹中(主题/路径),左侧的侧边栏仅显示与该主题相关的文章。这就是浏览整个网站的方法。
我快速提交到 Vitepress 侧边栏。它只是更优雅地呈现侧边栏。
Config.js
sidebar: [
{
text: 'Guide',
collapsible: true,
items: [
{ text: 'Introduction', link: '/guide/' },
{ text: 'Getting Started', link: '/guide/gettingstarted' },
{ text: 'Get Account', link: '/guide/getaccount'},
{ text: 'Order SIMs', link: '/guide/order'},
{ text: 'Dashboard', link: '/guide/dashboard'},
{ text: 'SIM Status', link: '/guide/simstatus'},
{ text: 'Check Your SIMs', link: '/guide/sim'},
{ text: 'CDR', link: '/guide/cdr'},
]
},
{
text: 'SIM In Depth',
collapsible: true,
items: [
{ text: 'Introduction', link: '/sim/' },
{ text: 'SIM', link: '/sim/sim' }
]
}
],
进入全屏模式 退出全屏模式
文件夹结构:
完成品
左边是导航整个网站的侧边栏。右侧是显示所需深度标题的页面导航。顶部导航栏整洁干净。
没有定制,没有喧嚣,没有汗水,我为vitepress鼓掌
结束
最后,你可以再次使用 javascript 生成侧边栏,但我不认为它是理想的,因为从写作的角度来看,通过按字母顺序排序文件名或按时间顺序排序来做出正确的顺序并不理想的创造。在这种情况下,手写更好。
最后,我在 GitHub 页面中使用 Github 操作部署了它,过程相当简单。但是 vite 的一件事是,如果 css 渲染失败,错误消息似乎没有指出错误位置。 特别注意.md中的内容,如果有任何html/md类型的错误,构建(yarn docs:build)会产生如下错误:
TypeError: Invalid value used as weak map key
at WeakMap.set (<anonymous>)
进入全屏模式 退出全屏模式
zoz100069 * *
参考文献:
1.Vitepress讨论:vitepress的下一步
一个。vuepress v2
3.vitepress
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献21234条内容
所有评论(0)