搜索到
179
篇与
的结果
-
docsify常用的一些插件及配置 前面的几篇文章，我们陆续介绍了docsify网站的搭建及一些基本配置。本篇是我们关于docsify系列介绍的最后一篇。主要介绍一下我们常用的一些docsify插件。docsify的配置其实就是一些js及css插件，因此我们下面凡是脚本，大家都放到body中，凡是css文件，都放到head中，配置文件统一放到docsify配置节点。有不会配置的可以参考https://lisen.cc/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创建完成后，目录结构如下然后我们根据需要配置导航栏 * 香草物语 * [后端开发](https://lisen.cc/category/back/) * [Web前端](https://lisen.cc/category/web/)效果如下
-
docsify配置侧边栏 docsify配置完成后，默认显示的是README.md的内容，侧边栏显示的就是README.md的目录。比如我的README.md配置# 李森的博客 > https://lisen.cc # 我是一级目录 ## 我是二级目录 但是我们的在线文档一般不会只有一个文件，我们更多的是像文件夹层级一样，按照文件夹的目录展示我们的文档，所以，我们可以将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中配置的目录，创建对应文件或文件夹配置完成后，再次预览我们的网站
-
typecho替换QQ头像 前言Typecho使用的是Gravatar作为用户的头像，但是大部分用户都没有设置Gravatar头像，而且Gravatar在国内访问速度感人，大大影响了用户体验和站点速度。解决方法让数字QQ邮箱显示QQ头像，非数字QQ邮箱使用Gravatar国内镜像加快速度。修改文件在typecho根目录/var/Typecho/Common.php文件，注释掉大约在第1010行至第1028行的代码/** public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false) { …… return $url; }**/在其下方添加以下 php 代码public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false) { $reg = "/^\d{5,11}@[qQ][Qq]\.(com)$/"; if (preg_match($reg, $mail)) { $img = explode("@", $mail); $url = "//q2.qlogo.cn/headimg_dl?dst_uin={$img[0]}&spec=100"; } else { if (defined('__TYPECHO_GRAVATAR_PREFIX__')) { $url = __TYPECHO_GRAVATAR_PREFIX__; } else { $url = $isSecure ? 'https://gravatar.loli.net' : 'http://gravatar.loli.net'; $url .= '/avatar/'; } if (!empty($mail)) { $url .= md5(strtolower(trim($mail))); } $url .= '?s=' . $size; $url .= '&r=' . $rating; $url .= '&d=' . $default; } return $url; } 现在Typecho全局支持数字QQ邮箱显示QQ头像了，Gravatar使用国内镜像源。{message type="info" content="我的文件格式化了，所以显示行数可能不太一样，主要看方法名吧。"/}
-
-
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>{message type="error" content="注意脚本文件的引入顺序。"/}
-
docsify配置封面 在dosify一个神奇的文档网站生成工具中，我们介绍了如何安装docsify，这篇文章我们主要讲解一下如何配置docsify的封面。启用封面支持 还记得我们初始化完项目之后，有一个index.html的文件夹，docsify的所有配置都在这个里面。 需要我们需要启用封面，只需要在里面配置coverpage属性，设置为true即可。配置封面 启用封面支持参数后，默认的封面文件为_coverpage.md,因此，我们需要在项目根目录下创建一个_coverpage.md文件。 然后在封面文件中，输入自己的封面信息，下面的可以直接复制使用<!-- _coverpage.md --> # 香草物语 > 香草物语 [开始使用 Let Go](/README.md) 这样，一个简单的封面就设置好了，我们可以看一下效果。
-
docsify一个神奇的文档网站生成工具 之前一直使用的觅思文档作为内部在线知识库。公司内部最近在进行服务器漏洞扫描，觅思文档使用的Python+Django的形式（我用的Docker一键部署的那个，看Python的版本好像是3.7.3吧），由于Python注入漏洞影响3.10.4及以下版本，所以我尝试将Python升级到3.10.7，但是由于Django与Python版本对应关系存在问题，所以升级以失败告终。也是出于无奈，只能另寻其他替代产品。 经过对比，选择了一款小巧的文档网站生成工具-docsify。一、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的一些其他配置，比如更换主题、设置封面、安装插件等，我们稍后在进行介绍。
-
树莓派免费配置内网穿透 {message type="info" content="没有做内网穿透的树莓派是没有灵魂的。"/} 本文介绍使用Sakura Frp实现树莓派的内网穿透。因为树莓派上我有设置的宝塔面板，我们就实现在外网也能访问宝塔。一、Sakura Frp介绍Sakura有免费的，也有收费的，具体区别请看下图个人使用别搭建网盘的话也差不多够了，并且每天签到还能领流量。{anote icon="" href="https://www.natfrp.com/" type="secondary" content="官方网站"/} 首先需要注册一个Sakura账号并完成认证。这里不过多介绍，我们默认你已经有了账号。二、软件下载打开https://www.natfrp.com/tunnel/download找到arm64，下载软件后，保存到树莓派某个路径下，我这里放到/opt/sakurafrp/三、创建隧道点【穿透】，选择【隧道列表】。{message type="info" content="免费用户能创建两个隧道"/}{message type="warn" content="国内节点域名需要备案"/}服务没开，默认是灰色的四、配置服务我们要实现的目标就是每次开机时，能够自动连上我们的服务，避免每次开机自己设置。4.1、创建服务vi /lib/systemd/system/frpc@.service将以下内容复制进去[Unit] Description=SakuraFrp Service After=network.target [Service] Type=idle User=nobody Restart=on-failure RestartSec=60s ExecStart= /opt/frpc_linux_arm64 -f %i [Install] WantedBy=multi-user.target{message type="warn" content="/opt/sakurafrp/frpc_linux_arm使我们上面步骤下载的软件位置，注意替换"/}下载配置文件，并重命名为frpc.ini,并上传到frpc_linux_arm64同级目录。4.2、查看隧道信息点击隧道，选择【操作】，【配置文件】复制上面的内容，就是-f的那块4.3、打开控制台，开启服务systemctl start frpc@XXX:XXXXXXXXXX对应替换成隧道信息此时再查看隧道列表，可以看到我们隧道前面的灰色原点已经变成绿色了说明我们隧道开启成功了此时执行以下命令，设置开机启动systemctl enable frpc@XXX:XXXXXXX支持，服务已经配置完成，可以重启一下，验证一下隧道列表原点是否依然是绿色，如果是绿色，说明我们开机自启动是没问题的。五、域名解析此时，还剩最后一步，就是我们需要把我们自己的域名解析到Sakura上还是找到隧道配置文件，我们可以在下面看到server_addr我们需要将域名cname指向此地址。输入自己域名可以验证一下
-
