docsify搭建个人博客

已于 2024-06-06 15:46:56 修改
阅读量695 收藏 1
点赞数
文章标签： 经验分享
于 2022-07-27 16:59:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35596839/article/details/126018206
版权

预览

fearless’s blog

fearless’s puzzle game

fearless’s github

使用工具

一个神奇的文档网站生成器 docsify

安装doocsify

  • npm i docsify-cli -g

初始化项目

  • # docs：项目目录
docsify init ./docs

项目结构

  • index.html 入口文件
  • README.md 会做为主页内容渲染
  • .nojekyll 用于阻止 GitHub Pages 忽略掉下划线开头的文件
  • 更多自定义内容，查阅官网：docsify

本地预览

  • # docs：项目目录
docsify serve docs

插件安装

按照官网步骤安装：引入对应js，配置docsify对象

插件介绍，效果预览

全文搜索 - Search

  • 文档左上角搜索框

  • // todo 搜索某些关键词，search.min.js报错
search.min.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'substring')

  • 在这里插入图片描述

谷歌统计 - Google Analytics
emoji
  • 解析 emoji
外链脚本 - External Script
  • 执行外链脚本
图片缩放 - Zoom image
  • 可放大图片
在 Github 上编辑
  • 文档右上角 Edit on github 图标，可配置链接到github地址
  • 在这里插入图片描述
复制到剪贴板
  • 鼠标移入代码区，显示 Copy to clipboard 按钮
  • 在这里插入图片描述
Gitalk

  • 基于Preact和Github Issue的评论系统

  • 解决报错：Gitalk Error: Validation Failed. 442，原因是：文章URL过长，解决方法参考博客：处理 Gitalk Validation Failed(422)

  • 在这里插入图片描述

Pagination

  • docsify的分页导航插件

  • 在这里插入图片描述

字数统计
  • 文章字数统计，文档右上角显示
  • 在这里插入图片描述
Tabs
  • 在 Markdown 中显示选项卡
  • 在这里插入图片描述
docsify-sidebar-collapse

部署到Github

Create a new repository

将本地的docs项目push到新建的仓库

GitHub Pages 绑定二级域名

参考博客

公众号：
在这里插入图片描述

fearIess233
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
docsify：个人博客
02-20
学如乘舟，不进则退学习这件事，只是一种熟能生巧的简单技术这个知识点不想学，所以才必须开始学强迫开始-去做害怕的事，结果不过如此如此熟能生巧的简单技术技术精进需要多余的时间预算看不懂坚持读完并重复归纳...
doc-by-anything:用vercel和docsify搭建的个人博客文档
05-16
欢迎来到xiaok的博客说明此文档记录一些经常碰到或者记不住的问题及解决方案个人简介
Docsify侧边栏多级子目录生成
csding11的博客
08-13 1025
自动生成 docsify 的 sidebar 和 每个子目录中的 sidebar。
docsify搭建个人博客——简单公共知识库
hezhenfei8的专栏
10-24 469
整站建设流程：安装docsify > 排错>配置封面> 配搜索> 启动> 放md类的文章> 自动生成目录；更新文章流程： 把目录文章放到docsify\docs目录下，然后双击docsify-autosidebar.exe即可（它会重新生成目录）《见文章底部的参考》只支持.md文章集成。
探索 Docsify 的新时代：Docsify-Themeable，打造个性化文档站点
gitblog_00099的博客
04-17 831
探索 Docsify 的新时代：Docsify-Themeable，打造个性化文档站点 项目地址:https://gitcode.com/jhildenbiddle/docsify-themeable 在信息爆炸的时代，清晰、易读且美观的文档系统是知识分享和团队协作的关键。今天，我们要向大家推荐一个强大的开源项目——Docsify-Themeable，这是一个基于 Docsify 构建的主题化文档...
docsify 建立目录树脚本
sehnsucht
01-31 1657
docsify是轻量级的文档构建工具,无需生成html就能在网页展示markdown 我想着,将所有的markdown弄到一起,并用docsify生成网站,用github pages预览 但是找了半天好像没有自动生成目录树(并附带链接)的插件,找半天找到了gitee上面有人自己写的Docsify 笔记博客 : 自动生成sidebar 树状目录 然后我跑了之后不符合我的要求,在上面改…但是写完之后才发现,issues里面有人讲了改法,尴尬… 下面是我改的 var sidebarTxt = '- [**书不尽意
个人博客的使用-- docsify
咖啡味的小认真
08-28 851
效果 效果 基本代码 <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-8"> <link rel="s
md文件自动生成目录[docsify]
Hou_Qiang的专栏
04-26 1247
1.下载该工具，配置文件路径，双击程序运行即可 2.运行结果 3.生成文件 4.docsify 运行网站效果
使用docsify搭建文档管理平台
05-25
● 无需构建，写完文档直接发布 ● 容易使用并且轻量 (~19kB gzipped) ● 智能的全文搜索 ● 提供多套主题 ● 丰富的 API ● 支持 Emoji ● 兼容 IE10+ ● 支持 SSR
基于Html的niuhaiyong-docsify个人博客设计源码
最新发布
05-23
niuhaiyong-docsify是一个基于HTML的个人博客项目，包含694个文件，其中包括455个PNG图片文件、213个Markdown文件、7个JPG图片文件、4个XML文件、3个YAML文件、3个HTML文件、2个PDF文件、1个iml文件、1个LICENSE文件...
使用docsify搭建的个人学习主站，主要记载学习笔记，包括但不限于Java多线程、设计模式、MySQL及Git等各.zip
02-23
使用docsify搭建的个人学习主站，主要记载学习笔记，包括但不限于Java多线程、设计模式、MySQL及Git等各
sidebar-v2:响应式侧边栏，其中包含用于Leaflet，OpenLayers，Google Maps等的标签。
05-13
侧边栏v2 用于映射诸如或库的响应式工具条。 它或多或少是插件的后继者，因此是v2后缀。 （）上的示例代码 examples/ol3.html （预览）上的示例代码 OpenLayers 2 examples/ol2.html （预览）上的示例代码 谷歌地图 examples/gmaps.html （预览）上的示例代码 执照 sidebar-v2是免费软件，可以根据MIT许可证重新分发。
chanify:Chanify是一种安全而简单的通知工具。 该存储库是Chanify的命令行工具
04-02
查尼菲 English | Chanify是一种安全而简单的通知工具。 对于开发人员，系统管理员和所有人而言，都可以使用API​​推送通知。 目录 入门 安装 （1.0.0及更高版本）。 获取发送令牌，。 发信息。 安装 预编译二进制 下载预编译的二进制。 码头工人 $ docker pull wizjin/chanify:latest 从来源 $ go install github.com/chanify/chanify 用法 作为发件人客户 使用chanify发送消息。 # Text message $ chanify send --token= < token> --text= < message> # Image message $ chanify send --token= < token> --image= < image> 作为无服务器节点
纯js+html菜单栏折叠，支持数据无限嵌套
12-19
数据格式支持数组形式 list = [ { id: 1, name: '测试', children: [ { id: 11, name: '测试1', children: [ { id: 112, name: 'cs1' } ] }, { id: 12, name: '测试2' } ] }]
docsify-sidebar-collapse:一个docsify插件，支持侧边栏目录的扩展和折叠
05-11
docsify-sidebar-collapse 支持docsify侧边栏目录扩展和折叠 预习 用法 首先，确保已启用配置，并且根目录中提供了Markdown文件_sidebar.md 。 然后将脚本插入文档中，就像的用法一样 < script > window . $docsify = { loadSidebar : true , alias : { '/.*/_sidebar.md' : '/_sidebar.md' , } , subMaxLevel : 3 , ... sidebarDisplayLevel : 1 , // set sidebar display level } </ script > < script src =" //cdn.jsdelivr.net/npm/docsify/lib/doc
docsify search插件对多个md文件建索引查找
Prodigal
10-16 1144
如果配置了不管用,那应该是浏览器缓存的问题,换个浏览器访问试试看。docsify search插件对多个md文件建索引查找。index.html中配置paths 对应路径即可。附上完整index.html配置。// 不加载自定义测边栏。
docsify+github/gitee搭建个人在线文档
Mark_md的博客
11-22 5656
先安装node.js docsify官网-快速开始 全局安装工具 npm i docsify-cli -g 选择一个其他的路径，初始化项目 docsify init ./docs 初始化成功后，会在路径下创建一个docs文件夹，docs文件夹内有3个文件 本地预览 docsify serve docs 浏览器访问 http://localhost:3000 最开始 index.html 是这样子。 <!DOCTYPE html> <html lang="en"> &lt
博客园侧边栏收缩与展开
菜鸟-传奇
09-24 1114
博客园侧边栏收缩与展开 全部样式 //CSS部分 #fry_append { right: 1%; width: 46px; top: 0%; opacity: 0.37; position: fixed; z-index: 98; background-color: #fff; font-siz...
mac终端搭建docsify
03-24
非常好的问题！搭建 Docsify 的过程需要几个简单的步骤，步骤如下： 1. 首先，确定你的 Mac 上是否安装了 Node.js，如果没有，请先安装 Node.js。 2. 打开终端，运行以下命令安装 Docsify CLI： ``` npm i docsify-cli -g ``` 3. 选择一个目录作为 Docsify 的根目录，运行以下命令： ``` docsify init ./docs ``` 该命令会在当前目录下创建一个 docs 目录，并生成一个 `index.html` 文件和一个 `README.md` 文件。 4. 进入到 docs 目录，启动 Docsify 服务器，并在浏览器中查看网站： ``` cd docs docsify serve ``` 该命令会启动 Docsify 服务器，并在浏览器中打开 http://localhost:3000 查看网站。 完成上述步骤后，你就成功地搭建了 Docsify 站点！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fearIess233

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值