给Jekyll静态博客添加ScrollSpy博文大纲目录
最近又双叒把博客模板换成了Jekyll,Jekyll无论上手难度和修改难度都是目前所见流行模板中最低的(以无基础小白的角度来讲),主题也相当丰富。这几年从Django折腾到纯手工自制,再到Hugo和Jekyll,不打算再折腾了,除非再出现更简单更酷炫的新模板吧。
内置TOC
jekyll的默认markdown语法是Kramdown。本身支持博文TOC,使用方法和原装Markdown差不多。
在文章头部输入以下文本,会根据header生成目录树。
* awsl //星号后可能需要空一格,后面需要加上一段文本(用途不明,但是非加不可)
{:toc}
效果如下
你也看到了,只能放在文章头部,而且太丑了,不能忍。
添加ScrollSpy博文menu
jekyll官网上列举了一些插件,其中包括一个TOC生成插件jekyll-toc-generator。但是这个插件要求预先安装一个文本解析器(nokogiri),该工具不支持ruby2.7以上的ruby版本,因此作罢开始另寻他法。
Scrollnav.js
本篇使用的插件是Scrollnav.js。是一个超轻量的浮动菜单脚本,使用便捷是第一要义。
使用方法❤
官网(Link)提供教程和演示demo。当然实际使用起来比官网教程更简单点。
step 1: 添加scrollnav脚本
在博文(post)的layout文件中添加scollnav相关html、js代码。可以下载scrollnav.js然后包含本地js文件,也可以直接用在线脚本:
<script src="https://unpkg.com/scrollnav@3.0.1/dist/scrollnav.min.umd.js"></script>
<script>
const ct = document.querySelector('.post-content'); //".post-content"指向文章内容所在的div,需根据实际情况修改
scrollnav.init(ct, {
debug: false,
easingStyle: 'linear',
//section为一级目录,subsection为二级目录
//以下两行意为h3为一级目录,h4为二级目录(个人只需要一级目录,所以注释了二级目录)
sections: ($('.post-content > h1').length>0) ? 'h3' : 'h4',
//subSections: ($('.post-content > h1').length>0) ? 'h4' : 'h5',
});
</script>
step 2:添加样式
修改sass文件夹中post相关样式文件(_post.scss)。
.scroll-nav__list, .scroll-nav__sub-list {
margin: 0;
padding-left: 1.4em;
list-style-type: none;
line-height: 20px;
}
.scroll-nav__item {
margin-bottom: 5px;
list-style-type: none;
}
.scroll-nav__item--active > a {
//padding: 5px;
font-weight: bold;
position: relative;
color: #000000;
//background: $red;
text-decoration: none;
//transition: 0.5s;
&:hover{
color:$black
}
}
.scroll-nav__link {
color: $black;
text-decoration: none;
//display: block;
//margin: 0 auto;
//padding-left: 42px;
}
最终menu效果如下:
给Jekyll静态博客添加ScrollSpy博文大纲目录的更多相关文章
- 如何利用腾讯云COS为静态博客添加动态相册
前言 本文首发于个人网站Jianger's Blog,欢迎访问订阅.个人博客小站刚建站不久,想着除了主题里的功能外再添加上相册模块,于是半搜索半摸索把相册模块搞出来了,最后采用了利用腾讯云对象存储作图 ...
- jekyll 在博客添加流程图
本文告诉大家如何在博客使用流程图. 如果你使用的是我博客的模板,那么就可以直接使用我说的文件,如果是自己的主题,就需要在自己文件对应的地方加上代码. 在我的博客里,需要添加下面的js到博客,可以打开 ...
- Hexo 博客快速整合gitalk组件,给静态博客添加动态评论功能!
什么是 hexo-plugin-gitalk
- 2019-8-31-jekyll-在博客添加流程图
title author date CreateTime categories jekyll 在博客添加流程图 lindexi 2019-08-31 16:55:59 +0800 2018-2-13 ...
- Github、Jekyll 搭建及优化静态博客方法指南
尝试自己写 Blog 的人,一般会经历三个阶段. 第一阶段,刚接触 Blog,觉得很新鲜,试着选择一个免费空间来写. 第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客. 第三阶段,觉 ...
- 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客
本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...
- MWeb 1.4 新功能介绍一:引入文件夹到 MWeb 中管理,支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览
之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...
- Jekyll博客添加Valine评论
Jekyll博客添加Valine评论 关于github搭建jekyl博客,在这里不做过多描述,详情参考: 百度搜索关键字:github搭建jekyll博客 官网:https://www.jekyll. ...
- Disqus评论框改造工程-Jekyll等静态博客实现Disqus代理访问
文章最初发表于szhshp的第三边境研究所转载请注明 关于博客评论 六月多说挂了,地球人都知道. 倡言.云跟帖.来必力都很烂,地球人都知道. 转Disqus的都是人才. Disqus使用中遇到的问题 ...
随机推荐
- 解决使用 el-table 中使用多选框 Checkbox 不刷新问题
问题 在 el-table 中使用 Checkbox 仅作为展示时,v-model 双向绑定就变得不那么适用了,这时候我们会使用 checked 属性来代替v-model. 问题来了当使用 filte ...
- WPF转换器之值转换器
WPF有两转转换器,一种是值转换器,另一种多值转换器,在开发过程中经常会从数据拉一些数据过来,比如存储性别的时候往往会用0或1,但在界面上肯定是要显示男或女,那么这个时候就可以用上值转换器 编写转换器 ...
- Python习题集(四)
每天一习题,提升Python不是问题!!有更简洁的写法请评论告知我! https://www.cnblogs.com/poloyy/category/1676599.html 题目 如果一个 3 位数 ...
- spring总结————AOP面向切面总结
spring总结————AOP面向切面 一.spring aop概念 spring aop面向切面编程,java是面向对象的语言. 真正的service层代码 业务逻辑层再处理业务之前和之后都要进行一 ...
- Kafka的面试题
1.Kafka的设计是什么样的呢?Kafka将消息以topic为单位进行归纳将向Kafka topic发布消息的程序成为producers.将预订topics并消费消息的程序成为consumer.Ka ...
- 记一次Xmrig挖矿木马排查过程
问题现象 Linux 服务器收到报警信息,主机 CPU 跑满. 自动创建运行 Docker 容器 xmrig, 导致其他运行中容器被迫停止. 问题原因 通过 top 命令可以看到有一个 xmrig 进 ...
- Python 趣题
如何优雅判断list为空 list_temp = [] if list_temp: # 存在值即为真 else: # list_temp是空的 在Python中,False,0,'',[],{},() ...
- [简单路径] Useful Decomposition
Ramesses knows a lot about problems involving trees (undirected connected graphs without cycles)! He ...
- C 2012年笔试题
1指出程序段中的错误:分析错误的原因,并进行修改 1.1函数 swap 将两个字符串(字符数组作实参,长度不超过 100)的内容进行交换 void swap(char *pa,char *pb) { ...
- pycharm创建虚拟环境venv和添加依赖库package
1.创建虚拟环境 因为项目采用不同版本的python,所依赖的库的版本也不一样,为了避免版本冲突,为每一个项目每个python版本创建一个虚拟环境,环境中所使用的依赖库也是独立存在,不会被其他版本或其 ...