首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Markdown 自动生成文章目录

我们的之前在博客中使用了 Markdown 来为文章提供排版支持。Markdown 在渲染内容的同时还可以自动提取整个内容的目录结构,现在我们来使用 Markdown 为文章自动生成目录。...其中 markdown.extensions.codehilite 是代码高亮拓展,而 markdown.extensions.toc 就是自动生成目录的拓展(这里可以看出我们有先见之明,如果你之前没有添加的话记得现在添加进去...方法是在书写 Markdown 文本时,在你想生成目录的地方插入 [TOC] 标记即可。...接下来就在博客文章详情页的文章目录侧边栏渲染文章的目录吧!...其最终渲染后的效果就是: image.png 美化标题的锚点 URL 文章内容的标题被设置了锚点,点击目录中的某个标题,页面就会跳到该文章内容中标题所在的位置,这时候浏览器的 URL 显示的值可能不太美观

3.1K60

文章页面目录自动生成方案

下面说一下具体实现思路,并且文末会给出简便易用的导航生成工具。...点击右边的导航节点,会自动定位到对应标题元素。当时思考了一下它是怎么记录标题元素的,会不会是给标题元素加了一个什么id之类的属性?于是我看了一下生成的DOM: ?...三、具体实现 1、锚点生成函数 需要在每一个导航元素临近位置插入一个锚点,我这里插在导航元素前面,所以这个函数接收一个导航元素dom参数,并生成一个元素插入到dom之前。...2、锚点清理函数 用于清除生成的锚点元素。...4、调用导航数据生成函数并通过回调传给组件。 现在生成导航数据的函数已经有了,一个问题就是何时调用此函数呢?我们通过Vue指令来实现,可以在相应的钩子函数中调用。

1.3K10

vuepress博客自动生成分页文章列表

本来是打算自己开发一个博客类的 vuepress 主题的,但一直也没想好怎么去做,前几天又突然想要给博客先生成一个文章列表。...cwd, }); return Number.parseInt(stdout, 10) * 1000;};exports.getUpdatedTime = getUpdatedTime;但是生成文章列表我们肯定是想按照创建文章的时间倒序生成...node_modules@vuepress\plugin-git\lib\node\utils\getCreatedTime.js,用这个方法我们就能拿到 markdown 文件的 git 创建时间,然后直接根据这个时间来生成文章列表就可以了...注意这个列表组件里相当于只是一个模板组件,后面想要生成文章数据的时候,只用通过正则去替换掉 init 方法里 articleList 的赋值,默认是个空数组。...sidebar 是直接通过 sidebar.js 这个文件单独处理的,里面有直接去遍历博文目录,所以直接可以在里面来同时生成文章列表就行了,完整代码如下:const fs = require('node

20420

50行代码让你python自动生成文章

image 但是当我们掌握python这个好用的工具后,我们会发现如果用python来自动生成文章,这些无用的心得体会将不会再浪费我们宝贵的LOL时间,最近小编就从GitHub每日趋势榜上学习到这一个小项目...通过代码分分钟生成了上千字的文章,而且还引用了大量的名人名言,还会自己进行段落分割。...虽然仔细看有些都狗屁不通,但是都是些应付交差的心得体会,复制粘贴也是写,那何不如用代码来生成呢 2.代码 import os, re import random,readJSON data = readJSON...上下滚动查看更多 【友情提醒】 如果提交的文章会有人仔细阅读请慎用该项目 如果是学生会让交6000字退会申请,请无视学生会 参考链接: 狗屁不通文章生成器 https://github.com/menzi11.../BullshitGenerator 网页版文章生成器 https://suulnnka.github.io/BullshitGenerator/index.html

1.7K20

第 10 篇:小细节 Markdown 文章自动生成目录,提升阅读体验

Markdown 在解析内容的同时还可以自动提取整个内容的目录结构,现在我们来使用 Markdown 为文章自动生成目录。...其中 markdown.extensions.toc 就是自动生成目录的拓展(这里可以看出我们有先见之明,如果你之前没有添加的话记得现在添加进去)。...方法是在书写 Markdown 文本时,在你想生成目录的地方插入 [TOC] 标记即可。...接下来就在博客文章详情页的文章目录侧边栏渲染文章的目录吧!...其最终渲染后的效果就是: 处理空目录 现在目录已经可以完美生成了,不过还有一个异常情况,当文章没有任何标题元素时,Markdown 就提取不出目录结构,post.toc 就是一个空的 div 标签,如下

1.2K40

WordPress 自动发布文章

如果再从wp的后台一篇文章一篇文章的发布那更要命了,幸亏有这么个python库python_wordpress_xmlrpc。有了这个东西要导入就简单了。...需要注意的是,往上找到的多数代码,发布文章之后都是不允许评论的,需要添加以下代码: post.comment_status = 'open' 至于这个属性的值是怎么来的,可以去wp的数据库post表看一下...☆ * 网站名称:obaby@mars * 网址:https://h4ck.org.cn/ * 本文标题: 《WordPress 自动发布文章》 * 本文链接:https://h4ck.org.cn.../2022/09/wordpress-%e8%87%aa%e5%8a%a8%e5%8f%91%e5%b8%83%e6%96%87%e7%ab%a0/ * 转载文章请标明文章来源,原文标题以及原文链接。...---- 分享文章: 相关文章: WordPress 优化404页面 Vendetta theme for WordPress WordPress 仿Milw0rm 主题 WordPress 正文添加标签选项

52230

如何根据页面标签自动生成文章目录?分析+代码详解

作者:Mintimate 博客:https://www.mintimate.cn Mintimate's Blog,只为与你分享 目录生成.jpg 文章目录 文章目录功能大家再熟悉不过了吧,主要用于长篇文章...thatcanbe written in JavaScript,willeventually be written in JavaScript.” — — Jeff Atwood 问题分析 一般需要生成目录的文章...举个例子,我这个网站是这样的: [文章结构] 按F12查看其源码: [源码查看] 分析源码: 网页应该是根据Markdown生成文章分目录,使用html的标签,进行分层。...每个标题标签,自带ID,可以使用“#”进行文章定位 综上,就很清晰了: 提取内容部分的~标签(三层的目录……不多不少,嘿嘿),生成tree结构 提取/放置标签ID,作为目录索引,便于目录功能的文章定位...遍历文章 原生JavaScript 单层包括,也就是需要生成目录的文章,外层有一个或其他双标签进行嵌套,如: [只有一个div双标签进行嵌套] 这个时候我们在根标签加上一个ID即可

5K91
领券