日常浏览github的时候,发现了 Gridea 。使用界面如下
get Start
只需配置github相关参数即可,点击同步会自动将静态Html文件上传的github仓库。是不是很简单!
优势
- 主题切换更加方便
- 图片资源上传更加方便
- 支持自定义主题
- 只需关注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>
效果如下 博客地址