博客书写规范&注意事项

注意事项

注册组件不显示

我使用的是 "vue": "^3.5.13", "vuepress": "2.0.0-rc.19", "vuepress-theme-reco": "2.0.0-rc.26"

当我在 .vuepress/components写入子组件，官方文档称会自动全局注册，但我在控制台调试时，父组件中的子组件的element能显示，长宽是0*0。

我逐一排查问题，首先，明确父组件引入的规范写法：

---
modules:
   - flower-cat
---
<flower-cat/>

官方文档中明确：如果我们文档项目存放在工程的子目录，比如 /docs 文件夹下，我们需要设置 themeConfig.docsDir 为 /docs,这句话的意思是自动扫描机制依赖于一个关键配置：themeConfig.docsDir。

所以需要在config.ts设置docsDir路径。但到这一步仍然未解决，原因我没找到，最后我手动注册组件作为后备方案，这样完全不依赖主题的自动扫描。

// client.ts
import { defineClientConfig } from '@vuepress/client'
import FlowerCat from './components/flowerCat.vue'

export default defineClientConfig({
  enhance({ app }) {
    app.component('flower-cat', FlowerCat)
  },
})

tips

• tags和categories的自动追踪只针对于/blogs下的文章
• Timeline的自动追踪只针对于/blogs下的文章

书写规范

小标签

任务列表

• 打游戏
• 学习

卡片

代码组

//代码块1;
const foo = 'foo';

//代码块2;
const bar = 'bar';

单行代码

//这是一个命令行
npm run dev
npm run build

链接

linkopen in new window

图标

vuepress-theme-reco@2.x 是通过 Xicons 来配置图标的，Xicons 只集成了 carbonopen in new window 一种图标，几乎可以满足绝大部分场景。

如果想要在 markdown 中输出一个星星图标 ，你就可以在 markdown 中这样比编辑代码：

<xicons icon="Star" />

表格