配置博客初始预定

package.json

@@ -16,5 +16,8 @@
     "vue": "^3.5.10",
     "vuepress": "2.0.0-rc.17",
     "vuepress-theme-hope": "2.0.0-rc.58"
+  },
+  "dependencies": {
+    "markdown-it-task-lists": "^2.1.1"
   }
 }

src/.vuepress/config.ts

@@ -1,16 +1,21 @@
 import { defineUserConfig } from "vuepress";
-
+import { hopeTheme } from "vuepress-theme-hope";
+import markdownItTaskLists from "markdown-it-task-lists";
 import theme from "./theme.js";
 
 export default defineUserConfig({
   base: "/blog/",
 
   lang: "zh-CN",
   title: "博客演示",
-  description: "vuepress-theme-hope 的博客演示",
+  description: "zitont的博客演示",
 
   theme,
 
+  extendsMarkdown: (md) => {
+    // 使用静态导入的插件
+    md.use(markdownItTaskLists);
+  },
   // 和 PWA 一起启用
   // shouldPrefetch: false,
-});
+});

src/.vuepress/navbar.ts

@@ -1,8 +1,10 @@
 import { navbar } from "vuepress-theme-hope";
 
+
 export default navbar([
   "/",
   "/demo/",
+  "/config/config.md",
   {
     text: "博文",
     icon: "pen-to-square",

src/.vuepress/sidebar.ts

@@ -2,25 +2,55 @@ import { sidebar } from "vuepress-theme-hope";
 
 export default sidebar({
   "/": [
-    "",
+    "/demo/",
     {
       text: "如何使用",
       icon: "laptop-code",
       prefix: "demo/",
       link: "demo/",
       children: "structure",
     },
-    {
-      text: "文章",
-      icon: "book",
-      prefix: "posts/",
-      children: "structure",
-    },
     "intro",
     {
       text: "幻灯片",
       icon: "person-chalkboard",
       link: "https://ecosystem.vuejs.press/zh/plugins/markdown/revealjs/demo.html",
     },
   ],
+  "/config/": [
+    {
+      text: "node.js-配置使用",
+      collapsible: true,
+        // 可选的。设置分组是否默认展开，默认值是 false
+      expanded: false,
+        // 必要的，分组的子项目
+      icon: "laptop-code",
+     prefix: "node/",
+      children: [
+        "1.md",
+        "2.md",
+        "3.md"
+      ],
+    },
+    {
+      text: "c-配置使用",
+      collapsible: true,
+        // 可选的。设置分组是否默认展开，默认值是 false
+      expanded: false,
+        // 必要的，分组的子项目
+      icon: "laptop-code",
+      prefix: "c/",
+      children: [
+        "1.md",
+        "2.md"
+      ],
+    },
+
+  ]
 });
+// {
+//   text: "文章",
+//   icon: "book",
+//   prefix: "posts/",
+//   children: "structure",
+// },

src/.vuepress/styles/config.scss

@@ -1,2 +1,4 @@
 // you can change config here
 $theme-color: #096dd9;
+// $pc: 9999px;
+$tablet: 959px;

src/.vuepress/theme.ts

@@ -31,7 +31,7 @@ export default hopeTheme({
 
   // 博客相关
   blog: {
-    description: "一个前端开发者",
+    description: "一个开发者",
     intro: "/intro.html",
     medias: {
       Baidu: "https://example.com",

src/config/README.md

@@ -0,0 +1,8 @@
+---
+title: 配置
+index: false
+icon: laptop-code
+category:
+  - 使用指南
+---
+<Catalog />

src/config/c/1.md

@@ -0,0 +1,125 @@
+---
+# 这是文章的标题
+title: node.js 配置
+# 你可以自定义封面图片
+cover: /assets/images/cover1.jpg
+# 这是页面的图标
+icon: file
+# 这是侧边栏的顺序
+order: 1
+# 设置作者
+author: Ms.Hope
+# 设置写作时间
+date: 2020-01-01
+# 一个页面可以有多个分类
+category:
+  - 使用指南
+# 一个页面可以有多个标签
+tag:
+  - 页面配置
+  - 使用指南
+# 此页面会在文章列表置顶
+sticky: true
+# 此页面会出现在星标文章中
+star: true
+# 你可以自定义页脚
+footer: 这是测试显示的页脚
+# 你可以自定义版权信息
+copyright: 无版权
+---
+
+`more` 注释之前的内容被视为文章摘要。
+
+<!-- more -->
+
+## 页面标题
+
+The first H1 title in Markdown will be regarded as page title.
+
+Markdown 中的第一个 H1 标题会被视为页面标题。
+
+你可以在 Markdown 的 Frontmatter 中设置页面标题。
+
+```md
+---
+title: 页面标题
+---
+```
+
+## 页面信息
+
+你可以在 Markdown 的 Frontmatter 中设置页面信息。
+
+- 作者设置为 Ms.Hope。
+- 写作日期为 2020 年 1 月 1 日
+- 分类为 “使用指南”
+- 标签为 “页面配置” 和 “使用指南”
+
+## 页面内容
+
+你可以自由在这里书写你的 Markdown。
+
+::: tip 图片引入
+
+- 你可以将图片和 Markdown 文件放置在一起使用相对路径进行引用。
+- 对于 `.vuepress/public` 文件夹的图片，请使用绝对链接 `/` 进行引用。
+
+:::
+
+## 组件
+
+每个 Markdown 页面都会被转换为一个 Vue 组件，这意味着你可以在 Markdown 中使用 Vue 语法：
+
+{{ 1 + 1 }}
+
+<!-- markdownlint-disable MD033 -->
+
+<ul>
+  <li v-for="i in 3">{{ i }}</li>
+</ul>
+
+<!-- markdownlint-enable MD033 -->
+
+你也可以创建并引入你自己的组件。
+
+<MyComponent />
+
+<script setup>
+import { defineComponent, h, ref } from 'vue';
+
+const MyComponent = defineComponent({
+  setup() {
+    const input = ref('Hello world!');
+    const onInput = (e) => {
+      input.value = e.target.value;
+    };
+
+    return () => [
+      h('p', [
+        h('span','输入: '),
+        h('input', {
+          value: input.value,
+          onInput,
+        }),
+      ]),
+      h('p', [h('span','输出: '), input.value]),
+    ];
+  },
+});
+</script>
+
+---
+
+主题包含一些有用的组件。这里是一些例子:
+
+- 文字结尾应该有深蓝色的 徽章文字 徽章。 <Badge text="徽章文字" color="#242378" />
+
+- 一个卡片:
+
+  ```component VPCard
+  title: Mr.Hope
+  desc: Where there is light, there is hope
+  logo: https://mister-hope.com/logo.svg
+  link: https://mister-hope.com
+  background: rgba(253, 230, 138, 0.15)
+  ```