VuePress 主题 CraftDocs 使用教程

VuePress 主题 CraftDocs 使用教程

vuepress-theme-craftdocsVuePress theme for Craft CMS documentation项目地址:https://gitcode.com/gh_mirrors/vu/vuepress-theme-craftdocs

项目介绍

vuepress-theme-craftdocs 是一个专为 Craft CMS 文档设计的 VuePress 主题。该主题在默认的 VuePress 主题基础上进行了以下改进：

• 支持代码语言切换和分页视图
• 禁用所有内联 <code> 标签的插值
• 改进 <table> 样式
• 添加 themeConfig 选项以调整侧边栏大小：smallerSidebarHeadings 和 widerSidebar（默认均为 false）

项目快速启动

安装

1. 首先，按照正常流程安装 VuePress：

   yarn add -D vuepress
   # 或
   npm install -D vuepress
   

2. 安装 vuepress-theme-craftdocs 主题：

   yarn add -D vuepress-theme-craftdocs
   # 或
   npm install -D vuepress-theme-craftdocs
   

配置

在 vuepress/config.js 中进行以下配置：

module.exports = {
  theme: "craftdocs",
  themeConfig: {
    codeLanguages: {
      php: "PHP",
      twig: "Twig",
      // 其他代码语言标签
    }
  },
  markdown: {
    anchor: {
      level: [2, 3]
    },
    extendMarkdown(md) {
      let markup = require("vuepress-theme-craftdocs/markup");
      md.use(markup);
    }
  }
};

运行

启动 VuePress 开发服务器：

yarn vuepress dev
# 或
npm run vuepress dev

应用案例和最佳实践

代码切换

你可以在文档中创建代码切换块，通过以下方式：

```php
// PHP 代码示例
echo "Hello, World!";
```

```twig
{# Twig 代码示例 #}
{{ "Hello, World!" }}
```

分页视图

在分页视图中，代码切换可以共享一个页面范围的切换 UI，浮动在右侧内容窗格的顶部。为此，请在页面的 frontmatter 中添加代码列表：

---
split: true
code:
  - php
  - twig
---

典型生态项目

Craft CMS

vuepress-theme-craftdocs 主要用于 Craft CMS 的文档编写。Craft CMS 是一个灵活的内容管理系统，适用于各种类型的网站和应用程序。

VuePress

VuePress 是一个基于 Vue 的静态站点生成器，特别适合编写技术文档。vuepress-theme-craftdocs 是 VuePress 的一个主题，专门为 Craft CMS 文档定制。

通过以上步骤，你可以快速启动并使用 vuepress-theme-craftdocs 主题来编写和展示 Craft CMS 文档。

vuepress-theme-craftdocsVuePress theme for Craft CMS documentation项目地址:https://gitcode.com/gh_mirrors/vu/vuepress-theme-craftdocs