Guide brother is I know a very good young man, chubby body filled with endless talent, his JavaGuide in GitHub has marked the star 91K+, free time I will go up to take a look, after all, learning makes me happy, hey hey.
One day, I noticed that his online version looked so beautiful that I asked him what he made of it, and he would reply, “Docsify, it’s very convenient.” Just now I am updating “teach younger sister to learn Java” column, also want the whole online version, convenient for readers to read.
What is Docsify
A magical document generation tool
I haven’t used a rich text editor since Markdown, because Markdown’s writing has a flow feel. Many blogging platforms support Markdown, and even if they don’t, it doesn’t matter. You can convert it to rich text via MDnice or Md2All.
Docsify automatically catalogs the titles in Markdown and quickly builds a small document site with the code cloud (which is faster in China than GitHub Pages). The color palette and layout of the entire page are comfortable, making the reading experience several levels higher.
Unlike Gitbook, Docsify doesn’t generate static HTML files. Instead, it intelligently loads and parses Markdown files, which prevents HTML files from “polluting” the entire document library.
Post on docsify’s website:
docsify.js.org/
Click in and you will feel very pleasing, full of small fresh. I have to admit, my eyes were drawn to it.
02, the pit docsify
First, open the command line and run the following command to install Docsify-CLI for local initialization and live preview.
npm i docsify-cli -g
Copy the codeIf this step is very, very slow, you can force the exit, because the NPM is downloaded from a foreign server, which is affected by the network.
Taobao team helped us solve this problem by creating a domestic mirror image of NPM. You can replace NPM with CNPM by executing the following command.
npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the codeError: EACCES: permission denied, access ‘/usr/local/lib/node_modules’ Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules’
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the codeAfter entering the password, the execution succeeds. Then run the CNPM I docsify-cli -g command to install. If there is an Error (EACCES: Permission denied), add sudo.
PS: sudo is a Linux system administration directive that allows system administrators to have ordinary users execute root-level commands.
After the installation is successful, the following information is displayed:
Second, execute the following command to create and initialize the document directory.
docsify init ./docs
Copy the codeOnce in the docs directory, you can see two files: readme.md (rendered as home page content) and index.html (entry file).
Step 3, go back to the parent directory of Docs and run the following command to start the local service.
docsify serve docs
Copy the code
Step 4: Preview by typing http://localhost:3000 in the browser address bar.
03. Custom navigation bar
Open the index.html file and add the nav tag to the body tag as follows:
The < body > < nav > < a href = "www.itwanger.com" > king of silence two personal blog < / a > < / nav > < div id = "app" > < / div > < / body >Copy the codeOnce saved, you can view the effect on your browser.
04. Customize configuration items
Open the index.html file and configure window.$docsify in the script tag as follows:
Window $docsify = {name: 'teaching younger sister learning Java', ':' https://github.com/itwanger/TechSisterLearnJava '}Copy the code1) Name: Document title, displayed at the top of the sidebar.
2) Repo: The GitHub repository address that renders a GitHub corner in the upper right corner of the page.
Once saved, you can view the effect on your browser.
05. Install plug-ins
1) Full text search
The full-text search plug-in retrives the document content based on the hyperlink on the current page and indexes the document in localStorage. The default expiration time is one day. You can also specify a list of files to cache or an expiration time.
Open the index.html file, add the full-text search configuration item, and introduce search.min.js as follows:
<body> <script> window.$docsify = {search: {paths: 'auto', placeholder: 'search ', noData:' no ', depth: 3, }, } </script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script> </body>Copy the codeOnce saved, you can view the effect on your browser.
2) Picture zooming
Add zoom-image.min.js to the index.html file, as shown below:
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
Copy the codeAfter saving, you can view the effect on the browser. When you place the mouse over an image, an icon will appear to shrink or enlarge. Click to change the shape of the image.
3) Copy to clipboard
Add a simple Click to Copy button to all code blocks to allow users to easily copy code from your document. Add docsify-copy-code to the index. HTML file as follows:
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
Copy the codeOnce saved, you can view the effect on your browser.
4) Word count
It provides the function of counting Chinese characters and English words, and excludes some special characters such as * and – in markdown syntax.
Open the index.html file, add the count configuration item, and import countable.js as follows:
<body>
<script>
window.$docsify = {
count:{
countable:true,
fontsize:'0.9em',
color:'rgb(90,90,90)',
language:'chinese'
}
}
</script>
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>
</body>
Copy the codeOnce saved, you can view the effect on your browser.
06. Code highlighting
The code highlighting tool built into Docsify is Prism. Prism supports the following languages by default:
- Markup –
markup.html.xml.svg.mathml.ssml.atom.rss - CSS –
css - C-like –
clike - JavaScript –
javascript.js
Java needs to add an additional syntax file to the index. HTML file, as follows:
< script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/components/prism-java.min.js" > < / script >Copy the codeOnce saved, you can view the effect on your browser.
07. Deploy to the code cloud
We can deploy the document site on GitHub Pages, but for domestic users, the access to the code cloud is obviously faster.
If you’re using GitHub for the first time, I’ve got a tutorial for you:
GitHub is used by liberal arts girls, so why are you an engineering student
Create a new repository on GitHub and put all your documents in the docs directory. Mine is done. Call it TechSisterLearnJava.
Next, log into the code cloud and select import repository from GitHub.
Select the warehouse and click Import.
Once the import is successful, click “View Repository” to see the repository imported from GitHub to the code cloud. Click Services and select Gitee Pages.
Check force HTTPS and click the Start button. Moments later, the code cloud Pages service was up.
Click on the website address:
Itwanger. Gitee. IO/zero – learn -…
You can see that Docsify has been successfully deployed to the code cloud.
08, finally
I strongly recommend the column “Teach Girls to Learn Java”, which has been updated for 15 sections (nearly 50,000 words), and will be updated for at least 2 sections every week. 130 sections are expected to be updated, covering everything from Java basics to objects and classes, to collection framework, network programming, concurrent programming and Java virtual machine.
I spent a lot of energy and thought on the pictures involved in the column, and strive to give you a fresh and refreshing feeling, just cut a few pictures to show you.
Where can I find such a good column? For free (I don’t know what I was thinking anyway)!
GitHub Reading address (star it) :
Github.com/itwanger/ja…
Code cloud read address (star it) :
Gitee.com/itwanger/ja…
Docsify is available online.
itwanger.gitee.io/javazero
I know, I know, you don’t have to ask, I have the offline VERSION of the PDF ready, look at the dark style of the PDF, it is beautiful to read the cliff.
Baidu web disk download (dark and bright white, two kinds) address:
Pan.baidu.com/s/1qwomiFHW… Password: 1 THN
PS: AFTER finishing this docsify, I was exhausted. When I looked at the time, it was 1:32 in the morning. To be honest, my eyes were already confused.