20220523,模板
@@ -30,11 +30,13 @@ password:
|
||||
|
||||
其实做这种网站，完全不用自己手写，现成的工具太多了，这地方随便举几个典型例子吧。
|
||||
|
||||
|
||||
|
||||
### Hexo
|
||||
|
||||
这是一个大家用得非常广泛的静态博客，两年前咱们这里就已经演示过它的使用以及部署上线。
|
||||
|
||||
|
||||
|
||||
|
||||
工具地址：https://hexo.io
|
||||
|
||||
@@ -42,7 +44,7 @@ password:
|
||||
|
||||
一款基于Vue框架驱动的静态网站生成器，比较符合用于知识文档网站的建站需求，现在用的小伙伴也很多。
|
||||
|
||||
|
||||
|
||||
|
||||
工具地址：https://vuepress.vuejs.org/
|
||||
|
||||
@@ -50,7 +52,7 @@ password:
|
||||
|
||||
docsify同样是一个很好用的知识文档网站生成框架，轻量简便，而且无需构建，写完内容就可以直接发布，界面干净又卫生。
|
||||
|
||||
|
||||
|
||||
|
||||
工具地址：https://docsify.js.org/
|
||||
|
||||
@@ -67,7 +69,7 @@ docsify同样是一个很好用的知识文档网站生成框架，轻量简便
|
||||
|
||||
GitBook也是一个可以用来制作知识库文档以及精美电子书网站的工具框架，不少技术电子书文档都是用它来做的。
|
||||
|
||||
|
||||
|
||||
|
||||
工具地址：https://github.com/GitbookIO/gitbook
|
||||
|
||||
@@ -77,11 +79,11 @@ docsify唯一需要的一个前置工具就是`npm`工具
|
||||
|
||||
查看是否安装及版本
|
||||
|
||||
|
||||
|
||||
|
||||
如果没有的话，直接在本地电脑上安装一个`node.js`环境就可以了。
|
||||
|
||||
|
||||
|
||||
|
||||
不管是macOS还是Windows系统，直接去`https://nodejs.org/`官网下载个安装包就可以了，直接下一步下一步即可，安装完成之后会包含npm工具。
|
||||
|
||||
@@ -117,13 +119,13 @@ docsify init
|
||||
docsify serve
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
我们会发现docsify会帮我们在`localhost:3000`启动一个知识库网站。
|
||||
|
||||
然后在浏览器打开`http://localhost:3000`即可看见网站效果。
|
||||
|
||||
|
||||
|
||||
|
||||
当然，这时候的页面看起来非常简陋，几乎什么也没有。
|
||||
|
||||
@@ -138,7 +140,7 @@ docsify serve
|
||||
|
||||
所以我们只需要直接编辑生成的这个README.md文件就能更新网站的内容。
|
||||
|
||||
|
||||
|
||||
|
||||
`coverpage`：封面
|
||||
|
||||
@@ -185,7 +187,7 @@ docsify提供了多套主题可供使用。
|
||||
|
||||
直接修改`index.html`中引入的CSS文件即可修改网站主题。
|
||||
|
||||
|
||||
|
||||
|
||||
目前提供有好几套主题可供选择：
|
||||
|
||||
@@ -207,11 +209,11 @@ coverpage: true
|
||||
|
||||
这样既可开启封面功能。
|
||||
|
||||
|
||||
|
||||
|
||||
封面功能开启之后，我们可以直接去项目文件夹里创建一个`_coverpage.md`文件来制作封面内容。
|
||||
|
||||
|
||||
|
||||
|
||||
比如我们这地方，添加了`_coverpage.md`文件之后，在里面写上如下几段文字：
|
||||
|
||||
@@ -228,7 +230,7 @@ coverpage: true
|
||||
|
||||
在网页上渲染之后，即可看到如下效果：
|
||||
|
||||
|
||||
|
||||
|
||||
所以其操作是非常简单的。
|
||||
|
||||
@@ -240,15 +242,15 @@ coverpage: true
|
||||
loadNavbar: true
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
导航栏功能开启之后，我们可以直接去项目文件夹里创建一个`_navbar.md`文件来制作导航栏菜单内容。
|
||||
|
||||
|
||||
|
||||
|
||||
比如我们这地方，添加了`_navbar.md`导航栏之后的效果大致如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -260,11 +262,11 @@ loadNavbar: true
|
||||
repo: 'https://github.com/rd2coding/Road2Coding'
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
设置完成后的效果如下，还是很萌的，鼠标移到上面，小尾巴还能摇一摇。
|
||||
|
||||
|
||||
|
||||
|
||||
### 设置logo
|
||||
|
||||
@@ -275,11 +277,11 @@ name: 'Road To Coding',
|
||||
logo: 'https://cdn.jsdelivr.net/gh/justacoder99/r2coding@master/img/r2coding_logo_sidebar.1na4hwjnopq8.png'
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
比如这地方设置了logo图片之后，效果大致如下：
|
||||
|
||||
|
||||
|
||||
|
||||
### 设置tabs
|
||||
|
||||
@@ -371,7 +373,7 @@ Ciao!
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
### alert插件
|
||||
|
||||
@@ -555,7 +557,7 @@ https://github.com/fzankl/docsify-plugin-flexible-alerts
|
||||
.markdown-section pre:before {
|
||||
content: '';
|
||||
display: block;
|
||||
background: url(https://gitee.com/tianzhendong/img/raw/master//images/202202280805295.png);
|
||||
background: url(./assets/Docsify/202202280805295.png);
|
||||
height: 30px;
|
||||
background-size: 40px;
|
||||
background-repeat: no-repeat;
|
||||
@@ -747,7 +749,7 @@ https://github.com/fzankl/docsify-plugin-flexible-alerts
|
||||
window.$docsify = {
|
||||
// 项目名称
|
||||
name: 'Tian',
|
||||
logo: 'https://gitee.com/tianzhendong/img/raw/master//images/202202281213460.png',
|
||||
logo: './assets/Docsify/202202281213460.png',
|
||||
// 仓库地址，点击右上角的Github章鱼猫头像会跳转到此地址
|
||||
repo: 'https://gitee.com/tianzhendong/NoteBooks',
|
||||
|
||||
@@ -1005,7 +1007,7 @@ https://github.com/fzankl/docsify-plugin-flexible-alerts
|
||||
|
||||
这里选用Nginx这个Web服务器来驱动网站，因为Nginx服务器除了本身非常轻量，稳定，不耗资源之外，而且性能还好，还特别能扛并发。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1079,7 +1081,7 @@ make && make install
|
||||
|
||||
然后我们可以直接将本地的项目文件夹`repository`上传到`www`目录里即可
|
||||
|
||||
|
||||
|
||||
|
||||
### Nginx配置和访问
|
||||
|
||||
@@ -1092,11 +1094,11 @@ location / {
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
然后我们直接在浏览器中访问云服务器的公网IP，就可以访问该知识库网站了：
|
||||
|
||||
|
||||
|
||||
|
||||
最后再将域名和这个IP一绑定，就OK了
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 461 KiB |
|
After Width: | Height: | Size: 232 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 103 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 478 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 267 KiB |
|
After Width: | Height: | Size: 528 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 178 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 5.7 KiB |