vuepress-reco/vuepress-theme-reco

🎨 This is the repo for vuepress-theme-reco 2.

🔥 vuepress-theme-reco

This is reco theme 2.0, and the 1.0 repository has been migrated to vuepress-theme-reco-1.x

In the past, theme reco has been supported by many friends, I am very honored, it changed my life, and I also made a lot of friends. But I don't think it is professional and flexible, and sometimes some advanced features require certain professionalism. I know that this is not easy for some Non-FE professional friends.

Some functions of [email protected] refer to the default theme of [email protected], but it is no longer magically changed on the default theme like 0.x and 1.x. This is a new set of solutions, such as The style adopts the tailwindCSS scheme, and the page extension capability is realized through the plugin @vuepress-reco/vuepress-plugin-page.

At the same time, you must rely on this document to configure your project. You cannot compare it with the official default theme document, because only a small amount of configuration overlaps with the official default theme document.

Please move Demo and Docs to play!

Quick Start

npx

# Init，and choose 2.x
npx @vuepress-reco/theme-cli init

npm

# Init，and choose 2.x
npm install @vuepress-reco/[email protected] -g
theme-cli init

yarn

# Init，and choose 2.x
yarn global add @vuepress-reco/[email protected]
theme-cli init

Preview

Alpha Todo List

Functions

• 自定义首页功能
• nprogress 插件
• back-to-top 插件
• comment 插件（目前仅支持 valine，vssue 还没有支持 Vue3）
• container 插件
• 公告 插件
• 代码预览 插件
• 按照文件夹自动进设置 categories
• 提供 tailwind 自定义 config 入口（后续官方所有风格和插件均采用 css + taiwindcss 方案）
• 根据 tag 生成神经网络图（参考 obsidian）
• 加密功能
• loading 功能
• 增加 icon 功能
• 提供自定义任意页面的 API

Optimizations

• 完善文档
• 侧边栏样式优化
• 去除 scss，采用 css + postcss 方案
• PWA 样式优化

Beta Todo List

• 增加 icon 功能
• 整站加密
• 提供 tailwind 自定义 config 入口（后续官方所有风格和插件均采用 css + taiwindcss 方案）
• PWA 样式优化
• algolia 搜索样式优化
• comment 插件增强
• 增加图片适配暗色模式的配置
• 对指定文件夹进行功能支持，比如 series、docs、blogs

Contributors

P.S. Thanks to the two beauties for their contributions to the theme logo: Zoey and 冰冰.

vuepress-theme-reco's Issues

2.0.0-beta.6，本地运行无问题，打包失败，报错

  "dependencies": {
    "vuepress": "^2.0.0-beta.46",
    "vuepress-theme-reco": "^2.0.0-beta.6"
  }

切换到webpack打包还是失败，报错

底部foot无法修改

底部该内容无法修改

如何实现左边侧边栏三级菜单

如题，在reco的主题中如何才能实现左边的侧边栏可以展示三级菜单？

无法使用中文路径

Describe the bug
A clear and concise description of what the bug is.
使用中文路径或者中文名的md文件就会报错
To Reproduce
Steps to reproduce the behavior:

# 1. 安装主题脚手架
npm install @vuepress-reco/theme-cli -g
# 2. 初始化
theme-cli init
# 3. 初始化后install，然后启动项目
npm install &&npm run dev
# 4. 修改初始化好的md文件，比如把docs/theme-reco/api.md 修改为   接口.md

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

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Manjaro 21.0
• Browser Chrome 90
• Version "vuepress-theme-reco": "1.6.10"

Additional context
Add any other context about the problem here.

vue-router.esm.js?8c4f:2316 RangeError: Maximum call stack size exceeded
    at eval (vue-router.esm.js?8c4f:2171:1)
    at Array.map (<anonymous>)
    at eval (vue-router.esm.js?8c4f:2171:1)
    at Array.map (<anonymous>)
    at flatMapComponents (vue-router.esm.js?8c4f:2170:1)
    at extractGuards (vue-router.esm.js?8c4f:2479:1)
    at extractLeaveGuards (vue-router.esm.js?8c4f:2502:1)
    at HTML5History.confirmTransition (vue-router.esm.js?8c4f:2346:1)
    at HTML5History.transitionTo (vue-router.esm.js?8c4f:2260:1)
    at HTML5History.push (vue-router.esm.js?8c4f:2606:1)

加油！

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

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.

[1.x] 解决中文路由问题后，链接太长，可以优化吗？

这个应该是vuepress的问题，vue-theme-reco是基于vuepress的。可以通过安装vuepress-plugin-permalink-pinyin来解决这个问题。

这个插件并不是特别好用，会出现其他的兼容性问题。我之前也遇到这个问题了，我的版本是1.6.10

@Eastboat @ChenSino

解决办法参看我之前写的这篇文章：
https://www.duktig.cn/2022/01/21/%E5%9F%BA%E4%BA%8Evuepress%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F%E5%8F%8A%E4%BC%98%E5%8C%96%E8%BF%87%E7%A8%8B-%E6%8C%81%E7%BB%AD%E6%9B%B4%E6%96%B0/#_1-md%E6%96%87%E4%BB%B6%E5%90%8D%E6%9C%89%E4%B8%AD%E6%96%87%E4%B8%8D%E8%83%BD%E6%AD%A3%E5%B8%B8%E8%B7%AF%E7%94%B1%E8%B7%B3%E8%BD%AC

文末的 问题1

但是会有一个新的不好的地方是 链接太长了……

解决：
添加文件.vuepress/enhanceApp.js

export default (ctx) => {
  const routes = ctx.router.getRoutes()
  
  ctx.router.beforeEach((to, from, next) => {
    // 解决decode后反复重定向的问题
    const route = routes.find((v) => v.regex.test(to.path))

    // .html有重定向路由，无需特殊处理
    if (/\.html$/.test(to.path)) {
      return next()
    }

    // 不特殊处理 非通配符的 没有重定向的路由
    if (route && route.path !== '*' && !route.redirect) {
      return next()
    }

    // 解决中文标签/分类路由无法被正确加载的问题
    if (decodeURIComponent(to.path) !== to.path) {
      return next(
        Object.assign({}, to, {
          path: decodeURIComponent(to.path),
          fullPath: decodeURIComponent(to.fullPath)
        })
      )
    }

    next()
  })

  // 临时解决，防止内部调用钩子再处理
  ctx.router.beforeEach = () => {
    return
  }
}

Originally posted by @duktig666 in #23 (comment)

在文章详情页，back-top 点击无反应！

猜测应该是侧边栏挡住了，如果可以的话，建议 back-top 不要太靠边，放到文章和侧边栏的中间就好了，方便点。

分类和标签如果有用到中文，点击时页面不存在

1. 在首页的博客列表中如果有中文标签或者分类，直接从博客列表中点击分类或标签页面不存在。如果是从首页的个人信息下面的分类或标签中点击是没问题的，看了下此处页面路由是拼音，但是在博客列表中的分类或标签在页面上路由显示是中文
2. 如果在导航栏有设置分类和标签，从导航样点击分类或标签时页面不存在
3. 建议向hexo一样通过命令生成自带当前时间或标签、分类的md文件

[1.x] 侧边栏样式问题

版本1.6.11
大佬，我开启了将所有标题都存为锚点的功能，主题里的侧边栏样式错误了，ToT

 markdown: {
        lineNumbers: true,
        extractHeaders: [ 'h2', 'h3', 'h4' ,'h5', 'h6' ],
        toc: { includeLevel: [ 2 , 3 , 4 , 5 , 6 ] },
    },

## 111

### 111

#### 如何将111

##### 如何将222

###### 如何将333

12312312asda阿斯顿阿达阿达

## 111

### 111

#### 如何将111

##### 如何将222

###### 如何将333

12312312asda阿斯顿阿达阿达

[2.x] 首页分页无法切换

代码块高亮行错误

Describe the bug
代码块高亮行错误

To Reproduce

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

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

categories 设置中文 自动转化为拼音

categories 设置中文 分类链接自动转化为拼音

...
categories:
  - 生活
...

自动转化为shenghuo

[2.x]build出问题

moduleIdentifier: "/Users/sicko/blog/test-blog/sicko's blog/.vuepress/.temp/internal/clientAppEnhances.js",
  moduleName: './.vuepress/.temp/internal/clientAppEnhances.js',
  loc: '1:65',
  message: 'Module parse failed: Unexpected token (1:65)\n' +
    'You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\n' +
    "> import clientAppEnhance0 from '/Users/sicko/blog/test-blog/sicko's blog/node_modules/@vuepress/plugin-theme-data/lib/client/clientAppEnhance.js'\n" +
    "| import clientAppEnhance1 from '/Users/sicko/blog/test-blog/sicko's blog/node_modules/@vuepress/plugin-search/lib/client/clientAppEnhance.js'\n" +
    "| import clientAppEnhance2 from '/Users/sicko/blog/test-blog/sicko's blog/node_modules/@vuepress/plugin-external-link-icon/lib/client/clientAppEnhance.js'",

Error: Failed to compile with errors at /Users/sicko/blog/test-blog/sicko's blog/node_modules/@vuepress/bundler-webpack/lib/build/createBuild.js:37:28 at /Users/sicko/blog/test-blog/sicko's blog/node_modules/webpack/lib/webpack.js:148:8 at /Users/sicko/blog/test-blog/sicko's blog/node_modules/neo-async/async.js:2830:7 at done (/Users/sicko/blog/test-blog/sicko's blog/node_modules/neo-async/async.js:2865:11) at /Users/sicko/blog/test-blog/sicko's blog/node_modules/neo-async/async.js:2818:7 at /Users/sicko/blog/test-blog/sicko's blog/node_modules/webpack/lib/HookWebpackError.js:68:3 at _done (eval at create (/Users/sicko/blog/test-blog/sicko's blog/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1) at eval (eval at create (/Users/sicko/blog/test-blog/sicko's blog/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:34:22)
似乎没解决这个问题，版本均是最新的。

点击nav，控制台报错Cannot read properties of null (reading 'match')

好像谷歌浏览器才有这个报错，chrome版本 98.0.4758.102

[style-default] 首页刷新时 bannerBrand 按钮形状扭曲闪动

[style-default] 优化 toggleSidebarButton 样式

github pages部署时报错：FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

Describe the bug
github部署时出现 js内存溢出 这样的情况，具体报错如下：

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

这个vuepress主题的部署，也会遇到这样的问题吗？

主题版本：1.6.10

Desktop (please complete the following information):

• Browser [e.g. chromei]

1.x可以迁移到2.x吗

如果0.x到1.x有迁移文档的话，为什么1.x到2.x没有呢）

a 链接等颜色高亮失效

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

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

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

修复 npm 包的依赖关系

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

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

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

vuess加载失败

Describe the bug
[vuepress:sw] Error during service worker registration: TypeError: Failed to register a ServiceWorker for scope ('https://www.duktig.cn/') with script ('https://www.duktig.cn/service-worker.js'): ServiceWorker script evaluation failed

Desktop (please complete the following information):

• OS:win10
• Browser chrome

version:1.6.10

tags/categories配置不兼容字符串，报错 values.reduce is not a function

想迁移原来的hexo文章过来，识别front matter 的 tags/categories配置时报错，values.reduce is not a function， 我的对应配置不是数组，需要兼容

打包报错

大佬你好，打包的时候报错（似乎是ts的语法问题）

[1.x]将reco build后部署在静态server lighttpd上后访问页面，页面变成纯静态的

Describe the bug
将reco build后部署在静态server lighttpd上后访问页面，页面一直停留在 LoadingPage组件定义的图像，没有跳转到主页

To Reproduce
Steps to reproduce the behavior:

1. 在项目根目录执行 yarn docs:build
2. 将docs/.vuepress/dist目录放到lighttpd 指定文件夹下
3. 访问页面，
4. 页面一直停留在 LoadingPage组件定义的图像
5. 同时串口显示 “DOMException:Node.appendChild:can not add children to a comment”

Expected behavior
页面短暂停留 LoadingPage后，跳转至主页

Desktop (please complete the following information):

• OS: win10
• Browser:firefox
• Version [e.g. 22]

Additional context
新人一枚，对SSR项目部署有很多疑问，很好奇大家都是怎么部署的，直接部署到github上吗

暗色主题初始化闪屏

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

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

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

RSS添加需求

请求增加RSS模块

link为外链时，点击按钮或文字无无反应，不会跳转外链

link为外链时，点击按钮或文字无无反应，不会跳转外链（只有点击到旁边的外链标识才能正常跳转）

端口号修改

默认端口为8080，请问如何修改启动的端口号

[2.x] 使用的 CI 工具（GitHub Actions）自动部署报错

使用VuePress官网提供的配置文件，修改对应配置文件如下

打包期间会报一个错误

访问站点白屏，控制台报相同的错误

之前一直用的1.x版本可以正常部署

vssueConfig 中设置 showComment: false无效

按下方这样设置的。但所有文章下面都显示了评论

vssueConfig: {
      showComment: false,
      platform: 'github',
      owner: 'XX',
      repo: 'XX',
      clientId: 'XX',
      clientSecret: 'XX'	  
},	

初始化时总是从git中拉取文件失败，搭梯子也没用

能不能实现一个自动生成series啊

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

Describe the solution you'd like
能否根据文件树自动生成左侧边栏啊，这样对于页面很多的文档站会很有用

Describe alternatives you've considered
因为vuepress不再允许插件修改配置，目前我的想法是在文档生成之前先进行series生成然后写入config.ts，然后再进行构建，很明显这样的方法不够优雅

Additional context
嘤嘤嘤

[style-default] 添加特定功能的文件夹

1. docs 用于存放普通文档
2. blogs 用于存放博客，并可以自动设置 分类，其他目录的 md 文件不被收录
3. series 用于生成系列文档，并自动生成文档系列配置

部署到github page，渲染一下就白屏

Describe the bug
部署完，页面渲染一下然后就白屏了，build的时候有些提示，但是最后都success，console也没有打印报错

[1.x] 移动端的frontMatter的数据不显示

日期格式都是按照文档标准来填写的还是不显示，看了手机控制台日志爆错了，作者看到记得修复一下

cli初始化，报错，页面显示404

[style-default] 优化评论功能暗色模式适配

暗色模式代码导入 tab 字体颜色异常

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

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

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[beta-0.8]build出错，window not defined

拉的初始化项目，直接build报错，没有检验嘛？

valine 没有随路由切换而重置

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

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

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

按照2.0官网指导，初始化后报错，页面空白

按照2.0主题进行初始化后报错

npm install @vuepress-reco/[email protected] -g
theme-cli init

只有公告栏显示，主页面空白，控制台有2条报错信息：
ReferenceError: Cannot access 'clientAppEnhances' before initialization
Error: useRouteLocale() is called without provider.

日期解析异常

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

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

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Cli 初始化后运行一片空白，控制台有报错

第一次使用这个主题，使用 Cli 初始化项目后运行页面一片空白，查看控制台发现报错

项目依赖：

"name": "vuepress-theme-reco-demo",
"version": "2.0.0",
"description": "Demo for [email protected].",
"repository": "[email protected]:recoluan/vuepress-theme-reco-demo.git",
"author": "reco_luan <[email protected]>",
"license": "MIT",
"scripts": {
  "dev": "vuepress dev .",
  "start": "vuepress dev .",
  "build": "vuepress build ."
},
"dependencies": {
  "vuepress": "2.0.0-beta.39",
  "vuepress-theme-reco": "2.0.0-beta.5"
}

侧边栏过长的时候没法下滑

Describe the bug
A clear and concise description of what the bug is.

如图所示，侧边栏过长的时候就没法下拉了~

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

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

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

中文路径无效

Describe the bug
例如我有一个文件 Git笔记.md，它生成后的url路径为 localhost:8080/blogs/Git笔记.html
对于这种类似的url我点击它都是无效的

这是页面加载时的信息:
vue-router.esm.js?8c4f:16 [vue-router] Route with path "/blogs/Tools/Git笔记.html" contains unencoded characters, make sure your path is correctly encoded before passing it to the router. Use encodeURI to encode static segments of your path.

当我点击该链接的时候报错信息如下：
vue-router.esm.js?8c4f:16 [vue-router] uncaught error during route navigation:
warn @ vue-router.esm.js?8c4f:16
vue-router.esm.js?8c4f:1 RangeError: Maximum call stack size exceeded
at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2172:51)
at Array.map ()
at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2172:38)
at Array.map ()
at flatMapComponents (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2171:26)
at extractGuards (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2480:16)
at extractLeaveGuards (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2503:10)
at HTML5History.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2347:5)
at HTML5History.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2261:8)
at HTML5History.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2607:10)

navbar 高亮失效

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

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

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

火狐浏览器下建议隐藏文章sidebar滚动条

如题：当文章子标题内容过多的情况下，sidebar会出现滚动条影响页面美观，建议隐藏。

文章目录如何显示在左侧？

2.x版本初始化 ‘useThemeLocaleData() is called without provider’

解决valine评论不显示问题

表现：打开站点首页浏览数和valine 评论均不显示。

原因：是cdn.jsdelivr.net 挂了（具体原因自己查）。这个请求的av-min.js 是用于获取leancloud的服务。打开站点控制台可以看到错误。

解决：更换CDN服务地址；在本地库文件 valine.pure.min.js 和 valine.min.js 中修改：
//cdn.jsdelivr.net/npm/leancloud-storage@3/dist/av-min.js
为：
//unpkg.com/[email protected]/dist/av-min.js

打包部署，OK~ 正常啦！