vuepress-theme-hope / vuepress-theme-hope

A vuepress theme with tons of features✨

vuepress-theme-hope

A VuePress theme with tons of features✨

中文简介 | Russian README

A VuePress theme with tons of features✨

English Docs

Online Demo

Special Sponsor

Contact

We recommend you to contact using issues and discussions, but you are welcome to join our telegram group!.

Details

V2 is based on VuePress2, with the power of Vite5 / Webpack5 using Vue3 to provide powerful features.

V2 is a full rewrite including:

• All the components are rewritten with Composition API in Vue3
• All the styles are migrated to Sass

Also V2 has a better performance:🚀

• DevServer cold start time reduced by 70%
• Build memory usage reduced by 65%
• Build time reduced by 75%
• Output Size reduced by 45%
• Webpage performance up to 60%

Project Status

Contributors

Thanks to all the contributors!

Stargazers over time

vuepress-theme-hope's Issues

打包运行卡百分之40%

之前有个语言不存在的原因找到了是因为我的markdown使用了不支持的语言语法

另外一个问题是，我开发运行，和打包都会出现卡40%的情况，官方的是不会，这个卡住经验来看不是因为文件多。具体原因未知，不知道作者有没有这样的情况。卡到40%是可以运行起来和打包，需要几分钟的时间才能完成。

Can not work on Linux

Status

Waiting for the official response...

Has already create an issue on vuepress repo

Behavior

Most of the features can not work on Linux.

It's probably because of theme extending or monorepo or both of theme. Personally thought is a vuepress bug.

Current work around

Use windows to build your website and deploy it.

[Feature Request] Add AddThis

Hi there, would mind adding ShareThis for these social share buttons on the left. Only the content after pubid change.

Custom Container for Details does not get highlighted.

Hi,

If we use the following custom container.

::: details
This is a details block, which does not work in IE / Edge
:::

Then we get the following view

which should Ideally be something like

Thanks

[Discussion] Potential enhancements.

Proposed Enhancements

• Add switching animation when transiting from guide to homepage as well

• Possible way to configure code fences to use dark colors in global light theme.

• Configurable font size and typography for better utilization of space, for eg : https://nuxtjs.org/guide

• Alternative logo in the navigation bar for dark mode.

• The default search could be extended using flexsearch to include full text search without the need for algolia for private documentation as is being done by vuepress-plugin-fulltext-search

[Feature Request] Add option to change icon's style in dark/light mode

Hi there, I have seen that the theme have setting to display another logo in dark mode, would you mind adding a setting to display another icon in darkmode like this
icon:"sth"
darkIcon: "some others things" //Display another icon in darkmode
Thanks

Unable to build the docs

Hi,

I am able to successfully run it in dev mode. However as soon as I try to build the docs I get a long list of failures. Pasting only a part of it -

(undefined) /media/e0lithic/D/GameX/src_generic/release_tools/Test2/tsconfig.json
[tsl] ERROR
      TS2688: Cannot find type definition file for 'node_modules/@mr-hope/vuepress-theme-types'.
(undefined) /media/e0lithic/D/GameX/src_generic/release_tools/Test2/tsconfig.json
[tsl] ERROR
      TS2688: Cannot find type definition file for 'node_modules/vuepress-types'.
(undefined) /media/e0lithic/D/GameX/src_generic/release_tools/Test2/node_modules/@mr-hope/vuepress-plugin-components/src/enhanceAppFile.ts
[tsl] ERROR in /media/e0lithic/D/GameX/src_generic/release_tools/Test2/node_modules/@mr-hope/vuepress-plugin-components/src/enhanceAppFile.ts(3,28)
      TS2307: Cannot find module 'vuepress-types'.
(undefined) /media/e0lithic/D/GameX/src_generic/release_tools/Test2/node_modules/@mr-hope/vuepress-plugin-pwa/src/enhanceAppFile.ts
[tsl] ERROR in /media/e0lithic/D/GameX/src_generic/release_tools/Test2/node_modules/@mr-hope/vuepress-plugin-pwa/src/enhanceAppFile.ts(2,28)
      TS2307: Cannot find module 'vuepress-types'.

As mentioned in the documentation I have already added typescript and the following to tsconfig.json

{
    "compilerOptions": {
      "target": "ES6", /// Any target which is not less than 'ES5'
      "experimentalDecorators": true, // Typescript files for '.vue' needs this option
      "allowSyntheticDefaultImports": true,
      // type definition files of vuepress and this theme
      "types": ["@mr-hope/vuepress-theme-types","vuepress-types"]
    },
    "include": [
      "docs/.vuepress/enhanceApp.ts" // replace `src` with your doc folder
    ]
}

And the file enhanceApp.ts is empty as mentioned in the guide. Could you please point out where I am going wrong?

新版本构建报错[Bug]

(undefined) ./node_modules/vuepress-theme-hope/components/SidebarLink.vue?vue&type=script&lang=ts& (./node_modules/cache-loader/dist/cjs.js??ref--15-0!./node_modules/ts-loader??ref--15-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vuepress-theme-hope/components/SidebarLink.vue?vue&type=script&lang=ts&)
Module not found: Error: Can't resolve '@theme/util/sidebar' in '/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/components'
resolve '@theme/util/sidebar' in '/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/components'
Parsed request is a module
using description file: /Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/package.json (relative path: ./components)
aliased with mapping '@theme': '/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope' to '/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/util/sidebar'
using description file: /Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/package.json (relative path: ./components)
using description file: /Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/package.json (relative path: ./util/sidebar)
no extension
/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/util/sidebar doesn't exist
.js
/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/util/sidebar.js doesn't exist
.jsx
/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/util/sidebar.jsx doesn't exist
.vue
/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/util/sidebar.vue doesn't exist
.json
/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/util/sidebar.json doesn't exist
.styl
/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/util/sidebar.styl doesn't exist
.ts
/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/util/sidebar.ts doesn't exist
as directory
/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/util/sidebar doesn't exist
[/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/util/sidebar]
[/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/util/sidebar.js]
[/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/util/sidebar.jsx]
[/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/util/sidebar.vue]
[/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/util/sidebar.json]
[/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/util/sidebar.styl]
[/Users/js/Desktop/workspace/code/node_modules/vuepress-theme-hope/util/sidebar.ts]
@ ./node_modules/vuepress-theme-hope/components/SidebarLink.vue?vue&type=script&lang=ts& (./node_modules/cache-loader/dist/cjs.js??ref--15-0!./node_modules/ts-loader??ref--15-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vuepress-theme-hope/components/SidebarLink.vue?vue&type=script&lang=ts&) 23:16-46
@ ./node_modules/vuepress-theme-hope/components/SidebarLink.vue?vue&type=script&lang=ts&
@ ./node_modules/vuepress-theme-hope/components/SidebarLink.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--15-0!./node_modules/ts-loader??ref--15-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vuepress-theme-hope/components/SidebarLinks.vue?vue&type=script&lang=ts&
@ ./node_modules/vuepress-theme-hope/components/SidebarLinks.vue?vue&type=script&lang=ts&
@ ./node_modules/vuepress-theme-hope/components/SidebarLinks.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--15-0!./node_modules/ts-loader??ref--15-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vuepress-theme-hope/components/Sidebar.vue?vue&type=script&lang=ts&
@ ./node_modules/vuepress-theme-hope/components/Sidebar.vue?vue&type=script&lang=ts&
@ ./node_modules/vuepress-theme-hope/components/Sidebar.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--15-0!./node_modules/ts-loader??ref--15-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vuepress-theme-hope/components/Common.vue?vue&type=script&lang=ts&
@ ./node_modules/vuepress-theme-hope/components/Common.vue?vue&type=script&lang=ts&
@ ./node_modules/vuepress-theme-hope/components/Common.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--15-0!./node_modules/ts-loader??ref--15-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vuepress-theme-hope/layouts/404.vue?vue&type=script&lang=ts&
@ ./node_modules/vuepress-theme-hope/layouts/404.vue?vue&type=script&lang=ts&
@ ./node_modules/vuepress-theme-hope/layouts/404.vue
@ ./node_modules/.temp/internal/layout-components.js
@ ./node_modules/@vuepress/core/lib/client/util.js
@ ./node_modules/@vuepress/core/lib/client/app.js
@ ./node_modules/@vuepress/core/lib/client/serverEntry.js
@ multi ./node_modules/@vuepress/core/lib/client/serverEntry.js
Error: Failed to compile with errors.
at /Users/js/Desktop/workspace/code/node_modules/@vuepress/core/lib/node/build/index.js:180:16
at finalCallback (/Users/js/Desktop/workspace/code/node_modules/webpack/lib/MultiCompiler.js:254:12)
at /Users/js/Desktop/workspace/code/node_modules/webpack/lib/MultiCompiler.js:277:6
at done (/Users/js/Desktop/workspace/code/node_modules/neo-async/async.js:2931:13)
at runCompilers (/Users/js/Desktop/workspace/code/node_modules/webpack/lib/MultiCompiler.js:181:48)
at /Users/js/Desktop/workspace/code/node_modules/webpack/lib/MultiCompiler.js:188:7
at /Users/js/Desktop/workspace/code/node_modules/webpack/lib/MultiCompiler.js:270:7
at finalCallback (/Users/js/Desktop/workspace/code/node_modules/webpack/lib/Compiler.js:257:39)
at /Users/js/Desktop/workspace/code/node_modules/webpack/lib/Compiler.js:273:13
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/js/Desktop/workspace/code/node_modules/tapable/lib/HookCodeFactory.js:33:10), :33:1)
at AsyncSeriesHook.lazyCompileHook (/Users/js/Desktop/workspace/code/node_modules/tapable/lib/Hook.js:154:20)
at onCompiled (/Users/js/Desktop/workspace/code/node_modules/webpack/lib/Compiler.js:271:21)
at /Users/js/Desktop/workspace/code/node_modules/webpack/lib/Compiler.js:681:15
at eval (eval at create (/Users/js/Desktop/workspace/code/node_modules/tapable/lib/HookCodeFactory.js:33:10), :11:1)
at /Users/js/Desktop/workspace/code/node_modules/ts-loader/dist/after-compile.js:36:9
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/js/Desktop/workspace/code/node_modules/tapable/lib/HookCodeFactory.js:33:10), :7:1)
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c vuepress build docs
Directory: /Users/js/Desktop/workspace/code
Output:
".

Code Fences syntax fails when themeColor: false

Hi,

It seems that if I set themeColor: false in order to enable the default green color for the theme, then the syntax highlighting of the code fences gets disabled.

Thanks

页面滚动的时候，侧栏的锚点标题没有对应激活

1、页面滚动的时候，侧栏的锚点标题没有对应激活

2、切换主题色的时候，滚动条的颜色没有变

看了你的主题，感觉非常好看。如果能加上这个功能就更好了...

目前的侧栏会把文章和文章下面的标题提取出来放到侧边栏，形成树结构。

但是这样会显得有些混乱，尤其是在层级比较多的情况下。

所以希望提供这样的功能选项：

左侧只显示文章列表，
文章的右侧给一片固定的区域展示文章内部提取出来的标题结果。

有一些例子可以参考一下：
https://d.umijs.org/guide/control-route-generate

https://www.yvescoding.com/rcpress/config/

类似这种

[Bug] Issue with vssue

Hi there. This is my source code and my website
Although I have added like this into .vuepress/config.js:

  themeConfig: {
    comment: {
      type: "vssue",
      platform: "gitlab",
      owner: "LocTran016",
      repo: "present",
      clientId: "396e9e1a6cfa32611e7710f8676a288c034a3eb2c85836b7e08eed2389ea0a78",
      autoCreateIssue: true,
    }, }

But vssue comment system still doesn't work. Can you help me with this? Thanks

pc文章目录缩放到小屏才能显示全部的toc文章目录

大屏

小屏

[Feature Request] 不知可不可以根据PWA制作消息推送

使用Notification API来进行消息提醒

There is a build error.

I upgrade to latest version and try to build my doc, i got an error.

look's like your @mr-hope/vuepress-plugin-comment is dependencies on "leancloud-storage": "^4.6.1".

The color of scroll bar didn't change when I choice a theme mode

The color of scroll bar didn't change when I choice a theme mode.

But it workes after refresh manually.

运行的时候会出现语言不存在并且打包时间很长

启动项目的时候，会报语言不存在，并且打包非常慢

Fix: update tsconfig.json target in offical docs please

When running yarn build, the terminal prompts TS1056: Accessors are only available when targeting ECMAScript 5 and higher

{
  "compilerOptions": {
    "target": "es5",
    "experimentalDecorators": true,
    "types": [
      "@mr-hope/vuepress-theme-types"
    ]
  },
  "include": [
    "src/.vuepress/enhanceApp.ts"
  ]
}

[Bug] 无法构建 0.6.8也是同样的问题

Describe the bug
能启动项目，白屏，浏览器控制台报错

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

[Feature Request] 希望支持官方Google Analytics插件

Describe the feature and why you wanted
希望能够支持官方提供的Google Analytics插件
@vuepress/plugin-google-analytics

0.6.9主题色配置无效[Bug]

0.6.9主题色配置无效，

构建之后，颜色列表变成了一个，之前设置的主题色也变成了默认的绿色。

建议将夜间模式做成 自动、白天、夜间 三个选项

就像上图一样

如何使用百度统计

上次Google Analytic可以使用
打算加入百度统计
因为VuePress是单页的，添加好像要改不少东西，有相关插件吗

建议在页面元信息里面加入是否原创的配置项[Feature Request]

如题

使用默认中文语言的时候报错

这里读取的是小写的键值，而默认配置提供的键值是有大写的。
这个问题好久了，希望尽快恢复

[Bug] lastUpdated not hiding

Describe the bug
When setting lastUpdated to false in the themeConfig it continues to show up on the bottom of the page.

Here is what my config.js looks like, this is a new project too, so I only have vuepress and theme-hope as packages.

const resolve = require('vuepress-theme-hope/resolve')

module.exports = resolve({
  title: 'Example',
  description: 'Just playing around',
  baseLang: 'en-US',
  themeConfig: {
    author: 'Example Contributors',
    repo: 'https://github.com/example',
    fullscreen: false,
    pageInfo: false,
    editLinks: false,
    lastUpdated: false,
    footer: {
      display: true
    },
    search: false,
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Plugins', link: '/plugins/' },
      { text: 'Support', items: [
        { text: 'F.A.Q', link: '/faq' },
        { text: 'Terms', link: '/terms-of-use' }
      ]}
    ]
  }
})

[Feature Request] Add reveal.js

Describe the feature and why you wanted
Hi there, thanks for your wonderful theme. It look extremly good. Would mind adding reveal.js, used for creating presentation on the web. May be it could have a frontmatter like this: layout:slide for those post you want to intergrate reveal.js. Thanks

TODO: Rebuild theme-color

The new theme-color function will use css vars and prefer-color-scheme

05-25更新的开发好像有点问题

启动比之前更加慢了，然后启动到控制台报了这个错误。

[Note] Attention when using fontawesome

For those who use fontawesome, please add these lines to your index.styl:

.iconfont
  &.fa, &.fas
    font-weight 900

Allow users to config the hightlight theme for code blocks

I will work on this feature after finish building hopepress.

Bug: article sort issue.

The theme now has bugs on sorting the articles.

dark mode is gone

dark mode is gone in the latest version.

设置主题不生效

npm安装出错 于是我用了 yarn add -D vuepress-theme-home，然后设置 theme: ‘hope’,但是仍为默认主题

[Feature Request] Add way to change the prefix for each icon

Describe the feature and why you wanted
Hi there, in Font Awesome 5 have different prefix for the icon, would you mind adding feature that can add prefix to each icon
For example:
We will use icon: "fab-accusoft" instead of:

icon: "accusoft"
    iconPrefix: "fab-",

建议去除用户端的 typescript 强依赖

使用 ts 来开发 vuepress 主题是主题开发者的技术栈选择问题。
但 ts 不该成为主题使用者必须要使用的特性和依赖

就像我写一个 ts 写一个 npm 包，最终打包出来给用户使用的一定是一个编译之后的 js 文件

大部分用户使用 vuepress 只是想简单写文档，他们不想也不应该关心 ts 依赖和配置的问题

Roadmap: Rebuild in vitepress

Vite is stable now and Evan You is developing vitepress now.

Vitepress is using Vue3 and vite, and it's performance is quite good.

I am going to migrate to vitepress as soon as it's stable.

代码块高亮有样式 bug [Feature Request]

描述：
代码块中，当前的高亮主题会导致标点符号（===, +, - 等）的背景色是白色，视觉上不美观。（夜间模式无此问题）

期望：
应该是高亮插件的主题问题，是否可以调节成其他样式兼容性较好的主题色。

拓展：
如果能在 themeOptions 中支持代码块高亮插件的主题选择就更好了。

Add your theme to official Projects-using-vuepressplugin-blog

I propose to add your theme to the Projects Using @vuepress/plugin-blog listing at official vuepress-plugin-blog.

Thanks for providing such a great theme!

照你的教程安装主题，各种报错

1. 提示 typescript 模块没有找到，然后我安装了 typescript

我的配置

const resolve = require('vuepress-theme-hope/resolve');

module.exports = resolve({
  base: '/vue-code/',
  title: 'vue-next analysis',
});

tsconfig.ts

{
  "compilerOptions": {
    "types": [
      "@mr-hope/vuepress-theme-types",
      "vuepress-types"
    ]
  },
  "include": [
    // 这个 ts 文件从哪儿来的？后来我把这行删掉还是报错
    "src/.vuepress/enhanceApp.ts"
  ]
}

Line numbers are not aligned with the code in the code block

Browser: Edge
OS: Windows 10

By the way, I realllllly hope you can publish your plugin of Dark Mode! I LOVE this feature. Please ASAP, thank you very much 😃

[Feature Request] Icon list

Hi there, do you mind adding the list of supported icon (may be look like the picture below) please. Thanks

Add header anchor when on desktop view

We are going to move the headers to the right side of the screen on desktop mode.

The final apprence may look like this:

Allow the image being zoomed in mobile view

[Query] Dim non focused area.

Hi,

First of all thanks for the great work.

Is there a way we can dim other areas of the screen when the user is reading or scrolling through the main content. As is done in the case of nuxt.js documentation.

Thanks

有序列表未与正文对齐

[Bug] Issue with my site

Describe the bug

Hi there. I've added a themeConfig.hostname but the sitemap still doesn't work

Screenshots

Additional context

• My repo
• My site

修改主题色之后刷新浏览器报错[Bug]

更改了颜色，然后刷新，你的主题从localstorage里面读取theme这个值就会报错。
这是你的博客报的错

[Query] Best way to change the logo based on dark mode.

Hi,

Is there a way we can programmatically change the logo (e.g logo-light.png vs logo-dark.png) based on the dark mode?

Thanks

Setting footer.display to false not working

Hi,

• The documentation says that the footer.display config has a default value of false, however still the footer shows on all pages
• Setting footer.display to false in config.js has no effects and still the footer is displayed.

Thanks