hexo嵌入html传消息的,Hexo添加Toc支持，生成文章目录

Hexo提供了诸多插件来增强博客体验，地址http://hexo.io/plugins/。

在博客搬迁的时发现一个生成文章目录的插件，hexo-toc。

hexo-toc为防插件误认标记，文章以下出现的 ttoc 实际为 toc。

使用方法跟显示文章摘要类似，在Markdown中需要显示文章目录的地方添加。

安装npm install hexo-toc --save

配置

在博客根目录下的 _config.yml 中如下配置：toc:

maxDepth: 3maxDepth 表示目录深度为3，即最多生成三级目录。

好了，现在重启Hexo预览下效果吧。

Toc文章目录

然后你会发现点击目录链接，没反应！

F12查看生成的HTML代码：

Toc生成代码

标题id生成没问题，锚链接中的中文都被转义为 - 了。

看了该插件的issues中已经提到了这个问题，不过好像是没解决。

也没用搜索到其他人有关该插件的使用经验。

没办法，自己动手丰衣足食！

解决锚链接中文被转义

也没什么好的办法，只凭着入门级的Node水平，顺藤摸瓜！

从插件下的index.js开始，一路跟踪代码调试，在感觉可能出现问题的地方console输出内容，最终让我给找到了。

文件位置：Hexo根目录\node_modules\hexo-toc\node_modules\markdown-toc\index.js。

找到如下方法，把原来返回值注释掉，直接 return str; 。function slugify(str, opts){

if (opts && opts.slugify === false) return str;

if (opts && typeof opts.slugify === 'function') {

return opts.slugify(str, opts);

}

str = str.split('.').join('');

//return str.toLowerCase().replace(/[^a-z0-9]/g, '-');

return str;

}

现在重启Hexo后链接都正常可用了。

更好的方法是不改变插件源代码的情况下进行配置。

在以上方法中可以发现，插件有个slugify的配置项，当此项配置为false时即直接return str;。

所以，我们可以到_config.yml添加toc配置：toc:

maxDepth: 3

slugify: false

给Toc添加样式

如本文中文章目录样式，置于文章右侧，又加了个背景等。hexo-toc插件是生成的文章目录最终还是Markdown格式的，最后被Hexo的marked模块解析为HTML。

要添加样式先加选择器。

想通过修改插件代码增加选择器是行不通的，也不能直接在标记外包裹

。

因为添加了HTML标签的地方就不会在被marked模块解析。

那就只能在HTML生成之后增加，用js。hexo-toc插件生成文章目录时还在其前后增加了和注释。

解决办法就是把这两个注释替换为可控的

。

找到主题下的文章模版，我的是themes\yilia\layout\_partial\article.ejs。

在其末尾增加代码：

var tocEx = function(el){

var toc = document.querySelector(el), content = toc.innerHTML;

content = content.replace('', '

').replace('', '

');

toc.innerHTML = content;

}('.article-entry');

这样我们就为文章目录外包裹了一对

标签和一个toc类。

再写这个类的样式，放到主题下的相关css文件中。.toc {

float: right;

margin-left: 40px;

padding: 10px 20px;

background: #f1f1f1;

border-radius: 10px;

box-shadow: 0 0 3px #bbb;

}

这些都做完再次重启Hexo，成功！

2016年更新

Hexo 已经有生成文章目录的辅助函数了，使用更方便。我现在博客中的文章目录就是使用辅助函数生成的。

不需要安装额外插件！

不需要在文章中插入标记！

不需要在配置文件添加配置！

仅仅是在你的文章页模版中，插入调用辅助函数的代码即可。

class: 'post-toc',

list_number: true

}) %>

hexo嵌入html传消息的,Hexo添加Toc支持，生成文章目录相关推荐

利用Cloudflare为基于GitHub Pages的Hexo博客添加HTTPS支持
文章目录 ● 前言 ● 注册 Cloudflare ● 添加站点 ● 修改DNS ● 开启 HTTPS ● 重定向强制 HTTPS HTTP(超文本传输协议),是一个基于请求与响应,无状态的,应用层的 ...
hexo简单部署（一次解决hexo测试+上传github问题）
文章目录 Windows hexo本地部署+测试(上传前准备) git安装 Node.js安装安装hexo以及本地测试创建hexo所需文件 SSL证书报错主题调试上传GitHub git添加远 ...
hexo博客的yilia主题之添加分类
文章目录添加 categories 页面生成index.md文件修改index.md文件添加 categories 到menu菜单 yilia 主题的配置文件 main.826e88.css ...
用Github Pages+Hexo搭建博客之(八)Hexo博客Next主题添加统计文章阅读量（访问量/浏览量/阅读次数）功能
[置顶][专栏]用Github Pages+Hexo搭建博客文章目录 [置顶][专栏][用Github Pages+Hexo搭建博客](https://blog.csdn.net/qq_342439 ...
Hexo+yilia主题实现文章目录和添加视频
一.说明也可以点击这里查看此文章文章目录功能效果可以点击这里查看视频页面效果可以点击这里查看粗略实现,有问题可以在下方评论区留言,或者留言板留言二.文章目录功能 1.添加CSS样式打开th ...
Hexo建站进阶篇(让hexo进入后台运行)
Hexo建站进阶篇此篇着重讲述如何使用hexo进行个人博客编写上传- 没有搭建好环境的童鞋请移动至此 -– Hexo建站总结-个人博客建站基础篇继上篇开始~: 基础篇搭建完成后的小伙伴肯定有在为如 ...
手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置
前言前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. ...
php个推透传消息,GitHub - Lysice/laravel-getui: Laravel个推的集成包,支持单推/多推/全量推送/透传消息等功能。...
欢迎使用 Laravel扩展包 laravel-getui 网上有一款shaozeming/laravel-getui,自己在lumen下用,无奈报错依赖出问题,于是自己写了一款. 主要功能单人推送 ...
CentOS7设置静态IP、搭建单机版FastDFS图片服务器、使用FastDFS-Client客户端进行简单测试、实现图片上传、实现商品添加修改删除
CentOS7设置静态IP.搭建单机版FastDFS图片服务器.使用FastDFS-Client客户端进行简单测试.实现图片上传.实现商品添加修改删除 CentOS7设置静态IP而且还可以上网 192 ...

hexo嵌入html传消息的,Hexo添加Toc支持，生成文章目录

hexo嵌入html传消息的,Hexo添加Toc支持，生成文章目录相关推荐

最新文章

热门文章