LIUのBlog
large picture of the cover

Docsify 进阶配置

1. 网站图标

  • 修改 index.html 文件，href 为图标的位置，ico 制作

    <head>
  <meta charset="UTF-8">
  <title>Document</title>

  <!--- 网站图标 -->
+ <link rel="shortcut icon" href="plugin\images\favicon.ico">
</head>

2. 加载样式

  • 修改 index.html 文件

    <body>
- <div id="app"></div>
+ <div id="app">🏃‍🏃‍🏃‍💨加载中...</div>
</body>

3. 名字与点击跳转链接

  • 修改 index.html 文件

    <script>
    window.$docsify = {
      // 文档标题
-     name: '📖小四先生の笔记',
+     name: '📖小四先生の笔记',

      // 点击文档标题后跳转的链接地址
-     nameLink: '',
+     nameLink: 'https://doc.xiaosi.world/#/',
    }
</script>

4. Github 横幅

  • 修改 index.html 文件
  • <script>
    window.$docsify = {
      // Github横幅
+     repo: 'https://github.com/zxiaosi/doc.git',
    }
</script>

5. 封面、封面与内容单独显示

  • 修改 index.html 文件

    <script>
    window.$docsify = {
      // 封面
      coverpage: true,

      // 封面和内容单独显示
+     onlyCover: true,
    }
</script>

  • 只开启封面的的话，向下滑动可以看到内容，也就是说封面和 README 内容在一个网页内。

  • onlyCover 属性可以将封面和 README 内容单独显示，通过封面的 Get Started 到达 README 内容页面

6. 自定义侧边栏

  • 修改 index.html 文件，将 loadSidebar 属性改为 false，并删除 ./docs 下的 _sidebar.md 文档

    <script>
    window.$docsify = {
      // 侧边栏
-     loadSidebar: true,
+     loadSidebar: false,
      subMaxLevel: 2,
    }
</script>

  • 可以用 CSS 来调整侧边栏的样式，在 <head></head> 之间加上以下代码

    <style>
    /* 以下是侧边栏(自定义) */
    aside.sidebar ul li {
      margin: 0;
      position: relative;
    }

    aside.sidebar ul li ul {
      margin: 6px 0;
    }

    aside.sidebar ul li p {
      padding-left: 22px;
      font-size: 18px;
      font-weight: normal;
    }

    aside.sidebar ul li a {
      line-height: 35px;
      font-size: 14px;    /* 导航栏字体大小 */
      padding: 3px 0 3px 22px;
    }

    aside.sidebar ul li.active > a {
      font-size: 16px !important;
    }

    aside.sidebar ul li.active > a:before {
      content: '' !important;
      position: absolute !important;
      margin: 0 !important;
      width: 10px !important;
      height: 10px !important;
      top: 15px !important;
      left: 0px !important;
      border-radius: 50% !important;
      background-color: #fed24a !important;
      box-shadow: 0 0 0 3px rgba(254, 210, 74, 0.4) !important;
    }
</style>

7. 距离顶部间距

  • 修改 index.html 文件

    <script>
    window.$docsify = {
      // 让你的内容页在滚动到指定的锚点时，距离页面顶部有一定空间。
+     topMargin: 25, // default: 0
    }
</script>

8. 切换页面自动跳转到页面顶部

  • 修改 index.html 文件

    <script>
    window.$docsify = {
      // 切换页面后是否自动跳转到页面顶部
+     auto2top: true,
    }
</script>

9. 小屏设备下合并导航栏到侧边栏

  • 修改 index.html 文件

    <script>
    window.$docsify = {
      // 小屏设备下合并导航栏到侧边栏
+     mergeNavbar: true,
    }
</script>

10. 搜索框

  • 修改 index.html 文件

    <script>
    window.$docsify = {
      // 搜索框
+     search: {
+       paths: 'auto',
+       placeholder: '🔍 搜索',
+       noData: '😒 找不到结果',
+       // Headline depth, 1 - 6
+       depth: 6,
+       maxAge: 86400000, // 过期时间，单位毫秒，默认一天
+     },
    }
</script>

  <!-- 全局搜索 -->
+ <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

11. 字数统计

  • 修改 index.html 文件

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

12. 回到顶部

  • 样式一

    • 修改 index.html 文件

      <script>
    window.$docsify = {
		...
    }
</script>

  <!-- 回到顶部功能 -->
+ <script src="https://cdn.jsdelivr.net/gh/wugenqiang/NoteBook@master/plugin/jquery.js"></script>
+ <script src="https://cdn.jsdelivr.net/gh/wugenqiang/NoteBook@master/plugin/jquery.goup.js"></script>
+ <script type="text/javascript">
+   $(document).ready(function () {
+     $.goup({
+       trigger: 100,
+       bottomOffset: 52,
+       locationOffset: 25,
+       //title: 'TOP',
+       titleAsText: true
+     });
+   });
+ </script>

  • 样式二

    • 修改 index.html 文件，在<span> </span><body></body> 的最后面加上如下代码

      <script>
    window.$docsify = {
      // 回到顶部
+     scrollToTop: {
+       auto: true,
+       text: '🔼',
+       right: 12,
+       bottom: 52,
+       offset: 25
+     },
    }
</script>

  <!-- 回到顶部功能 -->
+ <script src="//unpkg.com/docsify-scroll-to-top/dist/docsify-scroll-to-top.min.js"></script>

13. 添加页脚

  • 修改 index.html 文件

    <script>
    window.$docsify = {
      // 页脚
+     footer: {
+       copy: '<span>Copyright &copy; 2021 &nbsp 💖 &nbsp</span>',
+       auth: ' <strong><a href="https://github.com/zxiaosi/doc.git" target="_blank">Mr.XiaoSi</a></strong>',
+       pre: '<hr/>',
+       style: 'font-size: 18px; text-align: center;',
+     },
    }
</script>

  <!-- 页脚 -->
+ <script src="//unpkg.com/docsify-footer-enh/dist/docsify-footer-enh.min.js"></script>

14. 添加网站运行时间

  • 修改 index.html 文件

    <script>
    window.$docsify = {
      // 页脚
      footer: {
-       copy: '<span>Copyright &copy; 2021 &nbsp 💖 &nbsp</span>',
+       copy: '<span id="sitetime"></span> <br/> <span>Copyright &copy; 2021 &nbsp 💖 &nbsp</span>',
        auth: ' <strong><a href="https://github.com/zxiaosi/doc.git" target="_blank">Mr.XiaoSi</a></strong>',
        pre: '<hr/>',
        style: 'font-size: 18px; text-align: center;',
      },
    }
</script>

  <!-- 添加网站运行时间统计 -->
+ <script language=javascript>
      function siteTime() {
         window.setTimeout("siteTime()", 1000);
         var seconds = 1000;
         var minutes = seconds * 60;
         var hours = minutes * 60;
         var days = hours * 24;
         var years = days * 365;
         var today = new Date();
         var todayYear = today.getFullYear();
         var todayMonth = today.getMonth() + 1;
         var todayDate = today.getDate();
         var todayHour = today.getHours();
         var todayMinute = today.getMinutes();
         var todaySecond = today.getSeconds();
         /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
         year - 作为date对象的年份，为4位年份值
         month - 0-11之间的整数，做为date对象的月份
         day - 1-31之间的整数，做为date对象的天数
         hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
         minutes - 0-59之间的整数，做为date对象的分钟数
         seconds - 0-59之间的整数，做为date对象的秒数
         microseconds - 0-999之间的整数，做为date对象的毫秒数 */

         /* 建站时间 */
         var t1 = Date.UTC(2021, 03, 01, 00, 00, 00); 
         var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
         var diff = t2 - t1;
         var diffYears = Math.floor(diff / years);
         var diffDays = Math.floor((diff / days) - diffYears * 365);
         var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
         var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
         var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
         document.getElementById("sitetime").innerHTML = " 本站已安全运行 " + diffYears + " 年 " + diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分 " + diffSeconds + " 秒 ";
      }
      siteTime();
+ </script>

15. 复制到剪切板

  • 修改 index.html 文件

    <script>
    window.$docsify = {
      // 复制样式
+     copyCode: {
+         buttonText: 'Copy',
+         errorText: 'Error',
+         successText: 'OK!'
+     },
    }
</script>

  <!-- 复制到剪切板 -->
+ <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>

16. 表情符号插件

  • 修改 index.html 文件，可以从 HTML 表情符号 复制图标

    <script>
    window.$docsify = {
		...
    }
</script>

  <!-- 表情符号 -->
+ <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>

17. 图片放大插件

  • 修改 index.html 文件

    <script>
    window.$docsify = {
		...
    }
</script>

  <!-- 图片放大 -->
+ <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>

18. 复制提醒插件

  • 修改 index.html 文件，先在 <head></head> 加上 <link.. ，然后在 <body></body> 中加上 <!-- 复制提醒 -->...

    <head>
  ...

  <!-- alert -->
+ <link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" type='text/css' media='all' />
</head>

<body>
    ...

    <script>
        window.$docsify = {
            ...
        }
    </script>

      <!-- 复制提醒 -->
+     <script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
+     <script>
+       document.body.oncopy = function () {
+         swal("复制成功 ",
+               "若要转载或引用请务必保留原文链接，并申明来源。",
+               "success"); };
+     </script>
</body>

19. 红心点击特效插件

  • 修改 index.html 文件

    <script>
    window.$docsify = {
		...
    }
</script>

  <!-- 红心点击特效 -->
+ <script src="//cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/js/click_heart.js"></script>

20. 访问量统计插件

  • 修改 index.html 文件

    <script>
    window.$docsify = {
		...
    }
</script>

  <!-- 访问量统计 -->
+ <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  • 可以把下面代码放在任何地方，这里我放在了 ./docs/_coverpage.md 里

    <span id="busuanzi_container_site_pv" style='display:none'>
    👀 本站总访问量：<span id="busuanzi_value_site_pv"></span> 次
</span>
<span id="busuanzi_container_site_uv" style='display:none'>
    | 🚴‍♂️ 本站总访客数：<span id="busuanzi_value_site_uv"></span> 人
</span>

21. 离线模式

  • 这里已经整理好了一份代码，你只需要在网站根目录下创建一个 sw.js 文件，并粘贴下面的代码。

    /* ===========================================================
 * docsify sw.js
 * ===========================================================
 * Copyright 2016 @huxpro
 * Licensed under Apache 2.0
 * Register service worker.
 * ========================================================== */

const RUNTIME = 'docsify'
const HOSTNAME_WHITELIST = [
  self.location.hostname,
  'fonts.gstatic.com',
  'fonts.googleapis.com',
  'cdn.jsdelivr.net'
]

// The Util Function to hack URLs of intercepted requests
const getFixedUrl = (req) => {
  var now = Date.now()
  var url = new URL(req.url)

  // 1. fixed http URL
  // Just keep syncing with location.protocol
  // fetch(httpURL) belongs to active mixed content.
  // And fetch(httpRequest) is not supported yet.
  url.protocol = self.location.protocol

  // 2. add query for caching-busting.
  // Github Pages served with Cache-Control: max-age=600
  // max-age on mutable content is error-prone, with SW life of bugs can even extend.
  // Until cache mode of Fetch API landed, we have to workaround cache-busting with query string.
  // Cache-Control-Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=453190
  if (url.hostname === self.location.hostname) {
    url.search += (url.search ? '&' : '?') + 'cache-bust=' + now
  }
  return url.href
}

/**
 *  @Lifecycle Activate
 *  New one activated when old isnt being used.
 *
 *  waitUntil(): activating ====> activated
 */
self.addEventListener('activate', event => {
  event.waitUntil(self.clients.claim())
})

/**
 *  @Functional Fetch
 *  All network requests are being intercepted here.
 *
 *  void respondWith(Promise<Response> r)
 */
self.addEventListener('fetch', event => {
  // Skip some of cross-origin requests, like those for Google Analytics.
  if (HOSTNAME_WHITELIST.indexOf(new URL(event.request.url).hostname) > -1) {
    // Stale-while-revalidate
    // similar to HTTP's stale-while-revalidate: https://www.mnot.net/blog/2007/12/12/stale
    // Upgrade from Jake's to Surma's: https://gist.github.com/surma/eb441223daaedf880801ad80006389f1
    const cached = caches.match(event.request)
    const fixedUrl = getFixedUrl(event.request)
    const fetched = fetch(fixedUrl, { cache: 'no-store' })
    const fetchedCopy = fetched.then(resp => resp.clone())

    // Call respondWith() with whatever we get first.
    // If the fetch fails (e.g disconnected), wait for the cache.
    // If there’s nothing in cache, wait for the fetch.
    // If neither yields a response, return offline pages.
    event.respondWith(
      Promise.race([fetched.catch(_ => cached), cached])
        .then(resp => resp || fetched)
        .catch(_ => { /* eat any errors */ })
    )

    // Update the cache with the version we fetched (only for ok status)
    event.waitUntil(
      Promise.all([fetchedCopy, caches.open(RUNTIME)])
        .then(([response, cache]) => response.ok && cache.put(event.request, response))
        .catch(_ => { /* eat any errors */ })
    )
  }
})

  • 修改 index.html 文件

    <script>
    window.$docsify = {
		...
    }
</script>

  <!-- 离线模式 -->
+ <script>
+   if (typeof navigator.serviceWorker !== 'undefined') {
+     navigator.serviceWorker.register('sw.js')
+   }
+ </script>

22. Gitter 评论

  • Gitter 注册与使用

  • 修改 index.html 文件

    <script>
    window.$docsify = {
		...
    }
</script>

  <!--使用 Gitter 实现一个 IM 即时通讯聊天室功能-->
+ <script>
+ ((window.gitter = {}).chat = {}).options = {
+   room: 'zxiaosi/blogshare'
+ };
+ </script>
+ <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>

23. 支持 LaTex 语言插件

  • 修改 index.html 文件

    <head>
  ...

  <!-- latex -->
+ <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" />
</head>

<body>
    ...

    <script>
        window.$docsify = {
            ...
        }
    </script>

      <!-- 支持 LaTex 语言 -->
+     <script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
</body>

24. 其他插件

  • 具体效果未知

    <!-- Markdown 引用样式美化 -->
  <script src="https://unpkg.com/docsify-plugin-flexible-alerts"></script>

  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-bash.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-java.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-python.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-cpp.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-c.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-javascript.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-css.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-powershell.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-sql.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-yaml.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-properties.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/matlab.min.js"></script>

25. CSS 样式

  • 本人水平有限，看不懂大佬的写的 CSS 代码，就摘取了一些。
  • css 预览

site logo

LIUのBlog

© 2024 LIUのBlog