zpfz / vuepress-theme-antdocs

🔥🎨 An Ant Design style theme for VuePress. (QQ Group: 867711329) [NOTE: The AntDocs-next is WIP.]

AntDocs

An Ant Design style theme for VuePress.

Features

• Equipped with Ant Design style, you can directly use various components of the UI library.
• Optimize parts of styles.
• More features are waiting for you to discover ...

Quick start

Install theme

npm i vuepress-theme-antdocs

or

yarn add vuepress-theme-antdocs

Use theme

Open your .vuepress/config.js, and then add VuePress theme reference code:

module.exports = {
  theme: 'antdocs'
}

You can get help here: Using a theme

Preview

vuepress-theme-antdocs's Issues

代码折叠有没有插件，类似antd那种

theorem right 语法支持

::: theorem 牛顿第一定律
假若施加于某物体的外力为零，则该物体的运动速度不变。

::: right
来自 维基百科
:::

支持最大内容宽度设定

Is your feature request related to a problem? Please describe.
没有相关 issue

Describe the solution you'd like
考虑到电脑显示屏幕太宽，而 AntDocs 内容默认显示区域基本占满整个屏幕，尤其是在禁用侧边栏后的效果特别难受。

Describe alternatives you've considered
其实 VuePress 默认主题就考虑到了最大内容宽度，所以效果就比较舒服。

下面是 AntDocs 主题和 VuePress 默认主题的对比图。（这里的 VuePress 默认主题预览图用的是一个 alternative，但是和官方默认主题一致）

Additional context
无

建议修改ads的class名字改为promote

Is your feature request related to a problem? Please describe.
它不是一个问题，具体表现为 当我开启了 adblock之后，ad 或者 ads的class名的dom节点都会被隐藏。

Describe the solution you'd like
建议修改相关关键字的 改成promote 亲测有效。。针对Ads.vue修改即可

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Vue.mixin({ store}) 无法覆盖该主题自带的 vuex

默认主题引入 vuex 的方式是 Vue.mixin({ store})，但使用了该主题后，不能覆盖，只能使用模块动态注册来代替

运行后提示 core-js 报错?

"vuepress": "^1.4.1",
"vuepress-theme-antdocs": "^1.0.1"
node: 10.13.0

希望能给出一些自动部署的适配方案

考虑扩展为vitepress的主题吗

我发现这个主题看起来还不错，没那么多花里胡哨，考虑支持一下vitepress吗，因为比起启动速度，vite比webpack确实快太多了

启动项目后报link未定义，首页无法显示

Describe the bug
启动应用后，应用正常启动。但是进入首页后报如下错误，link未定义页面无法正常显示：

To Reproduce
Steps to reproduce the behavior:

1. 启动应用。
2. 正常启动后访问首页

Expected behavior
A clear and concise description of what you expected to happen.

System Info

• VuePress version: 1.8.2
• Antdocs version: 1.3.4
• Node version: v14.16.0
• OS version: win10 （Microsoft Windows [版本 10.0.16299.15]）

node package.json引用依赖

"devDependencies": {
    "@vuepress/plugin-active-header-links": "^1.5.4",
    "@vuepress/plugin-back-to-top": "^1.5.4",
    "@vuepress/plugin-nprogress": "^1.5.4",
    "vuepress": "^1.5.4",
    "vuepress-plugin-permalink-pinyin": "^1.0.0"
  },
  "dependencies": {
    "vuepress-theme-antdocs": "^1.3.4"
  }

Additional context
Add any other context about the problem here.

主题有办法添加icp备案号在底部吗？

类似这样

进入多级目录的文档,顶部 nav 的激活高亮有问题

Describe the bug
我的文档位于 docs/document/category1/doc1.md
设置了顶部 Nav:

nav: [
      { text: "文档", link: "/document/", }
]

进入 domain.com/document/category1/doc1.html 页面时 nav 没有激活高亮

To Reproduce
同描述

Expected behavior
文档（/document/）导航菜单激活高亮

System Info

• VuePress version: 1.8.2
• Antdocs version: 1.3.5
• Node version: 14.17.2
• OS version: OSX 11

Additional context

看源码打印了 currentPage 和 a-menu 的 key 分别是 currentPage="/document/category1/" key = /document/ 所以被认为未选中激活了

代码块颜色如何修改？

Describe the bug
为什么代码块默认是这种颜色呢？

palette.styl 没动过，想要 vuepress 官网的那种样式。不知道有没有开放配置?

System Info

• VuePress version:1.8.2
• Antdocs version:1.3.4
• Node version:14.16.1
• OS version:10.15.7

安装后无法启动

yarn docs:dev

yarn run v1.22.15
$ vuepress dev docs
Error: Cannot find module '@vuepress/shared-utils'
Require stack:

• F:\Baiker\node_modules\vuepress-theme-antdocs\index.js
• F:\Baiker\node_modules@vuepress\core\lib\app\resolvePluginModule.js
• F:\Baiker\node_modules@vuepress\core\lib\app\resolvePluginObject.js
• F:\Baiker\node_modules@vuepress\core\lib\app\appUse.js
• F:\Baiker\node_modules@vuepress\core\lib\app\index.js
• F:\Baiker\node_modules@vuepress\core\lib\index.js
• F:\Baiker\node_modules@vuepress\cli\lib\commands\build\createBuild.js
• F:\Baiker\node_modules@vuepress\cli\lib\commands\build\index.js
• F:\Baiker\node_modules@vuepress\cli\lib\commands\index.js
• F:\Baiker\node_modules@vuepress\cli\lib\index.js
• F:\Baiker\node_modules\vuepress-vite\bin\vuepress.js
• F:\Baiker\node_modules\vuepress\bin\vuepress.js
  at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)
  at Function.Module._load (node:internal/modules/cjs/loader:769:27)
  at Module.require (node:internal/modules/cjs/loader:996:19)
  at require (node:internal/modules/cjs/helpers:92:18)
  at Object. (F:\Baiker\node_modules\vuepress-theme-antdocs\index.js:2:24)
  at Module._compile (node:internal/modules/cjs/loader:1092:14)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
  at Module.load (node:internal/modules/cjs/loader:972:32)
  at Function.Module._load (node:internal/modules/cjs/loader:813:14)
  at Module.require (node:internal/modules/cjs/loader:996:19)
  error Command failed with exit code 1.
  info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Centos服务器上打包 直接 killed

我在Centos服务器上把项目拉下来，vuepress/vuepress-theme-antdocs都安装了，执行vuepress build dosc

[root@lannis book2.0]# vuepress build docs
wait Extracting site metadata...
tip Apply theme vuepress-theme-antdocs ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/last-updated (i.e. "@vuepress/plugin-last-updated") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...
tip Apply plugin @vuepress/medium-zoom (i.e. "@vuepress/plugin-medium-zoom") ...
tip Apply plugin @vuepress/back-to-top (i.e. "@vuepress/plugin-back-to-top") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...

● Client █████████████████████████ building (69%) 715/716 modules 1 active
 css-loader › postcss-loader › less-loader › node_modules/[email protected]@vuepress-theme-antdocs/styles/index.less

● Server █████████████████████████ building (69%) 708/709 modules 1 active
 css-loader › postcss-loader › less-loader › node_modules/[email protected]@vuepress-theme-antdocs/styles/index.less

Killed
[root@lannis book2.0]#

我在centos上用vuepress-creator创建的项目也不能打包~~~vuepress本地也安装了，打包还是失败。。。

[root@lannis myproject]# npm run build

> [email protected] build /lannis/opt/myproject
> vuepress build docs

wait Extracting site metadata...
tip Apply theme vuepress-theme-antdocs ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/last-updated (i.e. "@vuepress/plugin-last-updated") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...
tip Apply plugin smooth-scroll (i.e. "vuepress-plugin-smooth-scroll") ...

● Client █████████████████████████ building (69%) 625/627 modules 2 active
 node_modules/ant-design-vue/es/_util/requestAnimationTimeout.js

● Server █████████████████████████ building (69%) 590/592 modules 2 active
 node_modules/ant-design-vue/es/time-picker/locale/en_US.js

Killed
[root@lannis myproject]#

咋搞哦。、、

跑不起来？

问题描述

依据 vuepress官方教程搭建出最基本的项目结构之后，跑 docs:dev 命令可以正常运行，接着在项目根目录执行 yarn add vuepress-theme-antdocs ,并且在 config.js配置主题之后，再运行就报错。报错如下：

目录结构

project
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

config.js

module.exports = {
    title: 'Hello VuePress',
    description: 'Just playing around',
    theme: 'antdocs'
}

版本信息

Mac OS: 10.14.6 (18G95)
yarn: 1.22.0
vuepress: @1.1.0
AntDocs: ^0.1.0-beta

内存占用过高

谷歌浏览器 Firefox 都有同样问题， 内存占用一直往上涨，高达8个g左右也不知道是啥问题导致的

关于 AntDocs 2.0 的发布时间

请问作者现阶段 AntDocs 2.0 的开发计划有一定的 Schedule 了吗？能透露下大概的发布时间吗？谢谢。

sidebar子目录配置

你好！我们的项目采用了Antdocs，但需要配置sidebar子目录，请问应该如何实现？

关于预处理器 less

想问一下 是否只能用less 可以用sass/scss 吗？

Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'

Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'

footer add ico

for chinese gov something special reasons, put on record to ICP or public security department need in footer add the hyperlink and ico.

Feat: 首页主次级图标区分

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
目前首页的主次级按钮都用的是 ghost 属性的 a-button，区分性较差。既然是主次级按钮，我个人认为在样式上需要有区分。因此，主按钮采用默认 primary，次按钮采用 primary ghost 的方案应该更好。

Describe alternatives you've considered
(No)

Additional context
(empty)

markdown中没有Heading标签 content 被导航遮挡

Describe the bug
历史问题 markdown里没有Heading elements, index.less first-child rem设置失效

https://github.com/zpfz/vuepress-theme-antdocs/blob/master/styles/index.less#L156

建议 把 margin-top 配置到page class,跟sidebar一直
https://github.com/zpfz/vuepress-theme-antdocs/blob/master/components/Page.vue#L27

能多加一些使用 Antd的案例吗

干接触不久，希望作者能在 Markdown 中使用 Antd加入更多的案例，例如icon和表格，感激不尽:smile:

新版本的代码区块样式问题

Describe the bug
A clear and concise description of what the bug is.
开启代码的行号时，看到这边的行号样式是白色

修改样式之后有很明显的错位

To Reproduce
Steps to reproduce the behavior:

Expected behavior
A clear and concise description of what you expected to happen.

System Info

• VuePress version: 1.8.2
• Antdocs version: 1.3.2
• Node version:
• OS version:

Additional context
Add any other context about the problem here.

希望添加文章标题目录

文章标题目录集成在侧边栏，用户可以通过点击文章内的目录快速跳转文章内的位置
但是侧边栏的内容是一个分类下的所有文章目录
可以在侧边栏内增加类似目录的前进后退
大概找了一下，类似vdoing主题的侧边栏效果
https://github.com/xugaoyi/vuepress-theme-vdoing

这些样式md源码是怎么写的？看起来很美观，可以给个说明写在antdocs文档里面吗？

更新日志的千竹节是怎么做出来的，怎样才能显示这样的提示、建议框？

侧边栏分组的组标题可以有吗

侧边栏需要分组，需要有一个组标题用来提示以及隔断。这个应该怎么配置。
谢谢

细节完善

markdown最好能设置成左右对齐, 现在行尾参差不齐就很难受...

另, 有一个主题叫vuepress-theme-teadoc, 可以参(zhao)考(chao)一下, 非常流畅.
我现在的文档就是用的它的主题 lammps.org.cn, 我觉得现阶段要比这个更好一些

内容区域分栏怎么实现呢？

例如这个文档：https://www.uviewui.com/components/install.html

请教为什么图片会生成俩次

图片存放位置：
E:\xxxx\docs.vuepress\public\img

通过yarn run docs:build 构建

会发现dict文件夹中存在俩个img图片位置
第一个位置

第二个位置（实际网站只用到这个）

请问如何让他图片只生成一次呢，图片太占用空间了

[Modify] 优秀案例信息更正

首先，感谢作者提供如此优秀的主题！

在官方网站上面的优秀案例部分，其中第一个：老孟的网站

创建者变更为:xieyezi，因为该项目是本人搭建的。
以上，谢谢支持！

默认显示GIthub图标，无法修改成GItLab

什么时候支持下

如何关掉主题的搜索功能？

最后更新时间没有出来额

这是我的配置文件:
// config.js

module.exports = {
  title: "xieyezi", //左上角的博客标题以及网站显示的标题
  description: "使用vuepress搭建的个人博客",
  theme: "antdocs",
  head: [
    ["link", { rel: "icon", href: "/favicon.ico" }], // 增加一个自定义的 favicon(网页标签的图标)
    [
      "meta",
      {
        name: "viewport",
        content: "width=device-width,initial-scale=1,user-scalable=no",
      },
    ],

    [
      "link",
      {
        rel: "stylesheet",
        href: "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css",
      },
    ],
  ],
  themeConfig: {
    //主题配置项
    logo: "/logo.png",
    smoothScroll: true, //平滑滚动
    sidebarDepth: 1,
    editLinks: true, // 编辑链接
    editLinkText: "帮助我改善这个页面", // 链接字段
    lastUpdated: "最后更新时间", // 最后更新时间
    backToTop: true,
    nav: [
      //导航栏
      { text: "Home", link: "/" },
      { text: "Flutter", link: "/flutter/" },
      { text: "Vue", link: "/vue/" },
      { text: "React", link: "/react/" },
      { text: "Typescript", link: "/typescript/" },
      { text: "Javascript", link: "/javascript/" },
      { text: "Docker", link: "/docker/" },
      {
        text: "Conatact",
        items: [
          {
            text: "Github",
            link: "https://github.com/xieyezi",
          },
          {
            text: "QQ",
            link: "https://github.com/xieyezi",
          },
          {
            text: "WeChat",
            link: "https://github.com/xieyezi",
          },
        ],
      },
    ],
  },

  plugins: [
    //美化相关：
    ["cursor-effects"], //鼠标点击特效
    ["vuepress-plugin-reading-progress"], //顶部进度条
    [
      "vuepress-plugin-code-copy",
      {
        color: "#6D7EAD",
        successText: "🌈复制成功！🌈",
      },
    ],
    // ["go-top"],  悬挂猫返回顶部,yarn add -D vuepress-plugin-go-top

    //功能添加：
    [
      "vuepress-plugin-auto-sidebar",
      {
        titleMode: "uppercase",
      },
    ], //自动生成侧边栏
    [
      "permalink-pinyin",
      {
        lowercase: true,
        separator: "-",
      },
    ], //转换链接汉字为英文的插件
  ],
};

期望效果：
在文章右下角出现“最后更新时间”

侧边栏怎么配置自动生成

我看代码应该是满足这个条件的 你的文档好像也没有细说

代码怎么启动？

package.json里没有看到script,请问怎么启动代码预览呢？

Cannot read properties of undefined (reading 'getState')

Describe the bug
启动工程后，报一堆路由问题，但是能正常使用

导航栏配置 `target="_blank"` 和官方的主题行为不一致。

Describe the bug
导航栏配置 target="_blank" 和官方的仓库行为不一致。

To Reproduce

module.exports = {
    themeConfig: {
        nav: [{ text: 'API', link: '/doxy/index.html', target:'_blank' }]
    }
}

Expected behavior
应该在新页面打开，而且该导航栏应该被当作 External Link。

System Info

• VuePress version: 1.9.7
• Antdocs version: latest version (github main branch)
• Node version: v19.2.0
• OS version: macOS 12.6.2

Additional context
相关代码可能如下：https://github.com/vuejs/vuepress/blob/38e98634af117f83b6a32c8ff42488d91b66f663/packages/%40vuepress/theme-default/components/NavLink.vue#L57

vuepress-theme-antdocs/components/NavLinks.vue

Line 120 in 5303fde

return Reg.test(path);

在style.less内不能覆盖原有样式

我在.vuepress/styles/style.less文件内编写样式
执行yarn docs:dev后
发现并不能覆盖原有的样式，我需要在哪里编写样式才可以覆盖原有样式。