vuepress-theme-press

Press 系列组件库共享的 VuePress 文档主题，基于 VuePress 默认主题定制，提供统一的文档站点风格。

安装

npm install vuepress-theme-press

使用

在 VuePress 配置文件中指定主题：

// docs/.vuepress/config.js
module.exports = {
  theme: 'vuepress-theme-press',
  themeConfig: {
    // 主题配置
    demoBaseLinkProd: 'https://novlan1.github.io/docs/press-ui/h5/#/',
    demoBaseLinkDev: 'http://localhost:9999/#/',
    knotAgentChatPath: 'node_modules/press-plus/press-knot-agent-chat/press-knot-agent-chat.vue',
  },
};

主题配置

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | algolia | Algolia 搜索配置 | object | - | | smoothScroll | 是否启用平滑滚动 | boolean | false | | knotAgentChatPath | KnotAgentChat 组件路径 | string | - | | sidebar | 侧边栏配置 | array \| object | - | | nav | 导航栏配置 | array | - | | locales | 多语言配置 | object | - |

目录结构

vuepress-theme-press/
├── components/          # 主题组件
│   ├── AlgoliaSearchBox.vue   # Algolia 搜索框
│   ├── DropdownLink.vue       # 下拉链接
│   ├── DropdownTransition.vue # 下拉过渡动画
│   ├── Home.vue               # 首页布局
│   ├── NavLink.vue            # 导航链接
│   ├── NavLinks.vue           # 导航链接列表
│   ├── Navbar.vue             # 导航栏
│   ├── Page.vue               # 页面布局
│   ├── PageEdit.vue           # 页面编辑链接
│   ├── PageNav.vue            # 上一页/下一页导航
│   ├── Sidebar.vue            # 侧边栏
│   ├── SidebarButton.vue      # 侧边栏按钮
│   ├── SidebarGroup.vue       # 侧边栏分组
│   ├── SidebarLink.vue        # 侧边栏链接
│   └── SidebarLinks.vue       # 侧边栏链接列表
├── global-components/   # 全局组件
│   ├── Badge.vue              # 徽章
│   ├── Highlight.vue          # 高亮文本
│   ├── Log.vue                # 日志组件
│   ├── LogItem.vue            # 日志项
│   ├── LogItemText.vue        # 日志项文本
│   ├── downloadButton.vue     # 下载按钮
│   ├── icons.js               # 图标定义
│   └── iconsLayouts.vue       # 图标布局
├── layouts/             # 布局
│   ├── 404.vue                # 404 页面
│   └── Layout.vue             # 主布局
├── styles/              # 样式文件
│   ├── arrow.styl             # 箭头样式
│   ├── button.styl            # 按钮样式
│   ├── code.styl              # 代码块样式
│   ├── config.styl            # 样式配置
│   ├── custom-blocks.styl     # 自定义块样式
│   ├── icons.styl             # 图标样式
│   ├── index.styl             # 主样式入口
│   ├── mobile.styl            # 移动端样式
│   ├── toc.styl               # 目录样式
│   └── wrapper.styl           # 包裹器样式
├── util/                # 工具函数
│   └── index.js               # 路由解析、侧边栏等工具
├── utils/               # 辅助工具
│   └── message.js             # 消息工具
├── index.js             # 主题入口
├── noopModule.js        # 空模块（用于条件别名）
└── package.json

内置插件

主题内置了以下 VuePress 插件：

• @vuepress/active-header-links - 活跃标题链接高亮
• @vuepress/search - 内置搜索
• @vuepress/plugin-nprogress - 页面加载进度条
• vuepress-plugin-container - 自定义容器（tip / warning / danger / details）
• vuepress-plugin-smooth-scroll - 平滑滚动

全局组件

主题注册了以下全局组件，可在 Markdown 中直接使用：

• <Badge /> - 徽章标记
• <Highlight /> - 高亮文本
• <Log /> / <LogItem /> / <LogItemText /> - 更新日志展示

依赖

• VuePress ^1.9.0（peerDependency）
• Stylus 样式预处理器

许可证

MIT