How to use Docsify to make your Github Pages more beautiful. This article introduces the basic use of Docsify and Github Pages.

Let’s take a look at the whole picture and see what’s interesting 🧐🧐

  • Navigation lists
  • Day/night mode switch
  • Previous post/next post function
  • Embed GitHub editing functionality
  • Global embedding
  • The footer
  • zoom
  • Code highlighting
  • Copy code to clipboard with one click
  • Emoji support

Navigation lists

Add under the tag

<nav>
    <ul>
        <li>page<ul>
                <li><a href="#">The cover</a></li>
                <li><a href="#/README">Home page</a></li>
            </ul>
        </li>
        <li>classification<ul>
                <li><a href="#/MQ/README">MQ</a></li>
                <li><a href="#/DDD/README">DDD</a></li>
                <li><a href="#/UML/README">UML</a></li>
                <li><a href="#/Spring/README">Spring</a></li>
                <li><a href="#/SpringBoot/README">SpringBoot</a></li>
                <li><a href="#/SpringCloud/README">SpringCloud</a></li>
                <li><a href=Basis "# / Java/README">Java based</a></li>
                <li><a href="#/Skill/README">Practical skills</a></li>
                <li><a href="#/Architecture/README">Architecture design</a></li>
                <li><a href="#/Specification/README">The development of specification</a></li>
                <li><a href="#/Algorithm/README">Algorithms & data structures</a></li>
            </ul>
        </li>
        <li>Exquisite article<ul>
                <li><a href=#/DDD/DDD Series 1: Domain-Primitive>DDD series 1: Domain-Primitive</a></li>
                <li><a href=#/Skill/ How to modify your Github Pages with Docsify>How to modify your Github-Pages with Docsify</a></li>
                <li><a href="#/SpringBoot/mica-auto">SpringBoot Starter development tool: MICA-Auto</a></li>
                <li><a href="#/Java basics/Thread pool/thread pool">Java thread pool source code parsing</a></li>
                <li><a href="#/Java Basics/Thread pool/How to pull a mini thread pool">How to create a mini thread pool</a></li>
            </ul>
        </li>
    </ul>
</nav>
Copy the code

Day/night mode switch

Import CSS and JS files respectively

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/style.min.css">
<script src="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/index.min.js"></script>
Copy the code

In the init JS code of docsify

<script>
    window.$docsify = {
        darklightTheme: {
            defaultTheme: 'light'.siteFont: 'Source Sans Pro,Helvetica Neue,Arial,sans-serif'.codeFontFamily: 'Roboto Mono, Monaco, courier, monospace'.bodyFontSize: '15px'.dark: {
                background: 'RGB (28,32,34)'.highlightColor: '#e96900'.codeBackgroundColor: 'RGB (34,39,46)'.codeTextColor: '#b4b4b4',},light: {
                highlightColor: '#e96900',}}};</script>
Copy the code

Previous post/next post

Importing JS files

<script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>
Copy the code

In the init JS code of docsify

<script>    
    window.$docsify = {
        pagination: {
            previousText: "Previous post".nextText: "Next.".crossChapter: true.crossChapterText: true,}};</script>
Copy the code

Embed GitHub editing functionality/global embed functionality/footer

Add plugins to docsify’s initialization JS code

<script>window.$docsify = { plugins: [ function (hook, Vm) {hook.beforeeach (function (content) {// Content is the content of md file const en = vm.route.file.indexof ("README_EN") > -1; if (/githubusercontent.com/.test(vm.route.file)) { url = vm.route.file .replace("raw.githubusercontent.com", "github.com") .replace(//main/, "/blob/main"); } else { url = "https://github.com/rameosu/rameo/tree/main/docs/" + vm.route.file; } const github = // Const editHtml = en? ':memo: Edit on ${GitHub}\n' : ':memo: ${github} edit \n '; if (vm.route.path == "/") {return editHtml + content;} // Global embed code const subscription = '<h2>exceptional</h2>If you find the author's work helpful, you can receive a reward<b style="color: #e96900">0.88 yuan</b>Support the author, and this will be the motivation for the author to continue to update and open source the article.</br>
                        </br>Of course, you can also add my personal wechat (note:<b style="color: #e96900">GitHub</b>), exchange and progress together.</br>
                        </br>
                        <table>
                            <tr>
                              <td align="center" style="width: 200px;">
                                <a href="https://rameosu.github.io/rameo">
                                  <img src="./assets/rameo/wechat_pay.jpg" style="width: 400px;"><br>
                                  <sub>Wechat scan code to reward</sub>
                                </a><br>
                              </td>
                              <td align="center" style="width: 200px;">
                                <a href="https://rameosu.github.io/rameo">
                                  <img src="./assets/rameo/wechat_qrcode.jpg" style="width: 400px;"><br>
                                  <sub>Personal WeChat</sub>
                                </a><br>
                              </td>
                            </tr>
                        </table>`; Return editHtml + content +<br>` + subscription; }); Hook. AfterEach (function (HTML) {// const footer = ["<footer style='text-align: center; '>","<span>Copyright © 2021-2024 <a href="https://github.com/rameosu/rameo" target="_blank">Rameo</a>. All rights reserved.',
                        "</footer>", ].join(""); return html + footer; }); },]};</script>
Copy the code

zoom

Importing JS files

<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
Copy the code

Code highlighting

Introduce JS files to support different types of code

<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-json.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-java.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-cpp.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-c.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-python.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-markup.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-markdown.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-sql.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-yaml.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-properties.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-xml-doc.min.js"></script>
Copy the code

Take Java code as an example

Copy code to clipboard with one click

Importing JS files

<script src="/ / cdn.jsdelivr.net/npm/[email protected]/dist/docsify-copy-code.min.js"></script>
Copy the code

Emoji support

Importing JS files

<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
Copy the code

The last

Note: the above code is added to your index.html file in the docs directory.