入坑 docsify,一款神奇的文档生成利器!(2)

简介: 入坑 docsify,一款神奇的文档生成利器!

04、定制化配置项


打开 index.html 文件,在 script 标签中对 window.$docsify 进行配置,如下所示:


window.$docsify = {
        name: '教妹学Java',
        repo: 'https://github.com/itwanger/TechSisterLearnJava',
}



1)name:文档标题,会显示在侧边栏顶部。


2)repo:GitHub 上的仓库地址,会在页面右上角渲染一个 GitHub 角标。


保存后,就可以在浏览器上查看到效果。


image.png


05、安装插件


1)全文搜索


全文搜索插件会根据当前页面上的超链接获取文档内容,在 localStorage 内建立文档索引。默认过期时间为一天,也可以指定需要缓存的文件列表或者过期时间。


打开 index.html 文件,添加全文搜索配置项,并引入 search.min.js,如下所示:


<body>
  <script>
    window.$docsify = {
      search: {
        paths: 'auto',
        placeholder: '搜索',
        noData: '找不到结果',
        depth: 3,
      },
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
</body>



保存后,就可以在浏览器上查看到效果。


image.png


2)图片缩放


在 index.html 文件中引入 zoom-image.min.js 即可,如下所示:


<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>


保存后,就可以在浏览器上查看到效果,鼠标放到一张图片上时会出现缩小或者放大的图标,点击后就可以改变图片的形态。


image.png


3)复制到剪贴板


在所有的代码块上添加一个简单的 Click to copy 按钮来允许用户从你的文档中轻易地复制代码。在 index.html 文件中引入 docsify-copy-code 即可,如下所示:


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


保存后,就可以在浏览器上查看到效果。


image.png


4)字数统计


提供了统计中文汉字和英文单词的功能,并且排除了一些 markdown 语法的特殊字符例如 *、- 等。


打开 index.html 文件,添加 count 配置项,并引入 countable.js,如下所示:


<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>


保存后,就可以在浏览器上查看到效果。


image.png

相关文章
|
Linux 网络安全 网络虚拟化
OpenVPN服务部署
大多数场景下,总公司与分公司之间都是需要互联的,或者在外地出差办公的员工想要访问内部的资料,为了保证这些流量安全可靠的传输到目的地,并且能够最大的节约成本,便需要考虑使用VPN技术了。
5584 2
Auto.js 各版本之间的区别
Auto.js 各版本之间的区别
865 0
|
5月前
|
安全 数据安全/隐私保护 iOS开发
ios一键新机硬改软件,苹果改机型用什么插件,串号Imei过检测工具
本文介绍了苹果设备的安全机制、开发接口及企业解决方案。核心安全包括硬件级防护(Secure Enclave、IMEI锁、T2芯片)和软件防护(启动链验证、KTRR、沙盒控制)。
|
12月前
|
人工智能 atlas 开发工具
【AI系统】昇腾 AI 架构介绍
昇腾计算产业基于华为昇腾系列处理器,涵盖硬件、基础软件、应用使能等,构建全栈AI计算基础设施。华为通过开放硬件、开源软件,支持多框架,推动AI技术在端、边、云的广泛应用,促进AI产业生态繁荣。
1046 1
|
运维 监控 Devops
图解 DevOps 流程,7 大关键步骤总结,非常详细!
本文详解 DevOps 流程的 7 大关键步骤,快速掌握 DevOps 的核心实践。关注【mikechen的互联网架构】,10年+BAT架构经验分享。
图解 DevOps 流程,7 大关键步骤总结,非常详细!
|
安全 网络协议 Linux
在安卓Termux上搭建apache服务创建个人站点并且结合cpolar内网穿透
在安卓Termux上搭建apache服务创建个人站点并且结合cpolar内网穿透工具实现公网访问。
在安卓Termux上搭建apache服务创建个人站点并且结合cpolar内网穿透
|
SQL 数据挖掘 BI
【超实用技巧】解锁SQL聚合函数的奥秘:从基础COUNT到高级多表分析,带你轻松玩转数据统计与挖掘的全过程!
【8月更文挑战第31天】SQL聚合函数是进行数据统计分析的强大工具,可轻松计算平均值、求和及查找极值等。本文通过具体示例,展示如何利用这些函数对`sales`表进行统计分析,包括使用`COUNT()`、`SUM()`、`AVG()`、`MIN()`、`MAX()`等函数,并结合`GROUP BY`和`HAVING`子句实现更复杂的数据挖掘需求。通过这些实践,你将学会如何高效地应用SQL聚合函数解决实际问题。
286 0
|
存储 JavaScript 前端开发
操作document.cookie存储和读取Cookies
操作document.cookie存储和读取Cookies
|
存储 缓存 安全
Flutter Dio进阶:使用Flutter Dio拦截器实现高效的API请求管理和身份验证刷新
Flutter Dio进阶:使用Flutter Dio拦截器实现高效的API请求管理和身份验证刷新
1677 0
|
监控 Dubbo 数据可视化
带你读《Apache Dubbo微服务开发从入门到精通》——三、 全链路追踪(4)
带你读《Apache Dubbo微服务开发从入门到精通》——三、 全链路追踪(4)
575 83