Markdown 拓展-Docsify 主題美化

docsify-themeable - A delightfully simple theme system for docsify.js
https://jhildenbiddle.github.io/docsify-themeable/#/

Quick Start

Installation

  1. Create a docsify site by following the instructions on the docsify.js website.

  2. Select a theme from the Themes section and replace the <link> in your index.html.

    <!-- Theme: Simple (latest v0.x.x) -->
    <link rel="stylesheet" >
    
  3. Add the docsify-themeable plugin to your index.html after docsify:

    <!-- docsify-themeable (latest v0.x.x) -->
    <script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>
    
  4. Review the Options section and configure as needed. For example:

    <script>
      window.$docsify = {
          // ...
          themeable: {
              readyTransition : true, // default
              responsiveTables: true  // default
          }
      }
    </script>
    
  5. Review the Customization section and set theme properties as needed. For example:

    <style>
      :root {
        /* Reduce the font size */
        --base-font-size: 14px;
    
        /* Change the theme color hue */
        --theme-hue: 325;
    
        /* Change the sidebar bullets */
        --sidebar-nav-link-before-content: '??';
      }
    </style>
    

Local Preview

Previewing your site locally requires serving your files from a web server.

The docsify Quick Start guide recommends docsify-cli for creating and previewing your site:

# Install docsify-cli globally
npm install -g docsify-cli

# Serve current directory
docsify serve

# Serve ./docs directory
docsify serve docs

A simple Python web server can also be used:

# Change to site directory
cd /path/to/site/files

# Show Python version
python --version

# Launch web server (Python 2.x)
python -m SimpleHTTPServer

# Launch web server (Python 3.x)
python -m http.server

Hosting

Sites powered by docsify.js can be hosted on any web server. The docsify website provides a helpful deployment guide with tips for hosting your site on following platforms:

主題推薦

docsify-share 使用的主題
https://coroo.github.io/docsify-share/#/

  <!-- docsify-themeable styles-->
  <link rel="stylesheet"  title="light">
  <link rel="stylesheet" href="assets/css/main-custom.css">
  <link rel="stylesheet" href="assets/css/button-custom.css">

  <script src="http://unpkg.com/docsify/lib/docsify.min.js"></script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容