日常浏览github的时候,发现了 Gridea 。使用界面如下

get Start

只需配置github相关参数即可,点击同步会自动将静态Html文件上传的github仓库。是不是很简单!

优势

  1. 主题切换更加方便
  2. 图片资源上传更加方便
  3. 支持自定义主题
  4. 只需关注mackdown编写文章即可

如何给自己的文章添加目录

在切换主题的时候,发现文章没有目录结构。对于大多数查阅文章的人来说,很多时候第一眼看到就是文章目录,来确认是否是自己需要学习的方向。所以目录功能还是很重要的。
查看作者的升级记录发现支持toc但是需要自己在主题中添加 升级记录

文章支持 @[toc] 显示文章目录,同时增加 post.toc 字段供主题显示

Html静态文件是通过模块引擎EJS构建,我们只需在对应主题下的post.ejs文件中添加如下代码即可。

<p class="show-toc-btn" id="show-toc-btn" onclick="showToc();" style="display:none">
          <span class="btn-bg"></span>
          <span class="btn-text">文章导航</span>
          </p>
  <div id="toc-article" class="toc-article">
      <span id="toc-close" class="toc-close" title="隐藏导航" onclick="showBtn();">×</span>
    <strong class="toc-title">文章目录</strong>
           <%- post.toc %>
         </div>
   <script type="text/javascript">
  function showToc(){
    var toc_article = document.getElementById("toc-article");
    var show_toc_btn = document.getElementById("show-toc-btn");
    toc_article.setAttribute("style","display:block");
    show_toc_btn.setAttribute("style","display:none");
    };
  function showBtn(){
    var toc_article = document.getElementById("toc-article");
    var show_toc_btn = document.getElementById("show-toc-btn");
    toc_article.setAttribute("style","display:none");
    show_toc_btn.setAttribute("style","display:block");
    };
   </script>

效果如下 博客地址

参考

Hexo+yilia主题实现文章目录和添加视频
Gridea