前言 早就想给博客文章加个目录了，以前是能力不够，即使看了别人的Demo，也不会搞，现在只要克服懒癌，应该也没啥困难。于是开始搞起。...代码 // 生成两级目录索引列表 function GenerateContentList()...{ var mainContent = $('#mulu'); //在id为mulu的div里面加载目录 var h1_list = $('#yl h1'); var h2_list = $...(h1_list.length>0) { var content = ''; content += ''; content += '目录...其中h1,h2可单独匹配，h3无法单独匹配，简单来说就是文章中只有h3的话目录不会启用。 参考 脚本之家：利用JS生成博文目录及CSS定制博客
发现很多主题的文章页面都有文章导读目录，感觉很有意思，也想给自己的主题加一个。 寻找 有现成的轮子肯定不用重复去造，在主题本来就用了JQuery的情况下，肯定优先使用JQuery的插件。...ChatGPT给推荐了几个： tocbot jquery-tocify.js 然后使用后不能在没有id的h标题里面自动生成锚点id，不能点击滚动，继续寻找。...发现有使用 autoc.js 来实现的，github去找 autoc.js，发现开发者已升级到 outline.js 了，地址为:https://github.com/yaohaixiao/outline.js...> 在sidebar.php想要显示目录的地方上加上id="xa-toc" 在$(document).ready()中加上代码 //如果文章则生成导读 if($('#xa-post-content').length > 0 && $('#
介绍： autocjs 是一个专门用来生成文章目录（Table of Contents）导航的工具。...autocjs 会查找文章指定区域中的所有 h1~h6 的标签，并自动分析文章的层次结构，生成文章的目录导航（独立的侧边栏菜单，或者在文章的开始处生成文章目录）。...和 CMD 规范； 可以作为独立模块使用，也可以作为 jQuery 插件使用； 支持中文和英文（标题文字）； 界面简洁大方； 拥有 AnchorJS 的基础功能； 即支持生成独立文章目录导航菜单...，又可以直接在文章中生成目录导航； 可直接在段落标题上显示段落层级索引值； 配置灵活，丰富，让你随心所欲掌控 AutocJS； 1.在前端引入 <link rel="stylesheet.../ 不配置 selector 属性，即使用默认选择器 title: '<em>文章</em><em>目录</em>', }); 4.效果 ?
前言 生成目录结构 function getCatalog(className){ let showDom = document.querySelector("."...div class="catalog" v-show="showCatalog"> 目录...showCatalog" @click="showCatalog = true"> JS { data()
看过百度百科的同学都知道，如果百科文章比较长，那么他会生成一个目录，不仅增强了用户体验，还为文章引入了锚点内链，对SEO优化起到了十分积极的作用。...请不要以为这个功能很复杂，其实目录功能只是牵扯到一个正则，一个JS和一个CSS而已，对于我们wordpress来说，很多插件已经实现了此功能。...使用 安装后请至wordpress后台->设置->文章内索引： 老高@PHPer使用如下配置： 开启 插件默认对所有文章关闭，如果你想在某一篇文章中使用目录，请在编辑日志页面勾选 在此文章/页面中开启...Tips 也许你已经发现了，PHPer@老高使用了锚点之间的平滑滚动，如果你也希望实现此效果，请将下面的代码引入你的文章模板中 $(document).ready(function() { $...} } }); }); 注意 可能你还没发现，上面的代码会出现一些小问题，比如你的网站留言也会出现某些锚点，点击它们将会出现很多意想不到的效果，所以我们需要将锚点控制在目录范围内
我们的之前在博客中使用了 Markdown 来为文章提供排版支持。Markdown 在渲染内容的同时还可以自动提取整个内容的目录结构，现在我们来使用 Markdown 为文章自动生成目录。...其中 markdown.extensions.codehilite 是代码高亮拓展，而 markdown.extensions.toc 就是自动生成目录的拓展（这里可以看出我们有先见之明，如果你之前没有添加的话记得现在添加进去...在渲染 Markdown 文本时加入了 toc 拓展后，就可以在文中插入目录了。方法是在书写 Markdown 文本时，在你想生成目录的地方插入 [TOC] 标记即可。...在页面的任何地方插入目录 上述方式的一个局限局限性就是只能通过 [TOC] 标记在文章内容中插入目录。如果我想在页面的其它地方，比如侧边栏插入一个目录该怎么做呢？...接下来就在博客文章详情页的文章目录侧边栏渲染文章的目录吧！
下面说一下具体实现思路，并且文末会给出简便易用的导航生成工具。...三、具体实现 1、锚点生成函数 需要在每一个导航元素临近位置插入一个锚点，我这里插在导航元素前面，所以这个函数接收一个导航元素dom参数，并生成一个元素插入到dom之前。...2、锚点清理函数 用于清除生成的锚点元素。...4、调用导航数据生成函数并通过回调传给组件。 现在生成导航数据的函数已经有了，一个问题就是何时调用此函数呢？我们通过Vue指令来实现，可以在相应的钩子函数中调用。...' }">内容不出现在导航 导航目录
设置方式 首先我们需要申请开通js权限，然后将目录js代码复制到博客侧边栏公告（支持HTML代码） （支持 JS 代码）中，如下所示： ?...生成目录JS代码 // 生成目录索引列表 function GenerateContentList() { var mainContent...content += '思维导航：'; content += ''; //目录遍历...''; content += ' '; content += '文章正文...= 0) { $($('#cnblogs_post_body')[0]).prepend(content); } } } //执行自动生成目录索引列表
当我们浏览其他同学的优秀文章时，就会发现这些童鞋们的文章前面都有一些文章的目录，点击自动跳转到相应的模块。为博客文章添加了一份趣味，又显得文章有一点上档次。...如图所示 那么，这种文章是怎么自动生成的呢 其实很简单就是一句代码完全可以自动生成。...使用之前同学们可以正常的利用Markdown正常写标题，只需要在最后结尾的时候在文章头部添加一下代码即可自动生成 @[TOC](这里为目录的名称) （）括号可以不用书写，不书写则默认为‘文章目录’
Markdown 在渲染内容的同时还可以自动提取整个内容的目录结构，本文将教你如何使用 Markdown 来为文章自动生成目录。...其中 markdown.extensions.codehilite 是代码高亮拓展，而 markdown.extensions.toc 就是自动生成目录的拓展。...在渲染 Markdown 文本时加入了 toc 拓展后，就可以在文中插入目录了。方法是在书写 Markdown 文本时，在你想生成目录的地方插入 [TOC] 标记即可。...在页面的任何地方插入目录 上述方式的一个局限局限性就是只能通过 [TOC] 标记在文章内容中插入目录。如果我想在页面的其它地方，比如侧边栏插入一个目录该怎么做呢？...美化标题的锚点 URL 文章内容的标题被设置了锚点，点击目录中的某个标题，页面就会跳到该文章内容中标题所在的位置，这时候浏览器的 URL 显示的值可能不太美观，比如像下面的样子： http://127.0.0.1
最终问题描述： 群分享的文章已经用Mikecrm表单工具采集到一个xls文件中，包含“姓名、文章标题、文章链接”三列，想生成一份所有文章的合集，用PDF格式分享出来。...XLS文件样例 问题分解： 直接生成Doc或PDF相当有难度，根据《怎样解题》的策略，面对相对复杂的问题，首先要办法把问题分解为多个简单的过程，我把该问题分解为两步： 第一步：先根据XLS生成一份HTML...文章目录，点击文末左下角的“阅读原文”看输出的最终效果 第二步：再利用开源的转换工具生成DOC或PDF，我已经有思路，正在试验中，以后再发布 本次先解决第一步的问题。...试着读取csv 假设201701.csv文件存放在D盘根目录下，百度一下python中的csv读取教程，原来只需要4行，就可以读出其全部内容。...请点击文末左下角的“阅读原文”看最后生成的网页效果。
博客园文章版权声明(js自动生成) 一.代码 我比较直接,直接上代码,把下面html放右侧,首页,页脚都可以 #MySignature { display: block
WPJAM Basic 的文章目录扩展，很多人用了之后，为了适应自己的主题，就修改默认的 JS 和 CSS 代码，但是一不小心改错了，显示不正确，人生就那么悲催，哈哈。...那么这里提供一下默认的 JS 代码和 CSS 代码，让你可以恢复到默认。...文章目录扩展默认的 JS 代码 jQuery(document).ready(function(){ jQuery('#toc span').on('click',function(){ if....html('[显示]'); } jQuery('#toc ul').toggle(); jQuery('#toc small').toggle(); }); }); 文章目录扩展默认的
在《零基础学编程019：生成群文章目录》这一节里，我已经可以用读csv文本文件的办法，配合markdown语法自动生成所有文章的目录。...因为我已经学过R语言，看了一下pandas的快速入门，就找到了这条语句： df = df.loc[:, ["姓名", "文章标题", "文章超链接", "是否公开文章的链接？"..., "笔名"]] 原表格中还包括openid、填写时间、IP地址、备注等列，对于我的文章汇总没有用处，而真正有用的就是"姓名"、"文章标题"、"文章超链接"、"是否公开文章的链接？"...= '不公开') : str += title + "\n"; else : str += "[" + title + "](" + url + ")\n" 生成的文本是...Markdown格式（点这里了解Markdown），还可以更懒一些，把生成的文本直接复制到剪贴板中，从stackoverflow上抄来代码： from tkinter import Tk r = Tk
使用步骤 在显示的地方添加下面的代码 添加JS function categoryCreater...each(function(i,item){ if(i==0){ $("#category").append('目录...} $(document).ready(function(){ categoryCreater('main-article-contant'); }); 注意: js
掌握fs同步方法 使用path 在测试代码目录创建目录data,创建文件data/class.js //class .js 文件 module.exports={ fun1:()=>'run fun1...', fun2:()=>'run fun2' } 创建data/fun.js //fun.js module.exports=()=>'function run' 创建文件testNow目录，创建...testName = baseName.replace(extName, `.spec${extName}`) return path.format({ // 目录.../abc/class.js'); // expect(ret).toBe('..../abc/__test__/class.spec.js'); // }) // test('测试 测试代码生成',()=>{ // const src=new (require('..
Markdown 在解析内容的同时还可以自动提取整个内容的目录结构，现在我们来使用 Markdown 为文章自动生成目录。...在渲染 Markdown 文本时加入了 toc 拓展后，就可以在文中插入目录了。方法是在书写 Markdown 文本时，在你想生成目录的地方插入 [TOC] 标记即可。...接下来就在博客文章详情页的文章目录侧边栏渲染文章的目录吧！...其最终渲染后的效果就是： 处理空目录 现在目录已经可以完美生成了，不过还有一个异常情况，当文章没有任何标题元素时，Markdown 就提取不出目录结构，post.toc 就是一个空的 div 标签，如下...： 对于这种没有目录结构的文章，在侧边栏显示一个目录是没有意义的，所以我们希望只有在文章存在目录结构时，才显示侧边栏的目录。
个字数,平均阅读时长 ≈ 1分钟 修改php文件 需要修改的文件： /usr/themes/Joe/public/aside.php 在 aside.php 的合适位置增加如下代码，用于在侧边栏创建目录容器...# 仅在文章和页面生效 is('post') || $this->is('page'))) : ?...> 目录 增加js代码 下面的js可以直接在Joe主题的设置中添加 位置：控制台->外观->设置外观->全局设置->自定义js...} }; document.addEventListener("scroll", autoActive); } } else { // 不是文章...，隐藏目录 $('.catalogue').hide(); } css样式表 样式表同js，也可以在Joe主题的设置中添加 位置：控制台->外观->设置外观->全局设置->自定义css .joe_aside
作者：Mintimate 博客：https://www.mintimate.cn Mintimate's Blog，只为与你分享 目录生成.jpg 文章目录 文章目录功能大家再熟悉不过了吧，主要用于长篇文章...常见的目录效果： [腾讯云社区的文章目录] [Mintimate's Blog的文章目录] 这样的文章目录，难道要写到数据库里么？ 当然不是 ，这个肯定是前端人员实现的。...举个例子，我这个网站是这样的： [文章结构] 按F12查看其源码： [源码查看] 分析源码： 网页应该是根据Markdown生成的 文章分目录，使用html的标签，进行分层。...每个标题标签，自带ID，可以使用“#”进行文章定位 综上，就很清晰了： 提取内容部分的~标签（三层的目录……不多不少，嘿嘿），生成tree结构 提取/放置标签ID，作为目录索引，便于目录功能的文章定位...遍历文章 原生JavaScript 单层包括，也就是需要生成目录的文章，外层有一个或其他双标签进行嵌套，如： [只有一个div双标签进行嵌套] 这个时候我们在根标签加上一个ID即可
【新手必看系列】 关于压力测试不得不说的二三事 并发线程数、QPS与平均耗时的关系 【操作指南系列】 手把手教你在腾讯云上部署压测引擎 在jmeter脚本中如...
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
