当前位置: 首页 > news >正文

typora导出html添加目录

typora导出html添加目录

使用方法
首先要从typora导出html文件,之后用记事本编辑器html文件

找到文档最后面,如图:

请添加图片描述

用文字编辑类工具打开sideBar.txt,复制其中所有内容【内容在下面】
请添加图片描述
在如上图的位置插入所复制的内容

打开修改过的html文件后左上角会出现一个按钮

在这里插入图片描述
点击按钮出现标题的大纲视图

在这里插入图片描述
sideBar.txt

<div class="sideBar"><div class="sidebarText"></div><div class="hideBtn">显示目录</div><div class="author">Powered by me</div>
</div><script>// 隐藏按钮var hideBtn = document.querySelector(".hideBtn");var hideMain = document.querySelector(".sidebarText");var author = document.querySelector(".author");var isHide = true;var hidFun = () => {if (isHide) {hideMain.style.display = "none";hideBtn.style.left = "0.5rem";hideBtn.innerHTML = "显示目录";author.style.display = "none";} else {hideMain.style.display = "block";let leftLength = hideMain.offsetWidth/16 + 0.5;hideBtn.style.left = `${leftLength}rem`;hideBtn.innerHTML = "隐藏目录";author.style.display = "block";}}// hidFun();hideBtn.onclick = function () {isHide = !isHide;hidFun();}var write = document.querySelector("#write").childNodes;//渲染子节点var list = [];write.forEach((item,index)=>{   if (item.localName == 'h1' || item.localName == 'h2' || item.localName == 'h3' || item.localName == 'h4' || item.localName == 'h5' || item.localName == 'h6') {let title = "";for (let i = 1; i < item.childNodes.length; i++) {//console.log(item);//console.log(item.childNodes[i].data);//title = title + item.childNodes[i].innerHTML;title = title + item.childNodes[i].data;}list.push({text: title,a: item.childNodes[0].name,tag:item.nodeName})}})list.forEach((item, index) => {let sideH1 = document.createElement("div");sideH1.setAttribute("class", `side`+`${item.tag}`);sideH1.setAttribute("id", `${item.a}`);sideH1.innerHTML = item.text;hideMain.appendChild(sideH1);})// 点击事件hideMain.onclick = (event) => {if (event.target.className != "sidebarText") {let jumpArr = document.querySelector(`a[name=` + `"${event.target.id}"` + `]`);jumpArr.scrollIntoView();}}
</script><style>   body { margin: 0px 0px 0px 150px;}.sidebarText{min-width: 16rem;max-width: 25rem;height: 100vh;background-color: #f3f4f4;position: fixed;left: 0;top: 0;display: none;overflow-x:auto;white-space:nowrap;padding: 0.8rem 0.8rem 2.5rem 0.8rem;}.hideBtn{width: 5rem;height: 2rem;background-color: #ccc;position: fixed;left: 0.5rem;top: 0.8rem;text-align: center;color: #595959;cursor: pointer;line-height: 2rem;border-radius: 0.5rem;user-select:none;}.author{min-width: 16rem;max-width: 25rem;text-align: center;position: fixed;left: 0;bottom: 0.7rem;display: none;user-select:none;}.sideH1{margin: 0.2rem 0 0.2rem 0;cursor: pointer;}.sideH2{margin: 0.2rem 0 0.2rem 0.6rem;cursor: pointer;}.sideH3{margin: 0.2rem 0 0.2rem 1.2rem;cursor: pointer;}.sideH4{margin: 0.2rem 0 0.2rem 1.8rem;cursor: pointer;}.sideH5{margin: 0.2rem 0 0.2rem 2.4rem;cursor: pointer;}.sideH6{margin: 0.2rem 0 0.2rem 3rem;cursor: pointer;}
</style>

相关文章:

typora导出html添加目录

typora导出html添加目录 使用方法 首先要从typora导出html文件&#xff0c;之后用记事本编辑器html文件 找到文档最后面&#xff0c;如图&#xff1a; 用文字编辑类工具打开sideBar.txt&#xff0c;复制其中所有内容【内容在下面】 在如上图的位置插入所复制的内容 打开修改…...

vue3 封装一个按钮组件(可自定义按钮样式)

效果图 鼠标悬浮有对应的文字提示&#xff0c;且图标出现背景色和颜色 实现 目前提供五个固定样式的图标及三个用户自定义的图标&#xff0c;可根据需要补充 组件代码 <script setup lang"ts"> import { onMounted, PropType, reactive, ref, watch } from v…...

Docker 中使用超级用户

在docker中安装keytool产生的问题&#xff1a; sudo apt-get install openjdk-8-jre-headless bash: sudo: command not found elasticsearchd989639e3cb4:~/config/certs$ apt-get install openjdk-8-jre-headless E: Could not open lock file /var/lib/dpkg/lock-frontend …...

git打tag以及拉取tag

场景&#xff1a;某次git代码发布后定版记录&#xff0c;将发版所在的commit时候代码打上tag记录&#xff0c;方便后期切换到对应tag代码位置。 查看所有tag名 git tag// 1.1.0 // 1.0.0查看tag和描述 git tag -l -n//1.0.0 云监管一期项目完结 //1.1.0 …...

TS 36.212 V12.0.0-信道编码、复用和交织(1)-通用过程

本文的内容主要涉及TS 36.212&#xff0c;版本是C00&#xff0c;也就是V12.0.0。...

纯前端上传word,xlsx,ppt,在前端预览并下载成图片(预览效果可以,下载图片效果不太理想)

纯前端上传word,xlsx,ppt,在前端预览并下载成图片&#xff08;预览效果可以&#xff0c;下载图片效果不太理想&#xff09; 一.安装依赖二、主要代码 预览效果链接: https://github.com/501351981/vue-office 插件文档链接: https://501351981.github.io/vue-office/examples/d…...

WPS Office找回丢失的工作文件

WPS office恢复办公文件方法有两种. 1.通过备份中心可以查看近期编辑 office 历史版本进行恢复. 2.缓存备份目录可以查看编辑过的 office 文件的历史版本&#xff0c;新版本 WPS 可以在配置工具-备份清理找到&#xff0c;2019 年旧版本 WPS 可以在新建任意 office 文件-文件-选…...

【MATLAB源码-第106期】基于matlab的SAR雷达系统仿真,实现雷达目标跟踪功能,使用卡尔曼滤波算法。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 1. 雷达系统参数设定&#xff1a; - 工作频率&#xff1a;选择一个适合的工作频率&#xff0c;例如X波段&#xff08;8-12 GHz&#xff09;。 - 脉冲重复频率&#xff08;PRF&#xff09;&#xff1a;设定一个适当的PR…...

【机器学习】scikit-learn机器学习中随机数种子的应用与重现

随机数种子是为了能重现某一次实验生成的随机数而设立的&#xff0c;相同的随机数种子下&#xff0c;生成的随机数序列一样 一、随机数种子基础应用 在python中简单运用随机数种子 import random random.seed(1) a random.sample(range(0,100),10) random.seed(2) b random.…...

欧洲编程语言四巨头

从左往右&#xff0c;依次是 尼克劳斯沃斯 (Niklaus Wirth)&#xff0c;迪杰斯特拉&#xff08;Edsger Dijkstra&#xff09;&#xff0c;霍尔&#xff08;Tony Hoare&#xff09; 尼克劳斯沃斯 (Niklaus Wirth) 瑞士人&#xff0c;一生发明了8种编程语言&#xff0c;其中最著…...

检查密码(字符串)

本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能。该网站要求用户设置的密码必须由不少于6个字符组成&#xff0c;并且只能有英文字母、数字和小数点 .&#xff0c;还必须既有字母也有数字。 输入格式&#xff1a; 输入第一行给出一个正整数 N&#xff08;≤…...

Pointnet++改进注意力机制系列:全网首发LSKAttention大核卷积注意力机制 |即插即用,实现有效涨点

简介:1.该教程提供大量的首发改进的方式,降低上手难度,多种结构改进,助力寻找创新点!2.本篇文章对Pointnet++特征提取模块进行改进,加入LSKAttention注意力机制,提升性能。3.专栏持续更新,紧随最新的研究内容。 目录 1.理论介绍 2.修改步骤 2.1 步骤一 2.2 步骤二...

C++常用库函数大小写转换

在我们在编写代码时大小写转换是基础知识&#xff0c;这篇博客将通过介绍C常用库函数来回顾和学习一种不一样的大小写转换 目录 一、islower/isupper函数二、tolower/toupper函数三、ASCLL码 一、islower/isupper函数 islower和isupper函数是C标准库中的字符分类函数&#xff…...

基于springboot+html的汽车销售管理系统设计与实现

基于springboothtml的汽车销售管理系统 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; 前言 随着汽车市场的快速发展&#xff0c;汽车销售企业面临着越来越大的管理…...

pyside6 界面美化库的使用

使用qt_material库&#xff0c;在库中进行导入后&#xff0c;直接使用库提供的皮肤即可非常简单 example&#xff1a; # -*- coding: utf-8 -*- # 使用例子 import sys # from PySide6 import QtWidgets # from PySide2 import QtWidgets from PySide6 import QtWidgets from…...

通过Docker搭建4节点的Tendermint集群

Tendermint&#xff1a;0.34.24 Docker&#xff1a;20.10.21 Docker-Compose&#xff1a;2.20.2 OS&#xff1a;Ubuntu 20.04 Go&#xff1a;1.19.2 Linux/amd64 1 修改Tendermint源码 1.1 修改监听IP 为什么要将127.0.1修改成0.0.0.0呢&#xff1f;因为容器内的服务如果是以…...

element plus 表格组件怎样在表格中显示图片

官方给的&#xff1a; <el-table-column label"Thumbnail" width"180"><template #default"scope"><div style"display: flex; align-items: center"><el-image :preview-src-list"srcList"/><…...

cad快速看图软件免费版(手机在线cad快速看图)

cad快速看图软件免费版(手机在线cad快速看图) 很多机械设计师日常工作过程中涉及到多种格式的cad图纸&#xff0c;cad图纸大多都需要cad设计软件才能打开&#xff0c;然而很多小伙伴并没有下载相应的cad设计软件&#xff0c;这种情况下如何进行cad快速看图呢&#xff1f; 今天…...

C#: Label、TextBox 鼠标停留时显示提示信息

说明&#xff1a;记录在 Label、TextBox 控件上 鼠标停留时显示提示信息的方法。 1.效果图 2.具体实现步骤 1. 在Form 窗口中先创建 Label 并取名&#xff1a;KEY_label &#xff0c;或 TextBox 取名&#xff1a;KEY_textBox 2. lable控件的 tips 实现方法1 &#xff1a;代码…...

.NET 8.0 本机 AOT

在软件开发领域&#xff0c;优化性能和简化效率仍然至关重要。.NET 平台二十年来不断创新&#xff0c;为开发人员提供了构建弹性且高效的软件解决方案的基础架构。 与本机 AOT&#xff08;提前&#xff09;编译相结合&#xff0c;取得了显着的进步。本文深入研究.NET Native AO…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...