当有大段的代码直接展示在页面时,看起来臃肿且不便于观看,此时将代码折叠是最好的选择。下面是在Hexo的Next主题上添加折叠功能。
1、在main.js中添加折叠js
Next主题的主要js位于 themes/next/source/js/src/post-details.js
,在下面添加一下代码段:
1 | $(document).ready(function(){ |
2、自定义内建标签
在主题scripts下添加一个tags.js,位于themes/next/scripts/tags.js
1 | /* |
再继续添加一个fold.js,位于themes/next/scripts/fold.js
1 | /* global hexo */ |
3、添加自定义样式
位于themes/next/source/css/_custom/custom.styl
1 | .hider_title{ |
4、使用
在我们需要折叠的地方前后添加便签,示例用法:
1 | {% fold 点击显/隐内容 %} |