xuek9900/vuepress-plugin-right-anchor

Right-anchor plugin for vuepres

vuepress-plugin-right-anchor

English ｜中文

Add anchor navigation bar to the right of the document page written in Vuepress 2.x

Version

• 2.x.x -> Vuepress 2.x -> npm next -> master branch
• 0.x.x -> Vuepress 1.x -> npm latest -> legacy branch

Features

• Simplify the structure of the left sidebar without losing the function of Title navigation within the page.
• Click anchor label page over scrolling.
• When the page scrolls, the corresponding anchor label follows the highlight.
• Non global component, which can be freely used in the page.

Install

yarn add vuepress-plugin-right-anchor@next
# or
npm i vuepress-plugin-right-anchor@next -D

Use

Add in .vuepress/config.js

module.exports = {
  // ...
  plugins: [
    // ...
    ['vuepress-plugin-right-anchor']
  ]
}

Style

Add in .vuepress/styles/index.scss

.right-anchor {
  --rightAnchorTextColor: var(--c-text);
  --rightAnchorFontSize: 14px;
  /* Btn */
  --rightAnchorBtnTextColor: var(--rightAnchorTextColor);
  --rightAnchorBtnBgColor: var(--c-bg);
  /* Menu */
  --rightAnchorMenuTextColor: var(--rightAnchorTextColor);
  --rightAnchorMenuBgColor: var(--c-bg);
}

/* dark theme */
.dark .right-anchor {
  --rightAnchorTextColor: var(--c-text);
  --rightAnchorFontSize: 14px;
  /* Btn */
  --rightAnchorBtnTextColor: var(--rightAnchorTextColor);
  --rightAnchorBtnBgColor: var(--c-bg);
  /* Menu */
  --rightAnchorMenuTextColor: var(--rightAnchorTextColor);
  --rightAnchorMenuBgColor: var(--c-bg);
}

Global Config

Add in .vuepress/config.js

module.exports = {
  // ...
  plugins: [
    // ...
    [
      'vuepress-plugin-right-anchor',
      {
        showDepth: 1,
        ignore: [
          '/',
          '/api/'
          // more...
        ],
        expand: {
          trigger: 'hover',
          clickModeDefaultOpen: true
        },
        customClass: 'your-customClass',
      }
    ]
  ]
}

Param description

showDepth

Which level of title will be used in the right anchor display. The pointing meaning of the value is the same as themeconfig.sidebardepth.

• Type: null | number
• Default: null

ignore

Don't show right-anchor's pages.

• Type: array
• Default: []

expand

About expand configuration of menu.

• Type: object
  • trigger: string => The trigger mode of the open menu. 'hover' | 'click'
  • clickModeDefaultOpen: boolean => Click mode is default open?
• Default:

  {
    trigger: 'hover',
    clickModeDefaultOpen: true
  }

customClass

Your customClass for right-anchor.

• Type: null | string
• Default: null

Page Config

Set front-matter by vuepress recommended method in .md.

---
rightAnchor: 
  showDepth: 1
  expand:
    trigger: hover
    clickModeDefaultOpen: true
  customClass: your-customClass
---

vuepress-plugin-right-anchor's Issues

vuepress@next

Will this work with vuepress@next?

点击跳转时是否可以增加a标签，可以跳转到该锚点

比如：http://xxx.com#head1，这样链接可以收藏，下次进入可以直接滚动到该锚点下

How to set default expansion for v1?

The page directory navigation in the upper right corner is folded by default. How to set it to expand by default?

无法修改字体大小及颜色

你好，我按照教程，添加了下面文件，
但是运行后字体大小仍然没有任何变化，还是默认的14，请问下这样添加正确吗？

Separate colour for the menu toggle and the text

Hi,
The current color set assigns same colour for the menu toggle and for the text. That means you can't have a menu with white text without the toggle disappearing.

vite编译不能使用

希望支持vite

showLevel 2 does not display H2 headers

As title suggests, showLevel: 2 does not display H2 headers while showLevel: 1 only displays H2 headers. How do I make it display both H2 and H3? This would be perfect for my site.

Thank you :)

Build failed after upgrading to 0.5.4

My package.json :

// before: 
    "vuepress-plugin-right-anchor": "^0.4.9",
// after: 
    "vuepress-plugin-right-anchor": "^0.5.4",

will emit this error :

wait Rendering static HTML...
[Vue warn]: Error in created hook: "TypeError: Cannot read property 'isIgnore' of undefined"

found in

---> <RightAnchor>
       <Root>
error Error rendering /404.html: false
undefined
TypeError: Cannot read property 'isIgnore' of undefined
    at VueComponent.filterDataByLevel (node_modules/vuepress-plugin-right-anchor/RightAnchor.vue:103:14)

右侧导航栏内容可以显示，但无法显示功能按钮

Hi, 感谢你的插件，目前右侧导航栏内容可以正确显示，但与示例相比，发现缺少了功能按钮，无法进行开启或关闭。

vuepress2版本报错

Removes words wrapped in <tags> from heading

The plugin do not show words wrapped in i.e. <span> and <strong> tags. Can you please fix this?

Are there any plans to support VuePress v2?

Hi,

VuePress v2, a.k.a vuepress@next, should be in stable state soon (see vuepress/core#68 ) and my company is considering migrating to it. As we currently use this plugin, I would like to know whether there are any plans to port it to to vuepress@next?

Thank you.
Best regards

Add indents to headers above level 3

Thank you for your plugin, it's very convenient.
I don't know Vue, but I'm hoping for a little improvement.
The current code only adds the sub class to level 3 header, with padding-left: 30px;.

https://github.com/xuekai-china/vuepress-plugin-right-anchor/blob/4dbe9a2a0e8665d5401c62a71ff174621a50eb03/RightAnchor.vue#L30

Can you add more indents to h4 and h5 headers?

vuepress 2.0.0-beta.67 版本不能显示侧边栏

"vuepress": "^2.0.0-beta.67", "vuepress-plugin-right-anchor": "^2.1.0-rc.2"

index.scss 也配置了，config.js 也配了：
['vuepress-plugin-right-anchor', { showDepth: 1, expand: { trigger: 'click', clickModeDefaultOpen: true } }]

与@vuepress/plugin-back-to-top一起使用时的问题

点击返回顶部按钮后，锚点无法恢复到初始化状态

Error when evergreen is set to true

Hi,
In my config, I have set evergreen to true which I guess disables babel, so the JSX isn't transpiled

vuepress config

module.exports = {
//...
  evergreen: true,
}

The error in the console browser is

Uncaught Error: Module parse failed: Unexpected token (12:13)
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
| 
|     render() {
>       return <RightAnchor global={true}/>
|     }
|   })

How to make it work with evergreen set to true?
Thank you

[Feature request] 左侧 sidebar 只显示一级标题，右侧 toc 目录显示二级以上标题

需求：
左侧 sidebar 只显示一级大标题，右侧的 悬浮 toc 插件显示二级以上标题

现状：
在 2.0.0-rc.4 版本中，默认左侧 sidebar 会连同二级以上的标题一起显示，但当我设置了 extractHeaders 参数为 1 时，右侧的 悬浮 toc 插件 里也只能显示一级标题了，虽然最后我通过注释掉 extractHeaders 参数，再加上 css 设置.sidebar-item:not(.sidebar-heading) 实现了我的需求，但还是希望通过插件来实现。

附件：

Why can't show the anchor for the first level title (H1)?

In my markdown file, when I use only one # to stdandard the first level title (H1), this plugin doesn't work and don't show the anchor.

The vuepress sidebar has the same problem, and may be this is a bug (or feature) of vuepress.

When I changed all of the first level title to second level title (H2), this plugin and the vuepress sidebar can show the navigation.

My sidebar config using group look like beside:

    sidebar:[
      {
        title: 'foreword',
        path: '/'
      },
      {
          title: 'help',
          children: [
            ['/help/man', 'man'],
            ['/help/info', 'info'],
            ['/help/whatis', 'whatis']
          ]
      }
    ]

Upgrade to vuepress 2.0.0-beta.41

老哥，这会五一正好有空，可否更新一下，用不了了。。。

Need more features on this plugin.

First of all, thank you for such great plugin.

I'd like to see these features to be implemented:

1. Enable/disable by page, such as a frontmatter of the markdown.
2. Do not show if no anchors in page at all. (I consider this as a bug in current version)
3. Allow people to disable the global added right anchor, and use RightAnchor component to make their own.
4. Allow custom class.

Sounds good?

2.0.0-beta.49 不会显示右侧边栏

"vuepress": "^2.0.0-beta.49"
"vuepress-plugin-right-anchor": "^0.5.5"

按照教程安装, 没有显示右测边栏, 是不兼容新版,还是我安装的问题呢, 感谢.

Error [ERR_REQUIRE_ESM]: require() of ES Module ... lib/node/rightAnchorPlugin.js not supported.

llnancy@lilus-MacBook-Pro vuepress-2.x % yarn start
yarn run v1.22.19
$ vuepress dev docs
/Users/llnancy/workspace/llnancy-projects/vuepress-2.x/node_modules/vuepress-plugin-right-anchor/lib/node/rightAnchorPlugin.js:4
const utils_1 = require("@vuepress/utils");
                ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/llnancy/workspace/llnancy-projects/vuepress-2.x/node_modules/@vuepress/utils/dist/index.js from /Users/llnancy/workspace/llnancy-projects/vuepress-2.x/node_modules/vuepress-plugin-right-anchor/lib/node/rightAnchorPlugin.js not supported.
Instead change the require of index.js in /Users/llnancy/workspace/llnancy-projects/vuepress-2.x/node_modules/vuepress-plugin-right-anchor/lib/node/rightAnchorPlugin.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/llnancy/workspace/llnancy-projects/vuepress-2.x/node_modules/vuepress-plugin-right-anchor/lib/node/rightAnchorPlugin.js:4:17)
    at Object.<anonymous> (/Users/llnancy/workspace/llnancy-projects/vuepress-2.x/node_modules/vuepress-plugin-right-anchor/lib/node/index.js:17:29) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.15.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

vuepress's version is ^2.0.0-beta.61