# vuepress 自定义主题说明

vuepress-theme-bhabgs 完全按照 vuepress 官网要求进行开发,并集成了 vuepress-default-theme

# 一、使用说明

如需使用最新功能 请将插件更新至最新版本

# 二、安装

vuepress-theme-bhabgs 组件时必须安装的

``` bash
npm i -D vuepress-theme-bhabgs
```

# 引入

在 /.vuepress>config.js 添加如下配置 请注意因为该主题是以 vuepress-theme- 开头,你可以使用缩写来省略这个前缀

# plan 1

module.exports = {
    ...,
    theme: 'bhabgs',
    ...
}

# plan 2

module.exports = {
    ...,
    theme: 'vuepress-theme-bhabgs',
    ...
}

# 三、组件内部自定义组件

  1. templateMobile
  2. templatePc

# 使用方式

可以直接在 引入该主题的 vuepress 文档内进行标签使用 <templateMobile /> 组件 每个 content 容器 有且只有一个 name 生效

<templateMobile name="Button-index">

<<< @/docs/.vuepress/components/Button/index.vue

</templateMobile>
参数 描述 类型 是否必填 可选值 默认值
name 展示手机端效果 yes any string ‘’

# 四、自定义渲染模板

  1. explain title
  2. explain language

# 1. markdown 模板拦截

::: explain any{title}

string | [any]

:::

# 1. markdown code 模板拦截

    /\``` explain any{title}
        string code
    ```

Made with ❤️ by Ahmad Mostafa - @z3by