[docsify basic use]

docsify Basic use

One 、 Initialize project

1.1、 Global installation docsify-cli Tools

npm i docsify-cli -g

1.2、 Initialize the document structure

Create a local folder first docs, And then execute the command

docsify init ./docs

The following directory will be generated

-| docs
	 -| .nojekyll   Used to stop Github Pages  Files that start with a sliding line are ignored 
	 -| index.html  Entrance file 
	 -| README.md   Render as home page content 

1.3、 Local live preview

docsify serve docs

Default access http://localhost:3000

1. README.md file

2. Preview effect ：

Two 、 Customize the navigation bar and sidebar

2.1、script To configure

  <script>
    window.$docsify = {
      name: '',
      repo: '',
      loadNavbar: true,
      loadSidebar: true,
      maxLevel: 2,
      subMaxLevel: 4,
      mergeNvabar: true
    }
  </script>

1. add to ***_sidebar.md*** File to configure the sidebar

* DOCSIFY Learning notes 
  * [ One 、 Initialize project ](docsifyUsage/docsifyUsageChapter1.md)
  * [ Two 、 Sidebar configuration ](docsifyUsage//docsifyUsageChapter2.md)

2. add to ***_navbar.md*** File to configure the top navigation bar

*  Project address 
  * [GitHub Address ](https://github.com/arenxiaolanz/docsify_study)
  * [Gitee Address ](https://gitee.com/ren-nino/docsify_study)
*  more 
  * [ Blog home page ](http://blog.renorchid.xyz/)

3. See the effect

3、 ... and 、 Customize the cover page

1. At the entrance file index.html Add the configuration of the cover page in

<script>
  window.$docsify = {
    coverpage: true
  }
</script>

2. add to _coverpage.md File configuration cover page

<!-- _coverpage.md -->

![logo](./images/icon.svg)

#  my docsify Learning notes  <small>1.0.0</small>

>  To be proficient in industry and to be idle in play , To do is to think, to do is to follow .

-  Simple , Lightweight 
-  No need to build static htnl file 
-  Multiple themes 

[GitHub](https://github.com/docsifyjs/docsify/)
[Get Started](#docsifyUsage/docsifyUsageChapter1)

3. Check out the cover effect

Four 、 Add full text search

1. Add the configuration of full-text search in the portal file

  <script>
    window.$docsify = {
      search: {
        maxAge: 86400000, //  Expiration time , Unit millisecond , Default one day 
        placeholder: 'Type to search',
        noData: 'No Results!',
        //  Maximum level of search title , 1 - 6
        depth: 4,
        hideOtherSidebarContent: false, //  Whether to hide other sidebar content 
      }
    }
  </script>
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

2. View search results

5、 ... and 、 Add code highlights

1. Add the following code to the portal file

<script src="//cdn.jsdelivr.net/npm/[email protected]/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/components/prism-php.min.js"></script>

6、 ... and 、 Add one click Copy code

1. Add the following code to the portal file

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

7、 ... and 、 stay GitHub The document above

1. Submit code to GitHub

2.GitHub Pages Deploy

3. Deployment success ·

Access link ：https://arenxiaolanz.github.io/docsify_study/

8、 ... and 、tips, Upload updates

git init
git remote remove origin
git remote add origin [email protected]:arenxiaolanz/docsify_study.git
git add .
git commit -m "completed"
git push -u origin master