docsify + cloudflare 建站
|
22
|
0
|
学习

459 字
|
5 分钟

​docsify 将 md 文件渲染为 html 页面， 然后上传页面至 github , 在 cloudflare 中创建 pages ， 将 pages 与 github 创建关联， cloudflare 会自动签出页面进行展示。之后 github 更新会被 cloudflear 自动签出发布

‍

创建 docsify 文件

​https://github.com/docsifyjs/docsify-cli​

​https://docsify.js.org/#/zh-cn/quickstart​

npm i docsify-cli -g # 安装
docsify init ./docs # 初始化目录， 按约定一般放在 docs 下，也可以直接根目录下
docsify serve docs # 启动服务，3000 端口， 或是直接使用 code 的 web 浏览功能

‍

默认生成 index.html (所有页面通过它来渲染) readme.md (作为默认的首页进行渲染) .nojekyll （告知 git 签入时不要忽略 _ 开头文件 ）​

浏览器访问 index.html 它会将要访问的 md 渲染为html 页面进行展示

‍

配置

// index.html 
window.$docsify = {
      name: 'IOX APP', // 侧边栏顶部标题
      repo: '', // 右上角显示 github 跳转
      coverpage: true, // 使用 _coverpage.md 创建封面 
      onlyCover: true, // 仅显示封面， 不将首页与封面在同一页面中显示
      loadNavbar: true, // 使用 _navbar.md 创建顶部导航栏
      loadSidebar: true, // 使用 _sidebar.md 定义侧边栏
      subMaxLevel: 3 // 侧边栏中显示的标题最大层级
}

‍

封面

coverpage: true, // 使用 _coverpage.md 创建封面

onlyCover: true, // 仅显示封面，默认封面与首页是拼接成一页一起展示

// _coverpage.md, 

<!-- 生成随机背景色，可根据手册定制 -->
<!-- 所有内容自动居中显示 -->

![logo](https://cdn.jsdelivr.net/npm/remixicon@4.8.0/icons/Finance/hand-heart-line.svg ':size=100x100')

# **领英工具 <small>1.24</small>**

> 跨平台领英人脉智能捕手

- 精准关键词搜索 + 智能过滤
- 一键导出 Excel（.xlsx）
- 隐私 & 安全第一

<!-- 被渲染为按钮 -->
[Github](https://github.com/ioxinfty/iox_app_web)
[开始使用](/linkedinapp#领英工具)

‍

导航栏

loadNavbar: true, // 使用 _navbar.md 创建顶部导航栏

// _navbar.md

* [首页](/ "首页") 

<!-- 缩进会有下拉菜单效果 -->
* 联系我们
    * [产品页面](https://app.443disk.xyz)
    * [关于我们](/about.md "关于我们")

‍

侧边栏

loadSidebar: true, // 使用 _sidebar.md 定义侧边栏， 如果不启用， 默认只显示当前 md 文件中的标题列表
subMaxLevel: 3 // 侧边栏中显示的标题最大层级

// _sidebar.md

* [领英工具](/linkedinapp)

<!-- 缩进的话， 侧边栏会自动缩进 -->
* [关于我们](/about)

‍

插件

https://docsify.js.org/#/zh-cn/plugins

目前使用的插件
<!-- 在 Github 上编辑 -->
https://github.com/njleonzhang/docsify-edit-on-github

<!-- 图片缩放插件 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>

<!-- table -->
<script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1"></script>

‍

扩展语法

扩展了 markdown 语法支持， 下面简单列一下， 其它看手册， https://docsify.js.org/#/zh-cn/helpers

!> 一段重要的内容，可以和其他 **Markdown** 语法混用。 # 显示一个提醒图标

?> _TODO_ 完善示例 # 显示一个彩色背景提示框

![logo](https://docsify.js.org/_media/icon.svg ':size=50x100') # 图片尺寸

‍

上传到 github

默认使用 master 分支， 使用子目录 docs , 可以修改， 如果不是默认值，部署时记得改成对应参数

‍

cloudflare 部署

  • ​Workers 和 Pages ｜ 创建应用程序​
  • 这里特别注意，现在默认创建 Worker， 要点击下面的小字 Looking to deploy Pages? Get started​
  • ​导入现在 Git 存储库 | 选择分支， 输出目录记得改为 docs
  • ​保存并部署​
  • 部署完成后，绑定域名
  • 访问域名查看结果

‍

‍

用到的工具

一个图标站 https://remixicon.com/

favicon 在线工具 https://realfavicongenerator.net/

‍

上一篇
下一篇