搜索到
8
篇与
的结果
-
docsify常用的一些插件及配置 前面的几篇文章，我们陆续介绍了docsify网站的搭建及一些基本配置。本篇是我们关于docsify系列介绍的最后一篇。主要介绍一下我们常用的一些docsify插件。docsify的配置其实就是一些js及css插件，因此我们下面凡是脚本，大家都放到body中，凡是css文件，都放到head中，配置文件统一放到docsify配置节点。有不会配置的可以参考https://www.xiangcaowuyu.net/blog/the-docsify-configuration-article-navigation.html一、统计文章字数1.1、添加插件<!-- 字数插件 --> <script src="//cdn.jsdelivr.net/npm/docsify-count@latest/dist/countable.min.js"></script>1.2、配置// 字数插件 count: { countable: true, position: 'top', margin: '10px', float: 'left', fontsize: '0.9em', color: 'rgb(90,90,90)', language: 'chinese', localization: { words: "", minute: "" }, isExpected: true },二、支持翻页1.1、添加插件<!-- 翻页 --> <script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>1.2、配置pagination: { previousText: '上一章节', nextText: '下一章节', crossChapter: true, crossChapterText: true, },三、图片放大缩小点击图片可以查看大图。 <!-- 图片放大缩小支持 --> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>四、emoji表情支持 <!-- emoji表情支持 --> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>五、点击复制所有的代码块上添加一个简单的Click to copy按钮来允许用户从你的文档中轻易地复制代码。 <!--在所有的代码块上添加一个简单的Click to copy按钮来允许用户从你的文档中轻易地复制代码--> <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>六、美化提示 <!-- 美化提示 --> <script src="//cdn.jsdelivr.net/npm/docsify-plugin-flexible-alerts"></script>具体使用方式可以参考https://www.npmjs.com/package/docsify-plugin-flexible-alerts -
docsify配置文章内导航 当我们一篇文章比较长时，有个文章内导航可能帮助读者快速的定位到文章对应的章节，比如，我们下面这个测试文章，每个导航，只能不停的滚动鼠标。docsify配置文章内导航，只需一个插件便可解决。一、添加插件1.1、添加脚本文件在body中添加脚本文件<!-- 文章内导航 --> <script src="//cdn.jsdelivr.net/npm/docsify-toc@1.0.0/dist/toc.js"></script>1.2、添加样式在body中添加样式文件<!-- 文章内导航 --> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-toc@1.0.0/dist/toc.css">这样，我们在查看文章时，文章就会有一个导航栏了。个性化配置默认的配置可能并不满足我们的需要，那么我们可以对导航栏进行一些个性化配置。在docsify配置文件中，添加如下内容 toc: { scope: '.markdown-section', headings: 'h1, h2, h3, h4, h5, h6', title: '导航', },再次打开文章页面，可以查看一下效果
-
docsify配置查询功能 在前面的几篇文章中，我们介绍了docsify配置封面、导航栏、侧边栏等信息。其实一个基本的网站框架基本已经搭建起来了，但是现在还有一个问题，如果我们文章比较多的时候，寻找其他就比较麻烦，因此我们需要一个查询功能，以便能快速定位到我们需要的内容。添加搜索插件在index.html中添加搜索插件 <!-- 搜索功能支持 --> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>添加完搜索插件之后，我们网站左上角其实已经有了搜索框，但是现在的搜索框是不易用的，比如提示信息还是英文等等。配置搜索功能在docsify配置文件中，添加以下内容search: { maxAge: 3600000,// 过期时间，单位毫秒，默认一天 paths: 'auto',// 注意：仅适用于 paths: 'auto' 模式 placeholder: '搜索', // 支持本地化 placeholder: { '/zh-cn/': '搜索', '/': '搜索' }, noData: '找不到结果', depth: 4, hideOtherSidebarContent: false, namespace: '香草物语', sidebarDisplayLevel: 1, },
-
docsify配置导航栏 在docsify配置侧边栏中，我们介绍了配置侧边栏的方法，其实配置导航栏的方式跟配置侧边栏是类似的。配置docsify在index.html中配置docsify，支持导航栏。 <script> window.$docsify = { name: '', repo: '', //启用封面支持 coverpage:true, //支持导航栏 loadNavbar: true, // 侧边栏支持，默认加载的是项目根目录下的_sidebar.md文件 loadSidebar: true, // 最大支持渲染的标题层级 maxLevel: 5, // 自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级（建议配置为2-4） subMaxLevel: 4, } </script>添加侧边栏配置文件启用导航栏之后，我们需要添加一个导航栏配置文件_navbar.md。在根目录下创建文件_navbar.md创建完成后，目录结构如下然后我们根据需要配置导航栏 * 香草物语 * [Java](https://www.xiangcaowuyu.net/category/java/) * [Web前端](https://www.xiangcaowuyu.net/category/web/)效果如下
-
docsify配置侧边栏 docsify配置完成后，默认显示的是README.md的内容，侧边栏显示的就是README.md的目录。比如我的README.md配置# 香草物语 > https://www.xiangcaowuyu.net # 我是一级目录 ## 我是二级目录但是我们的在线文档一般不会只有一个文件，我们更多的是像文件夹层级一样，按照文件夹的目录展示我们的文档，所以，我们可以将MarkDown文件，然后所在文件夹级次进行展示。配置docsify在index.html中配置docsify，支持侧边栏。 window.$docsify = { name: '', repo: '', //启用封面支持 coverpage:true, // 侧边栏支持，默认加载的是项目根目录下的_sidebar.md文件 loadSidebar: true, // 最大支持渲染的标题层级 maxLevel: 5, // 自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级（建议配置为2-4） subMaxLevel: 4, }添加侧边栏配置文件如果只配置上面，启用侧边栏支持，你会发现左侧侧边栏没有了，此时，我们需要添加一个侧边栏配置文件_sidebar.md。在根目录下创建文件_sidebar.md在_sidebar.md中配置文件目录* 我是一级目录一 * [我是二级目录1.1](/文章/我是一级目录一/我是二级目录1.1.md) <!--注意这里是相对路径--> * [我是二级目录1.1](/文章/我是一级目录一/我是二级目录1.2.md) * 我是一级目录二 * [我是二级目录2.1](/文章/我是一级目录二/我是二级目录2.1.md)然后根据我们_sidebar.md中配置的目录，创建对应文件或文件夹配置完成后，再次预览我们的网站
-
docsify配置LaTeX公式 MarkDown本身是支持LaTeX公式的，但是docsify默认是不支持LaTeX公式的，即便你输入了如下的公式$$ 现值 = 原值/(1+折现率)^{(到期日-折现日期间隔月份)/12} $$docsify也只会给你显示原始的内容。要实现公式的显示，我们可以通过以下方式。方式一、贴图我们可以使用typora这种软件，显示MarkDown内容，然后截图粘贴到docsify对应的文件中，当然，这种方式能把自己蠢哭。方式二、通过插件docsify-katex就是能显示LaTeX公式的一种插件，使用方式非常简单。将样式文件粘贴到head中，并将js文件粘贴到body中。<!-- 公式 --> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" /><!-- 公式 --> <script src="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js"></script> <script src="//cdn.jsdelivr.net/npm/marked@4"></script> <script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>{alert type="error"}注意脚本文件的引入顺序。{/alert}
-
docsify配置封面 在dosify一个神奇的文档网站生成工具中，我们介绍了如何安装docsify，这篇文章我们主要讲解一下如何配置docsify的封面。启用封面支持还记得我们初始化完项目之后，有一个index.html的文件夹，docsify的所有配置都在这个里面。需要我们需要启用封面，只需要在里面配置coverpage属性，设置为true即可。配置封面启用封面支持参数后，默认的封面文件为_coverpage.md,因此，我们需要在项目根目录下创建一个_coverpage.md文件。然后在封面文件中，输入自己的封面信息，下面的可以直接复制使用<!-- _coverpage.md --> # 香草物语 > 香草物语 [开始使用 Let Go](/README.md)这样，一个简单的封面就设置好了，我们可以看一下效果。
-
dosify一个神奇的文档网站生成工具 之前一直使用的觅思文档作为内部在线知识库。公司内部最近在进行服务器漏洞扫描，觅思文档使用的Python+Django的形式（我用的Docker一键部署的那个，看Python的版本好像是3.7.3吧），由于Python注入漏洞影响3.10.4及以下版本，所以我尝试将Python升级到3.10.7，但是由于Django与Python版本对应关系存在问题，所以升级以失败告终。也是出于无奈，只能另寻其他替代产品。经过对比，选择了一款小巧的文档网站生成工具-dosify。一、docsify的优缺点1.1、优点简洁，没有乱七八糟的功能，也不需要复杂的配置部署简单，两三条命令即可完成部署，不需要数据库结构化展示，直接展示本地markdown文件1.2、缺点没有用户管理功能，不方便多人协作因为是本地化部署，所以不方便使用七牛等图床，导致markdown文件中粘贴图片不是很方便。（当然，我们可以通过typora配置图片上传路径解决此问题）二、docsify部署首先确保已安装node.js。2.1、安装docsify-cli推荐全局安装docsify-cli工具，可以方便地创建及在本地预览生成的文档。打开终端，执行以下命令npm i docsify-cli -g2.2、初始化项目新建文件夹，文件夹名称随意起（我创建了docsify），然后在终端进入文件夹在终端输入docsify init然后查看文件夹index.html:入口文件README.md:会做为主页内容渲染.nojekyll:用于阻止 GitHub Pages 忽略掉下划线开头的文件运行直接输入docsify serve即可运行项目默认端口是3000此时网站就搭建成功了。如果我们需要编辑网站的内容，可以直接修改README.md文件。如果需要修改端口，直接运行socsify server -p 端口号关于docsify的一些其他配置，比如更换主题、设置封面、安装插件等，我们稍后在进行介绍。
