Can not get right routes with multi sections

Question

Can not get right routes with multi sections

Closed this issue 3 months ago · 4 comments

          > > I am currently encountering issue 2, and I do not want to change my document directory structure. Is there any way to resolve this?

Hi @L-Super , could provide more details on your issue? and I may find a workaround to solve it before we settle this issue down. For path related issue, consider try alias or rewrite it in hooks instead of re- structure your docs totally.

I placed this repo under the docs folder and renamed SUMMARY.md to guide.md, while my directory structure for docs is as follows:

index.html:

<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '<span>docsify</span>',
      logo: '/favicon.svg',
      relativePath: true,
      loadSidebar: 'guide.md',
      auto2top: true,
      loadNavbar: true,
      subMaxLevel: 2,
      mergeNavbar: true,


      repo: 'https://github.com/L-Super',

      pagination: {
        previousText: '上一章节',
        nextText: '下一章节',
        crossChapter: true,
        crossChapterText: true,
      },
      loadFooter: true,
      baiduTjId: "xxxx",
      // 广告配置
      ads: [
        {
          img: 'resources/images/wx_qrcode.png'
        },
      ],
    }

    window.$docsify.customPageTitle = {
      prefix: false,      // [optional] title prefix. default: false eg: prefix: "Application"
      suffix: "在线充电站",      // [optional] title suffix. default: false eg: suffix: "v1.0.0"
      separator: '|',       // [optional] separator for title eg: title->   prefix | title | suffix
      debug: false,      // [optional] should debug
    }
  </script>
  <!-- Docsify v4 -->
  <script src="resources/js/docsify.js"></script>

  <script src="resources/js/prism-bash.min.js"></script>
  <script src="resources/js/prism-cpp.min.js"></script>
  <script src="resources/js/docsify-pagination.min.js"></script>
  <script src="resources/js/docsify-footer.min.js"></script>
  <script src="resources/js/vanilla-back-to-top.min.js"></script>
  <script src="resources/js/docsify-plugin-title.min.js"></script>
  <script src="resources/js/docsify-ads.min.js"></script>
  <script src="resources/js/docsify-baidu-tj.min.js"></script>

  <script>
    addBackToTop({
      diameter: 56,
      backgroundColor: 'rgb(66, 185, 131)',
      textColor: '#fff',
    });
  </script>

  <script>
    if (typeof navigator.serviceWorker !== 'undefined') {
      navigator.serviceWorker.register('pwa.js')
    }
  </script>
</body>

root guide.md:

* [程序员英语学习指南](/A-Programmers-Guide-to-English/README.md)

Directory structure:

docs/A-Programmers-Guide-to-English
├─assets
├─essence
├─make-a-program
├─qa
├─resources
└─training

When I switch between different sections from the left side, the URL shows an incorrect path.

Current behaviour：

http://localhost:3000/#/A-Programmers-Guide-to-English/essence/make-a-program/README

Expected behaviour:

http://localhost:3000/#/A-Programmers-Guide-to-English/make-a-program/README

Originally posted by @L-Super in #1891 (comment)

Answer 1 · 2024-02-11T16:53:27.000Z

Hi @L-Super , I can not find the A-Programmers-Guide-to-English in the sidebar. there is what I did:

Folk the repo you provide.
Run docsify serve docs on the root.
Go to the on live site and click the sidebar jump into different sections.
Check each of the sidebar generated routes on the sidebar.
Check the contents and url.

I didn't see any path similar as you mentioned:

http://localhost:3000/#/A-Programmers-Guide-to-English/essence/make-a-program/README

But I found the /CPP-Concurrency-in-Action-2nd-Edition/content/ seems has issue as well when I clicked its sidebar different titles more times.

So, I try to work on it directly to make it works, it is similar to rewrite the path ( include File path).
Hope it helps as a sample.

What I did:

Change the path in /CPP-Concurrency-in-Action-2nd-Edition/guide.md --- removing all the rest of / before content. (BTW, so does the English-level-up-tips section)

Create alias to replace routes (rewrite to the right md doc path).

    window.$docsify = {
      alias:{
        '\/CPP-Concurrency-in-Action-2nd-Edition.*(?:.*\/content\/(.*))': '/CPP-Concurrency-in-Action-2nd-Edition/content/$1'
      }
}

Besides, correct the hash url in browser as well.

 window.$docsify = {
      plugins: [
          function(hook, vm){
            hook.beforeEach(content=>{
          
            const cpp = "\/CPP-Concurrency-in-Action-2nd-Edition.*(?:.*\/content\/(.*))"
            const regex = new RegExp(`^${cpp}$`)

            let path = window.location.hash && window.location.hash.substring(1)
            if(regex.test(path)){
              path = '/CPP-Concurrency-in-Action-2nd-Edition/content/'+path.match(regex)[1]
              history.replaceState(null, null, `#${path}`);
            }
          })
        }
      ]
}

TBH, It works but so cumbersome...
I suppose that restructure your project should be more practicable.

Answer 2 · 2024-02-12T02:05:46.000Z

Hi @L-Super , I can not find the A-Programmers-Guide-to-English in the sidebar. there is what I did:

Folk the repo you provide.

Run docsify serve docs on the root.

Go to the on live site and click the sidebar jump into different sections.

Check each of the sidebar generated routes on the sidebar.

Check the contents and url.

I didn't see any path similar as you mentioned:
http://localhost:3000/#/A-Programmers-Guide-to-English/essence/make-a-program/README
But I found the /CPP-Concurrency-in-Action-2nd-Edition/content/ seems has issue as well when I clicked its sidebar different titles more times.

So, I try to work on it directly to make it works, it is similar to rewrite the path ( include File path).
Hope it helps as a sample.

What I did:

Change the path in /CPP-Concurrency-in-Action-2nd-Edition/guide.md --- removing all the rest of / before content. (BTW, so does the English-level-up-tips section)

Create alias to replace routes (rewrite to the right md doc path).
    window.$docsify = {
      alias:{
        '\/CPP-Concurrency-in-Action-2nd-Edition.*(?:.*\/content\/(.*))': '/CPP-Concurrency-in-Action-2nd-Edition/content/$1'
      }
}
Besides, correct the hash url in browser as well.
 window.$docsify = {
      plugins: [
          function(hook, vm){
            hook.beforeEach(content=>{
          
            const cpp = "\/CPP-Concurrency-in-Action-2nd-Edition.*(?:.*\/content\/(.*))"
            const regex = new RegExp(`^${cpp}$`)

            let path = window.location.hash && window.location.hash.substring(1)
            if(regex.test(path)){
              path = '/CPP-Concurrency-in-Action-2nd-Edition/content/'+path.match(regex)[1]
              history.replaceState(null, null, `#${path}`);
            }
          })
        }
      ]
}
TBH, It works but so cumbersome...
I suppose that restructure your project should be more practicable.

A-Programmers-Guide-to-English is in the navbar. Both the navbar and the sidebar have the same issue. I believe that the problem is that docsify does not support multi-level directories. It would be great if it could directly support multi-level directories without requiring users to modify the file structure.Finally, thank you very much for your patient answer.

Answer 3 · 2024-02-12T16:07:25.000Z

Hi @L-Super , I already raise the issue you mentioned with team members.
This issue is on the roadmap ( the #1891 ), but it wouldn't be fixed very quickly since the compatibility and breaking release considerations in team.
Sorry for the inconvenient.

Answer 4 · 2024-03-02T04:10:05.000Z

Bug acknowledged. Tracking with #1891.