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

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

2022-12-22 0 1,154
资源编号 50080 最近更新 2022-12-22
¥ 0人民币 升级VIP
立即下载 注意事项
下载不了?请联系网站客服提交链接错误!
增值服务: 安装指导 环境配置 二次开发 模板修改 源码安装

本期推荐的docsify 即时生成您的文档网站。与 GitBook 不同的是,它不会生成静态 html 文件。相反,它会巧妙地加载和解析您的 Markdown 文件并将它们显示为网站。

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

特征

  • 没有静态构建的 html 文件
  • 简单轻便
  • 智能全文搜索插件
  • 多个主题
  • 有用的插件 API
  • 表情符号支持
  • 兼容IE11
  • 支持服务端渲染

快速开始

建议docsify-cli全局安装,有助于在本地初始化和预览网站。

npm i docsify-cli -g在子目录init中

初始化

如果要在./docs子目录下编写文档,可以使用init命令。

docsify init ./docs

写作内容

完成后,您可以在子目录init中看到文件列表。./docs

  • index.html作为入口文件
  • README.md作为主页
  • .nojekyll防止 GitHub Pages 忽略以下划线开头的文件

您可以轻松地更新文档中的内容./docs/README.md,当然您也可以添加更多页面。

预览您的网站

使用 运行本地服务器docsify serve。您可以在浏览器上预览您的网站http://localhost:3000。

docsify serve docs

手动初始化

如果您不喜欢npm或无法安装该工具,您可以手动创建index.html:

<!-- index.html -->

<!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="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/themes/vue.css" />
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      //...
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>

指定 docsify 版本

v4.x.x请注意,在以下两个示例中,当发布新的 docsify 主要版本时(例如=> v5.x.x),需要手动更新 docsify URL 。定期检查 docsify 网站以查看是否发布了新的主要版本。

在 URL ( ) 中指定主要版本@4将允许您的站点自动接收非破坏性增强(即“次要”更新)和错误修复(即“补丁”更新)。这是加载 docsify 资源的推荐方式。

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/themes/vue.css" />
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>

如果您希望将 docsify 锁定到特定版本,请@在 URL 中的符号后面指定完整版本。这是确保您的网站外观和行为方式相同的最安全方法,无论对未来版本的 docsify 进行任何更改。

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4.11.4/themes/vue.css">
<script src="//cdn.jsdelivr.net/npm/docsify@4.11.4"></script>

手动预览您的网站

如果您的系统上安装了 Python,您可以轻松地使用它来运行静态服务器来预览您的站点。

cd docs && python -m SimpleHTTPServer 3000
cd docs && python -m http.server 3000

加载对话框

如果你愿意,你可以在 docsify 开始渲染你的文档之前显示一个加载对话框:

<!-- index.html -->

<div id="app">Please wait...</div>

如果你改变了,你应该设置data-app属性el:

<!-- index.html -->

<div data-app id="main">Please wait...</div>

  <script>
    window.$docsify = {
      el: '#main'
    }
  </script>

配置

window.$docsify您可以通过定义为对象来配置 Docsify :

<script>
  window.$docsify = {
    repo: 'docsifyjs/docsify',
    maxLevel: 3,
    coverpage: true,
  };
</script>

配置也可以定义为一个函数,在这种情况下,第一个参数是 Docsifyvm实例。该函数应返回一个配置对象。vm这对于在诸如降价配置之类的地方进行引用很有用:

<script>
  window.$docsify = function(vm) {
    return {
      markdown: {
        renderer: {
          code(code, lang) {
            // ... use `vm` ...
          },
        },
      },
    };
  };
</script>

加载导航栏

  • 类型:Boolean|String
  • 默认:false

_navbar.md如果为true则从 Markdown 文件加载导航栏,否则从指定的路径加载它。

window.$docsify = {
  // load from _navbar.md
  loadNavbar: true,

  // load from nav.md
  loadNavbar: 'nav.md',
};

加载侧边栏

  • 类型:Boolean|String
  • 默认:false

_sidebar.md如果为true则从 Markdown 文件加载侧边栏,否则从指定的路径加载它。

window.$docsify = {
  // load from _sidebar.md
  loadSidebar: true,

  // load from summary.md
  loadSidebar: 'summary.md',
};

隐藏侧边栏

  • 类型 :Boolean
  • 默认:true

此选项将完全隐藏您的侧边栏,并且不会在侧面呈现任何内容。

window.$docsify = {
  hideSidebar: true,
};

主页

  • 类型:String
  • 默认:README.md

README.md在您的 docs 文件夹中将被视为您网站的主页,但有时您可能需要提供另一个文件作为您的主页。

window.$docsify = {
  // Change to /home.md
  homepage: 'home.md',

  // Or use the readme in your repo
  homepage:
    'https://raw.githubusercontent.com/docsifyjs/docsify/master/README.md',
};

如果您在侧边栏中有指向主页的链接,并希望在访问根 url 时将其显示为活动状态,请确保相应地更新侧边栏:

- Sidebar
  - [Home](/)
  - [Another page](another.md)

主题

有一些可用的主题,包括官方和社区制作的。复制Vue和buble网站自定义主题以及@liril-net贡献的黑色风格主题。

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/buble.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/pure.css" />

压缩文件在/lib/themes/.

<!-- compressed -->

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/buble.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/dark.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/pure.css" />

如果您有任何想法或想要开发新主题,欢迎您提交pull request。

GitHub 页面

有三个地方可以为您的 GitHub 存储库填充文档:

  • docs/文件夹
  • 主分支
  • gh-pages 分支

建议您将文件保存到存储库分支的./docs子文件夹中。master然后master branch /docs folder在存储库的设置页面中选择作为 GitHub Pages 源。

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

GitLab 页面

如果要部署 master 分支,请.gitlab-ci.yml使用以下脚本创建一个:

.public解决方法是cp不会在无限循环中复制到public/自身。

pages:
  stage: deploy
  script:
  - mkdir .public
  - cp -r * .public
  - mv .public public
  artifacts:
    paths:
    - public
  only:
  - master

—END—

开源协议:MIT license

资源下载此资源为免费资源立即下载

申明:本文由第三方发布,内容仅代表作者观点,与本网站无关。对本文以及其中全部或者部分内容的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。本网发布或转载文章出于传递更多信息之目的,并不意味着赞同其观点或证实其描述,也不代表本网对其真实性负责。

七爪网 免费源码 docsify一个神奇的文档站点生成器 https://www.7claw.com/50080.html

分享免费的开源源码

常见问题
  • 1、自动:拍下后,点击(下载)链接即可下载;2、手动:拍下后,联系卖家发放即可或者联系官方找开发者发货。
查看详情
  • 1、源码默认交易周期:手动发货商品为1-3天,并且用户付款金额将会进入平台担保直到交易完成或者3-7天即可发放,如遇纠纷无限期延长收款金额直至纠纷解决或者退款!;
查看详情
  • 1、七爪会对双方交易的过程及交易商品的快照进行永久存档,以确保交易的真实、有效、安全! 2、七爪无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保,请买家自行鉴别; 3、在源码同时有网站演示与图片演示,且站演与图演不一致时,默认按图演作为纠纷评判依据(特别声明或有商定除外); 4、在没有”无任何正当退款依据”的前提下,商品写有”一旦售出,概不支持退款”等类似的声明,视为无效声明; 5、在未拍下前,双方在QQ上所商定的交易内容,亦可成为纠纷评判依据(商定与描述冲突时,商定为准); 6、因聊天记录可作为纠纷评判依据,故双方联系时,只与对方在七爪上所留的QQ、手机号沟通,以防对方不承认自我承诺。 7、虽然交易产生纠纷的几率很小,但一定要保留如聊天记录、手机短信等这样的重要信息,以防产生纠纷时便于七爪介入快速处理。
查看详情
  • 1、七爪作为第三方中介平台,依据交易合同(商品描述、交易前商定的内容)来保障交易的安全及买卖双方的权益; 2、非平台线上交易的项目,出现任何后果均与互站无关;无论卖家以何理由要求线下交易的,请联系管理举报。
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务