Implement support for setting a customized sidebar item name from the markdown content

Jacco-V · Jacco-V · commit eb5f9390fc43 · 2022-06-22T18:44:16.000+02:00
diff --git a/docs/helpers.md b/docs/helpers.md
@@ -127,6 +127,12 @@ Only when you set both the `routerMode: 'history'` and `externalLinkTarget: '_se
 ### Hello, world! :id=hello-world
 ```
 
+## Customise item name for sidebar
+
+```md
+### How would I write a "hello, world" example? :sidebar="Hello, world?"
+```
+
 ## Markdown in html tag
 
 You need to insert a space between the html and markdown content.
diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js
@@ -207,38 +207,36 @@ export class Compiler {
      */
     origin.heading = renderer.heading = function (text, level) {
       let { str, config } = getAndRemoveConfig(text);
-      const nextToc = { level, title: removeAtag(str) };
+      const nextToc = { level };
 
       if (/<!-- {docsify-ignore} -->/g.test(str)) {
         str = str.replace('<!-- {docsify-ignore} -->', '');
-        nextToc.title = removeAtag(str);
         nextToc.ignoreSubHeading = true;
       }
 
       if (/{docsify-ignore}/g.test(str)) {
         str = str.replace('{docsify-ignore}', '');
-        nextToc.title = removeAtag(str);
         nextToc.ignoreSubHeading = true;
       }
 
       if (/<!-- {docsify-ignore-all} -->/g.test(str)) {
         str = str.replace('<!-- {docsify-ignore-all} -->', '');
-        nextToc.title = removeAtag(str);
         nextToc.ignoreAllSubs = true;
       }
 
       if (/{docsify-ignore-all}/g.test(str)) {
         str = str.replace('{docsify-ignore-all}', '');
-        nextToc.title = removeAtag(str);
         nextToc.ignoreAllSubs = true;
       }
 
+      const title = config.sidebar || str;
       const slug = slugify(config.id || str);
       const url = router.toURL(router.getCurrentPath(), { id: slug });
+      nextToc.title = removeAtag(title);
       nextToc.slug = url;
       _self.toc.push(nextToc);
 
-      return `<h${level} id="${slug}"><a href="${url}" data-id="${slug}" class="anchor"><span>${str}</span></a></h${level}>`;
+      return `<h${level} id="${slug}"><a href="${url}" data-id="${slug}" class="anchor"><span>${title}</span></a></h${level}>`;
     };
 
     origin.code = highlightCodeCompiler({ renderer });
