使用CSS计数器,在目录名称前加上了序号,让目录看起来更加井然有序

目录(Text of Contents缩写为TOC),其实就是一篇文章的概要或简述。这好比,去书店买书,先是被这本书的标题所吸引,而后我们才会,翻开这本书目录,看看这本书主要是在讲些什么?我们在看目录的同时,脑中也在不停的思衬,”这本书到底值不值得买呢?但是没有什么实战内容耶!“

文章目录

其实,一篇文章也不非要目录的,只要段落分的好,就算是长篇大论也是无关紧要的!

只是文章有了目录,让人一眼就能瞧出这篇文章到底讲了什么?虽然标题上有说,但还是得为哪几个段落起个副标题。

再说了,文章目录可以让用户在页面上,点击到达指定目录名称下进行浏览。虽然这在很大层度上是可以通过鼠标滑动,滚动到想要浏览的位置。

Hugo-theme-kiwi开源博客主题已然有了文章目录这一功能,也就是 秋码记录 站点正在使用的博客主题(由于 秋码记录 托管于 Github.com Pages,故而国内的友人在访问时,比较缓慢,甚至有时可能出现无法打开该网站)。

对目录名称前添加序号,我们首先想到的当然是使用Hugo模板渲染去实现。

序号,顾名思义,就是有顺序的号码,通俗来讲,便是1、,2、,3、,4、,……。可在Hugo模板渲染中使用计数器来实现。

css计数器

或许也只有在使用了CSS 计数器后,你就会摒弃代码中使用Hugo模板渲染的那部分又长又拖代码了。

在CSS计数器中,counter-resetcounter-increment属性是必不可少的。counter-reset在每次新的列表开始时重置计数器,而counter-increment在每个列表项上增加计数器。

需要注意的是:counter-reset需要计数的父标签上的!

在这里插入图片描述

那么,就将 counter-reset设置在ol标签上即可,即便是某一项有子目录,那也还是在ol标签内的!

.toc-content  ol{list-style-type: none;counter-reset: item}

现在,我们就可以对目录名称设置伪选择器了。

在编写CSS样式之前,有必要说下counters()函数,在CSS中,它返回一个计数器的列表值,这个列表可以包含一个或者多个嵌套的计数器。

函数counters()有两个参数:

  1. 第一个参数是你要访问的计数器的名称,在你的例子中,该名称就是 item
  2. 第二个参数是字符串,用来分隔计数器的各个级别。在你的例子中,这个分隔符是英文的句点 .
.toc-content ol li a:first-of-type::before{counter-increment: item;content: counters(item,".")"、";font-weight: 700;margin-right: 1px;}

比如在多级嵌套的列表中,如果在第一级的第二个项中的第三个小项,那么 counters() 的值就会是 2.3、

字符串紧接着 counters(item, ".") 的作用是将结果后面添加一个顿号,使其格式化输出更美观。

所以 counters(item, ".") ". " 的作用就是生成并显示一个根据当前嵌套列表项的层级和序号构成的数字序列,每一级数字之间用句点分隔,并在最后跟着一个顿号。例如输出1、2.1、2.2、,等等。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/794536.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Restful Web Service

Restful 1.特点 RESTful是一种架构风格,强调简单、轻量级和对资源的状态less操作。RESTful是通过HTTP协议进行通信的。RESTful的应用程序可以调用运行在不同服务器上的服务或函数。RESTful的接口通常使用JSON,但实际上它们都支持多种数据格式。RESTful…

【vue + springboot】切片+断点上传 + 秒传

需要了解透彻请参考:如何实现大文件上传、断点续传、切片上传_断点上传-CSDN博客 说明 切片:根据指定的大小对文件进行切块上传。 断点上传:每次上传完成一个切片后端保存信息,前端每次上传都判断所上传的文件是否存在&#xf…

纪念品分组

题源 贪心做法 ,先排序再分组 题目描述 元旦快到了,校学生会让乐乐负责新年晚会的纪念品发放工作。为使得参加晚会的同学所获得 的纪念品价值相对均衡,他要把购来的纪念品根据价格进行分组,但每组最多只能包括两件纪念品&#xff…

1.9 面试经典150题 除自身以外数组的乘积

除自身以外数组的乘积 给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0…

vue如何搭建项目?

首先我们下载安装router,less / scss,pinia,axios, element / Ant Design Vue,Echarts 以及如何配置别名,自定义组件 npm npm create vitelatest yarn yarn create vite 然后安装依赖 成功后 在src下…

PyTorch搭建Informer实现长序列时间序列预测

目录 I. 前言II. InformerIII. 代码3.1 输入编码3.1.1 Token Embedding3.1.2 Positional Embedding3.1.3 Temporal Embedding 3.2 Encoder与Decoder IV. 实验 I. 前言 前面已经写了很多关于时间序列预测的文章: 深入理解PyTorch中LSTM的输入和输出(从i…

python 笔记

文章目录 pdbpdb开始调试pythonpdb设置断点单步执行进入到函数的内部执行到下一个断点或程序结束调用栈查看命令查看当前函数调用堆栈向上一层函数查看调用堆栈查看源代码 importimport 用法 numpy导入numpy模块numpy常用函数np.argmaxnp.sum range生成连续序列生成不连续序列 …

离线数仓(十)【ADS 层开发】

前言 剩下的 ADS 层主要就是写 SQL 了,就像我们之前练习的 HQL 题一样,不同的是这里的数据从哪张表读取(DWD 还是 ADS 甚至个别表需要从 DIM 层读取)需要我们自己来分析。 ADS 的建表语句和 MySQL 是对应的,我们到时候…

从0到1实现RPC | 04 负载均衡和静态注册中心

一、Router的定义 Router路由用于预筛选,Dubbo有这样的设计,SpringCloud没有。 二、LoadBanlancer定义 负载均衡器:默认取第一个 当前支持随机和轮询两种负载均衡器。 随机:从所有provider中随机选择一个。 轮询:每…

【C++】引用与指针

​​ 🌱博客主页:青竹雾色间. 😘博客制作不易欢迎各位👍点赞⭐收藏➕关注 ✨人生如寄,多忧何为 ✨ 目录标题 前言一.引用(Reference)二.指针(Pointer)三. 比较与总结 前…

面试题:Spring Boot Starter的功能与使用场景

Spring Boot Starter 是 Spring Boot 框架为了简化项目的初始化和配置工作而设计的一种模块化依赖管理方式。它主要具有以下几个关键功能和使用场景: 功能: 1. 依赖管理每个 Starter 都是一组相关的依赖项集合,这些依赖项都是为了实现特定功能…

机器学习第33周周报Airformer

文章目录 week33 AirFormer摘要Abstract一、论文的前置知识1. 多头注意力机制(MSA)2. 具有潜变量的变分模型 二、文献阅读1. 题目2. abstract3. 问题与模型阐述3.1 问题定义3.2 模型概述3.3 跨空间MSA(DS-MSA)3.4 时间相关MSA&…

【Qt 学习笔记】使用两种方式实现helloworld

博客主页:Duck Bro 博客主页系列专栏:Qt 专栏关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞👍收藏⭐评论✍ 使用两种方式实现helloworld 文章编号:Qt 学习笔记 / 05 …

C语言数据结构专题--顺序表(1基础)

前言 我们在对C语言有一定的了解之后,我们就可以开始数据结构的学习了,数据结构多用指针、结构体、动态内存开辟等知识,若对这些知识还不太了解的朋友,就需要加深其理解了,那么废话不多说,我们正式开始本节…

Web攻击越发复杂,企业如何保护云上业务

如今,电子政务、电子商务、网上银行、网上营业厅等依托Web应用,为广大用户提供灵活多样的服务。在这之中,流量攻击堪称是Web应用的最大敌人,黑客通过流量攻击获取利益、竞争对手雇佣黑客发起恶意攻击、不法分子通过流量攻击瘫痪目…

约数与倍数-第12届蓝桥杯选拔赛Python真题精选

[导读]:超平老师的Scratch蓝桥杯真题解读系列在推出之后,受到了广大老师和家长的好评,非常感谢各位的认可和厚爱。作为回馈,超平老师计划推出《Python蓝桥杯真题解析100讲》,这是解读系列的第45讲。 约数与倍数&#…

用html写一个爱心

<!DOCTYPE html> <html lang"zh-CN"><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8" /><title>爱您</title><style>* {padding: 0;margin: 0;}body {background-color: pin…

【软件测试】测试常见知识点汇总

测试常见知识点汇总 一、什么是测试1.1 测试和调试的区别1.2 什么是需求1.2.1 用户需求1.2.2 软件需求 1.3 测试用例要素1.4 软件的生命周期及各阶段概述1.5 开发模型和测试模型&#xff08;记住特点和适用场景&#xff09;1.5.1 开发模型1.5.1.1 瀑布模型&#xff08;自上而下…

WebKit结构详细简介

第一章:WebKit概述 WebKit是一个开源的网页浏览引擎,最初由苹果公司为其Safari浏览器开发,后来成为了多个浏览器的基础,包括苹果的Safari、Google的Chrome、微软的Edge等。它不仅在桌面端有着广泛的应用,还被广泛地应用于移动端的浏览器中,如iOS和Android系统。WebKit的…

vue3+element-plus(el-carousel)实现图片轮播和点击预览功能

解决的问题&#xff1a;默认的插件在点击预览图片时&#xff0c;总是从第一张图片开始显示&#xff0c;而不是当前点击的这一张&#xff0c;于是便做了下面的优化&#xff0c;使用js记录当前点击图片的索引&#xff0c;再进行预览。 <template><el-carousel indicato…