网站文章内容编辑器( 搭建个人网站动态博客之前尝试过搭建自己的PHP博客 )

　　网站文章内容编辑器(

搭建个人网站动态博客之前尝试过搭建自己的PHP博客

)

　　

　　建立个人网站动态博客

　　我之前尝试过建立自己的博客。著名的 PHP 动态博客 WordPress 托管在我自己的服务器上。后来，我在SpringBoot和VUE的前后端之间开发了一个单独的博客。这对学习有好处，但毕竟我需要一个服务器来运行这个，并且需要一个关系数据库比如数据库 MySQL 来存储数据。用专业术语来说，关系数据库是用来持久化数据的。

　　静态博客 hexo

　　除了动态博客，我也体验过静态博客。之前一直在用静态博客hexo。

　　Hexo 使用 markdown 作为源文件，但需要通过 hexo 程序在本地渲染，转换成 HTML 文件并转换成静态页面，然后由 web 服务器托管。如果放在github码云gitee上，可以使用静态页面托管。

　　非常方便免费，不需要自己搭建服务器，但是hexo还是有点麻烦，需要本地节点环境编译。

　　当然，在万能的 Github 背后，还有一个特别好用的 Github Action，可以用来嫖资本家的服务器，用微软的云服务器编译成静态的 HTML 页面，然后自动托管到仓库中。

　　这也很方便，解决了上面的问题，但是配置这个 Github Action 比较麻烦，需要大量的安全验证。有兴趣的话，我后面还可以讲这个配置方案，不过对于新手来说确实比较麻烦。许多。

　　文档化

　　前两天发现了一个更方便的文档生成工具 docsify（一个神奇的文档*敏*感*词*。）

　　用了一段时间，发现这个比hexo方便多了，更适合小白使用。

　　docsify 效果 docsify 样本

　　他们的官网就是用这个技术写的，打开也挺好的。还有一个正在阅读这项技术的*敏*感*词*的笔记 cs-wiki。

　　

　　左侧可以显示目录，并为每个文档自动生成字幕。文章 的内容也是解析后的markdown文件。

　　与其说我干巴巴的说效果，不如你点进去体验一下？

　　与其看这两个例子，不如自己部署，体验自己的站点。

　　废话不多说，直接上安装教程小白不用npm环境直接硬写

　　手动创建一个html文件index.html

　　假设它写在一个空文件夹/doc

　　写下这些代码

　　

window.$docsify = {

//...

}

　　就是这样

　　

　　不敢相信

　　但这是真的

　　环境安装就是这么简单

　　根据官网文档的教程，如果你有Python环境，可以直接运行web服务进行预览。

　　​​cd docs && python -m SimpleHTTPServer 3000​​​

　　然后浏览器访问300端口就OK了

　　​​本地主机：3000​​​

　　或者

　　​​127.0.0.1:3000​​​

　　这是一个空白页面

　　如果你想添加内容，写一个markdown

　　默认主页称为 readme.md

　　所以让我们先创建这个文档

　　写一些内容，保存后刷新页面

　　您将能够实时预览。

　　

　　非新手 npm 用户全局安装 docsify-cli 工具

　　​​​npm i docsify-cli -g​​如果要在项目的./docs目录下编写文档，直接通过init初始化项目。

　　​​docsify init ./docs​​直接编辑docs/README.md更新文档内容的预览

　　​​docsify serve docs​​高级内容多页文档

　　​​​​

　　写了一两篇文章文章，发现文件readme.md越来越长了。真的很难登顶。如果一个博客是 20 或 30 个部分 文章，那么它是不可能存在于一个降价中的。如果你想一想，你会生气。宿舍里不能上床下桌，不能有四人间，不能有双人间，不能有独立卫生间。毕业后没钱租大平房，博客还需要活在档案里？光是想想就让我生气

　　

　　查了文档，发现官方早就考虑过这个问题了，​​​，可以很好的解决这个问题。

　　官网是这么说的

　　如果需要创建多个页面，或者需要 网站 具有多级路由，也可以在 docsify 中轻松实现。比如要创建一个​​​guide.md​​​文件，那么对应的路由就是​​​​/#/guide​​。

　　假设你的目录结构如下：

　　.

└── docs

├── README.md

├── guide.md

└── zh-cn

├── README.md

└── guide.md

　　那么对应的访问页面就是

　　docs/README.md => http://domain.com

docs/guide.md => http://domain.com/guide

docs/zh-cn/README.md => http://domain.com/zh-cn/

docs/zh-cn/guide.md => http://domain.com/zh-cn/guide

　　说到人，除了readme.md的默认主页，其他的文章就可以换个markdown了。要访问此页面，只需将地址栏中的相对位置添加到上一个域名之后。HTML老同志都知道

　　

　　侧边栏自定义显示层

　　之前说过侧边栏可以根据你的markdown自动生成 #1 #2 #3 #4 #5 #6 全部生成的话就是六层

　　

　　写起来容易，但是前端渲染得像手风琴

　　

　　六层目录，全部显示在侧边栏，太难看了。经过多次产品迭代，官方早就知道我会有这种强迫症。

　　可以设置subMaxLevel配置显示层数1是只显示#1等等，一般渲染到#3就可以了，主标题、副标题以及各部分的内容应该够了

　　自定义侧边栏也可以启用目录功能。设置subMaxLevel配置项。详情见​​。

　　

window.$docsify = {

loadSidebar: true,

subMaxLevel: 2

}

　　

　　搜索栏

　　隔了半天，博客里记录的东西比较多。不可能一直使用 Ctrl + F 搜索文档。

　　看看有没有搜索功能。我用Ctrl+F搜索了这个古老的搜索方案，但是找不到。

　　动了动了，没动，发现样本左上角不是搜索框？既然有例子，我也可以用

　　直接找到搜索插件​​​​

　　

　　总之，直接在本地的第一个html文件中

　　window.$docsify= {

}

　　add​​search: 'auto', // 默认值​​就足够了

　　我觉得默认就好

　　

　　window.$docsify= {

search: 'auto'

}

　　官方文档给出了比较完整的配置教程，如果能看懂就OK

　　全文搜索插件会根据当前页面的超链接获取文档内容，并在localStorage中建立文档索引。默认到期时间为 1 天。当然，我们可以指定需要缓存的文件列表或者配置过期时间。

　　

window.$docsify = {

search: 'auto', // 默认值

search : [

'/', // => /README.md

'/guide', // => /guide.md

'/get-started', // => /get-started.md

'/zh-cn/', // => /zh-cn/README.md

],

// 完整配置参数

search: {

maxAge: 86400000, // 过期时间，单位毫秒，默认一天

paths: [], // or 'auto'

placeholder: 'Type to search',

// 支持本地化

placeholder: {

'/zh-cn/': '搜索',

'/': 'Type to search'

},

noData: 'No Results!',

// 支持本地化

noData: {

'/zh-cn/': '找不到结果',

'/': 'No Results'

},

// 搜索标题的最大层级, 1 - 6

depth: 2,

hideOtherSidebarContent: false, // 是否隐藏其他侧边栏内容

// 避免搜索索引冲突

// 同一域下的多个网站之间

namespace: 'website-1',

// 使用不同的索引作为路径前缀（namespaces）

// 注意：仅适用于 paths: 'auto' 模式

//

// 初始化索引时，我们从侧边栏查找第一个路径

// 如果它与列表中的前缀匹配，我们将切换到相应的索引

pathNamespaces: ['/zh-cn', '/ru-ru', '/ru-ru/v1'],

// 您可以提供一个正则表达式来匹配前缀。在这种情况下，

// 匹配到的字符串将被用来识别索引

pathNamespaces: /^(\/(zh-cn|ru-ru))?(\/(v1|v2))?/

}

}

　　

　　部署到github页面和gitee页面服务

　　最后也是最重要的是如何部署到github

　　新建仓库没关系，公共名称必须是

　　（后面访问的链接会是你的name.github.io/warehouse name）

　　例如，我的是HANXU2018.github.io/docs

　　创建那个绿色的大按钮。我不需要教它。

　　

　　仓库下载到本地

　　

　　我用 github Desktop 打开了这个存储库

　　

　　我在本地克隆了它

　　把刚才写的docs文件夹放进去

　　

　　提交仓库到github

　　

　　由于篇幅原因，我不会教 Git 教程和 Github Desktop 教程。

　　挖个坑以后有机会再写哈哈

　　回到Github刷新一下就可以看到东西上传了

　　

　　但是目前还不能访问，因为我们还没有配置github页面静态托管服务。

　　

　　进入仓库配置页面设置

　　向下滚动找到 Github Page 并选择 Branch as master

　　

　　文件夹路径默认为ROOT

　　因为我们访问的是index.html，所以我把它放在了docs文件夹中，所以我们需要把root改成/docs

　　最后别忘了保存

　　

　　访问 github.io

　　最后通过访问我在第一步中说的URL浏览器就可以看到最终的效果了。

　　要访问的链接将是您的 name.github.io/repository 名称

　　例如，我的是HANXU2018.github.io/docs

　　见证奇迹的时刻

　　

　　最后BB两句

　　

　　终于写完了，文笔不太好，刚看了两天这个工具，打算自己当笔记本用

　　如果以后有更好的功能更新，我会继续更新

　　ヾ(￣▽￣)ByeBye再见~