preface
Many students want to have their own document system to record/summarize what they have learned.
In this article, I will introduce the Docsify + Github Page method, which aims to quickly build your own document website
The Demo code for this article can be viewed on Github, as shown here
The preparatory work
Install the Docsify-CLI tool globally and create the Document project directory
npm i docsify-cli -g
mkdir my-docs
cd my-docs
Copy the code
Initialize the project
docsify init ./docs
Copy the code
When successful, a folder called Docs is generated and contains three files
index.html
Entry file. A lot of the configuration that we’re going to do in the future is going to be done hereREADME.md
Will be rendered as the main page content.nojekyll
Used to preventGitHub Pages
Ignore files that start with an underscore
Start the project
docsify serve docs
Copy the code
By launching a local server by running Docsify Serve, you can easily preview the effects in real time. The default access address is http://localhost:3000. The following content is from readme.md
Simple configuration
The next step is to configure our document
Configure the sidebar
In index.html, add the configuration loadSidebar: true
window.$docsify = {
name: '',
repo: '',
+ loadSidebar: true
}
Copy the code
Create a new file _sidebar.md in docs and write
- JavaScript
- [closure] (closure.md)
- [The prototype] (prototype.md)
- CSS
- [layout] (layout.md)
Copy the code
Create the closure. Md, prototype.md, and Layout. md Markdown files in docs
You can write the following in closure. Md to see the effect
# Introduce closures
## What are closuresHa ha ha haWhat do closures do
Copy the code
Automatic directory generation
You can generate a table of contents based on the title, which is useful when the article is long and directly demonstrates the configuration and effects
window.$docsify = {
name: '',
repo: '',
loadSidebar: true,
+ subMaxLevel: 2
}
Copy the code
Use of plug-ins
The basic configuration is complete, but there are many more functional configurations that I won’t go into here. Docsify also provides a wealth of plugins, which we’ll look at next
Full-text search
Configuration is very simple
<script>
window.$docsify = {
name: '',
repo: '',
loadSidebar: true,
subMaxLevel: 2,
+ search: 'auto'} </script> <! -- Docsify v4 --> <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>+
Copy the code
See the effect
zooming
Docsify requires a plug-in to zoom in and out, but it’s actually very simple, as shown below
<script> window.$docsify = { name: '', repo: '', loadSidebar: true, subMaxLevel: 2, search: 'auto' } </script> <! -- Docsify v4 --> <script src="//cdn.jsdelivr.net/npm/docsify@4"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>+
Copy the code
CodePen insertion is supported
Find any CodePen, open it, find Embed, and click enter
Click on iframe,copy. Paste it into your MarkDown file
I’m ready to look at CodePen
More plug-in implementations
Docsify also offers the Gitalk review plugin and more. See the official documentation for more information, which will not be detailed here.
The deployment of
You don’t need a server (of course you can), we deploy directly to the Github Page. First upload our code to Github. This step is not shown here, and the reader is asked to do it himself
Find the Settings
Go to GitHub Pages, select the Main and Docs folders, and click Save
In a moment, our document address will be generated, and you can see the demo here
conclusion
From 0 to 1, this article introduces how to quickly build your own document system by using Docsify + Github Page and deploy it online. Of course, the article mentioned only a small part of the function of Docsify, interested in can go to the official view