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

最新推荐文章于 2022-09-12 16:05:22 发布
最新推荐文章于 2022-09-12 16:05:22 发布
阅读量933 收藏 1
点赞数
文章标签： hexo嵌入html传消息的

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

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

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

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

安装npm install hexo-toc --save

配置

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

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

好了，现在重启Hexo预览下效果吧。938b818e4f6996eb98dc9ee7836bcbae.png

Toc文章目录

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

F12查看生成的HTML代码：5fa2380dca0a52cf62ca6e4baed668cd.png

Toc生成代码

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

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

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

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

最低0.47元/天 解锁文章
侍酒师小田
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
hexo-toc:posts在发布帖子之前插入降价目录
05-04
己烯 在呈现帖子之前插入markdown TOC（目录）。 与本机帮助程序不同，此插件仅在原始markdown文件中找到占位符（ <!-- toc --> ）时才会注入TOC。 并且TOC将在占位符之后注入。 您需要做的就是在需要的位置和位置放置一个占位符（ <!-- toc --> ）。 注意：此插件不会破坏您的帖子（markdown文件），因此您可以将其粗体使用。 安装 npm install hexo - toc -- save 选项 可以在_config.yml指定 ，slugify函数和标题锚选项的所有选项： toc : maxdepth : 3 class : toc slugify : transliteration decodeEntities : false anchor : position : after symbol :
hexo安装toc插件
辉小歌的博客
04-12 3235
toc 插件是：添加生成文章目录的一个插件 一、安装(这里是hexo的路径下，也就是博客根目录下) cnpm install hexo-toc --save 二、配置博客根目录下的_config.yml文件： toc: maxdepth: 3 在最后的空白处添加 三、在markdown里使用 在Markdown中需要显示文章目录的地方添加 <!-- toc --> 这里...
hexo添加_hexo 如何给文章添加目录
weixin_39675215的博客
12-21 1313
我用hexo写了一个blog 安装了 hexo-toc插件,使用next主题,使用然后写了如下markdown文件:---title: Live Photo 初见date: 2016-03-09 15:20:08tags: iOS---### 闲话 ###`Live Photos` 是 iOS 9 的一个新特性，它提供相对于传统照片更生动的展现方式。当用户按下拍照键的时候，照片 APP 会捕捉比传...
hexo,butterfly添加系列文章功能（二级目录）
weixin_43404937的博客
01-19 2385
hexo+butterfly添加系列文章功能，使得能够在文章内部展示当前系列文章的目录结构
hexo-directory-category:根据文章文件目录自动将类别添加到Hexo文章中
05-08
十六进制目录类别 根据文章文件目录，自动将最重要的categories添加到Hexo文章中。 目录是指Hexo source _posts文件夹的相对表格文章文件路径。 特征 请参阅的详细信息 如果文章的前身没有选择类别，则根据文件目录自动将类别添加到文章。 易于对文章进行分类或更改类别。 安装 $ cd < your> $ npm install --save hexo-directory-category 选项 您可以在站点_config.yml配置此插件。 auto_dir_categorize: enable: true # options:true, false; default is true force: false # options:true, false; default is false enable-启用插件。 默认为true 。
hexo-tag-steam:为Hexo嵌入Steam标签插件
05-10
为Hexo嵌入Steam标签插件。 演示 入门 安装 npm install hexo-tag-steam --save 用法 {% steam https://store.steampowered.com/app/286000/Tooth_and_Tail/ %} 还是这样？ {% steam 286000 %} 定制 该嵌入具有....
hexo-tag-twitter：为Hexo嵌入twitter tweet标签插件
02-06
介绍这是一个Hexo标签插件，允许您将Twitter tweet嵌入到博客文章中。演示安装npm install hexo-tag-twitter --save用法{% twitter tweet-url %}要么{% twitter tweet-id user-id %}如果仅使用tweet-id ，请编辑_...
hexo-renderer-nunjucks:向Hexo网站添加对Nunjucks模板的支持
05-16
向网站添加对模板的支持。 所有后缀为.njk或.j2 （ ）的模板文件都将转换为HTML页面。 安装 注意：默认情况下从hexo@5.x安装此模块。 对于其他版本，请在您的Hexo项目文件夹中运行以下命令。 $ npm install hexo-...
hexo优化目录
weixin_38170065的博客
02-27 225
这次主要介绍一下如何使用Hexo自带的帮助函数在站点中添加文章目录。功能使用了Hexo提供的帮助函数，创建对应局部模块之前，首先要想想这块内容应该属于哪个布局？要添加到哪个局部模块下？考虑这些是为了整洁性，当你添加的东西越来越多的时候才不至于令自己混乱。 文章目录 文章目录肯定是添加到post布局上，这个毋庸置疑，因为只有看文章详情页的时候才需要目录。那么我们...
Hexo github页面生成插件
Jamling的专栏
07-21 896
使用hexo-generator-github可以将github的内容抓取到本地，配合主题来渲染输出。这样就不必手动修改hexo的页面了
Hexo内嵌网页踩坑记录
nonlinearthink的博客
07-09 1969
demo 预览 首先，我先来说一说这个需求产生的原因，我前些日子更新了一些 CSS 相关的博客，但是我发现，要展示 CSS 的效果，必须要用到一些交互的功能，我必须要写一些小 demo，然后嵌入到网页中去。 一开始，我使用的就是纯粹的 HTML 代码，加上 style 和 script 标签，直接写在 .md 里面。 我意识到这不是一个好方法，一篇博客有时候需要多个 demo ，随着代码越来越多，每个 demo 之间会产生冲突，我迫切需要隔离它们。 使用 iframe 随着我的代码越来越多，我发现在一篇博客
Hexo博客yilia主题文章添加目录
AomanHao的博客
08-27 4345
https://blog.csdn.net/u013082989/article/details/70212008 添加目录的文章有一些是自己添加css文件和修主题配置 作者也更新了文章大体目录的功能 打开配置文件themes/yilia/_config.yml 你可以选择toc设置为1 或者2 toc: 1 //每篇文章要想有目录就得 设置toc: true 目录文字必须是标...
添加一个悬浮组件（next 主题）
weixin_50626562的博客
04-03 1675
为博客添加一个悬浮组件，内置功能：回到顶端、实现深色模式、跳转评论区、播放背景音乐。
github-hexo简明安装教程TOC
weixin_43291755的博客
05-09 95
github-hexo简明安装教程 一、本地部署 git https://git-scm.com node.js https://nodejs.org/en/ 官方下载并一路默认安装 打开CMD命令行 npm install -g hexo-cli hexo init d:\my blog\hexo d: cd blog\hexo hexo s # 命令详情参考官方文档： https://hexo.io/zh-cn/docs/commands.html 正常的话，此时已可以通过浏览器访问“localhos
Hexo下内嵌搭建自定义非hexo渲染html网页的方法
LordD6的博客
02-09 609
研究背景: 在Hexo下,Source文件夹下所有内容都会被Hexo渲染,从而导致自定义网页是置于hexo渲染之下,以出现了以下情况 (以我的个人博客为例) 由此可见不仅导致自己制作的网页不能被正确的展示而且主题中的Sidebar,header,footer之类的东西都放了进来,与自己当初的设想背道而行. 解决方案: 需要解决的是要避免Hexo对其的渲染,Hexo 具有让用户自定义是否渲染的功能,从而我们可以保持原文件的原貌而非让Hexo渲染它 , 故需要打开站点配置文件下的_config.y.
hexo添加_（收录）为Hexo博客添加目录
weixin_30185907的博客
02-01 866
Hexo博客系统的核心支持生成目录(Table of Contents)，但其默认的主题Landscape并不支持目录的显示。我们只需对Landscape的主题文件稍作修改并添加一点目录的CSS就可以在文章前面显示友好的目录了。修改Landscape主题的ejs文件我们首先要编辑文章显示页面的模板，也就是themes/landscape/layout/_partial/article.ejs文件。...
在Hexo NexT主题中关闭指定文章的Table of Contents(TOC)
迷雾总会解
01-31 1091
NexT主题中在每篇文章单独的post页面，侧边栏会根据文章的多级标题自动生成Table of Contents。不过对于有些文章，我想关闭这项功能，怎么修改呢？
Hexo插件使用
测试
05-19 670
前言想优雅的使用Hexo这个博客还是很不容易的，需要学会使用一些插件，而有的插件之间有一定的冲突，我们需要进行一些修改，才能完美的适配我们的博客。 hexo-abbrlink原生的Hexo博客生成的目录是:year/:month/:day/:title，这就使得我们的url中携带大量中文，有些人通过hexo new title使用英文的title，这当然可行的，但是这不...
hexo自建博客文章右侧目录跳转不了
狂小虎/Anthony Dave的博客 KuangXiaoHu's Blogs
09-12 843
这个问题在小虎刚刚配置完博客的时候是不存在的，但是在后面的一些packages的升级后，发现点击文章目录跳转不了。
nodejs如何控制hexo生成的html
最新发布
04-05
Node.js可以通过Hexo提供的API控制生成的HTML。具体方法如下： 1. 在Hexo的根目录下创建一个JavaScript文件，例如`generate.js`。 2. 在`generate.js`中引入Hexo模块： ```javascript const Hexo = require('hexo'); ``` 3. 创建一个新的Hexo实例： ```javascript const hexo = new Hexo(process.cwd(), {}); ``` 4. 调用Hexo的`init()`方法初始化Hexo实例： ```javascript hexo.init().then(function() { // Hexo实例初始化成功后的操作 }); ``` 5. 可以通过调用Hexo的`load()`方法加载Hexo的配置和插件： ```javascript hexo.load().then(function() { // Hexo配置和插件加载成功后的操作 }); ``` 6. 可以通过调用Hexo的`generate()`方法生成静态文件： ```javascript hexo.generate().then(function() { // 静态文件生成成功后的操作 }); ``` 7. 可以在生成静态文件的过程中，通过Hexo的`extend.generator.register()`方法注册一个新的生成器，来控制生成的HTML： ```javascript hexo.extend.generator.register('my-generator', function(locals) { // 生成器的具体实现，可以通过locals对象获取Hexo的数据 return { path: 'my-page.html', data: '<html><head><title>My Page</title></head><body><h1>Hello, World!</h1></body></html>' }; }); ``` 上述代码注册了一个名为`my-generator`的新生成器，该生成器会生成一个名为`my-page.html`的HTML文件，内容为`<html><head><title>My Page</title></head><body><h1>Hello, World!</h1></body></html>`。 8. 最后，可以通过调用Hexo的`exit()`方法退出Hexo实例： ```javascript hexo.exit(); ``` 以上就是通过Node.js控制Hexo生成HTML的基本方法。具体实现可以参考Hexo的官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值