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.

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

    1
    2
    <!-- Theme: Simple (latest v0.x.x) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">

  2. Add the docsify-themeable plugin to your index.html after docsify:

1
2
<!-- docsify-themeable (latest v0.x.x) -->
<script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>
  1. Review the Options section and configure as needed. For example:
1
2
3
4
5
6
7
8
9
<script>
    window.$docsify = {
        // ...
        themeable: {
            readyTransition : true, // default
            responsiveTables: true  // default
        }
    }
</script>
  1. Review the Customization section and set theme properties as needed. For example:
1
2
3
4
5
6
7
8
9
10
11
12
<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:

1
2
3
4
5
6
7
8
# 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:

1
2
3
4
5
6
7
8
9
10
11
# 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/#/

1
2
3
4
5
6
<!-- docsify-themeable styles-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css" title="light">
<link rel="stylesheet" href="assets/css/main-custom.css">
<link rel="stylesheet" href="assets/css/button-custom.css">

<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>