VitePress-16- 配置- head 的配置网页icon与插入一个script标签

作用说明

head 配置项,可以在页面 HTML 的 <head> 标签中呈现的其他元素。
用户添加的标签在结束 head 标签之前呈现,在 VitePress 标签之后。说白了,就是自定义一些 head 标签中的元素,例如 :页面的icon等。
由于写法相对固定,此处不做特殊说明,直接看案例的配置即可。

案例

本案例展示自定义 icon 与 插入一个 script 标签

项目结构

为了更好的理解项目,下面只展示相关的内容。

projectName| -- .vitepress     # 项目配置相关的目录| -- config.mts # 项目的配置文件| -- helloworld.md  # 本文用到的文档| -- public | -- abc.png    # 静态图片资源

配置文件

/*** 这是整个项目的配置文件*/
import { defineConfig } from 'vitepress'export default defineConfig({title: "体会head属性-网页图标修改+插入一个脚本",titleTemplate:false, // 禁用网页标题后缀description: "head 属性配置,设置网页的图标+插入一个脚本",head:[/*** 这里用到了公用目录 public : 资源路径可以直接用绝对路径 /xxx* 渲染效果 :<link rel="icon" href="/abc.png">*/['link',{rel:'icon',href:'/abc.png'}], /*** 在head中插入了一个 script 标签,* 渲染效果如下:* <script id="abcscript">*  console.log(1001)* </script>*/['script',{id:'abcscript'},`console.log(1001)`] ],...... 其他的配置,不再赘述})

文档内容

简单一看,不重要,主要是看效果


# 站点配置 - description 属性站点的description : {{ description }}<script setup>import { useData } from 'vitepress'const { description }= useData()
</script>

效果展示

重要!看图体会配置的效果!

在这里插入图片描述

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

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

相关文章

ubuntu22.04@laptop OpenCV Get Started: 009_image_thresholding

ubuntu22.04laptop OpenCV Get Started: 009_image_thresholding 1. 源由2. image_thresholding应用Demo2.1 C应用Demo2.2 Python应用Demo 3. 重点分析3.1 Binary Thresholding ( THRESH_BINARY )3.2 Inverse-Binary Thresholding ( THRESH_BINARY_INV )3.3 Truncate Threshold…

(15)Hive调优——数据倾斜的解决指南

目录 前言 一、什么是数据倾斜 二、发生数据倾斜的表现 2.1 MapReduce任务 2.2 Spark任务 三、如何定位发生数据倾斜的代码 四、发生数据倾斜的原因 3.1 key分布不均匀 3.1.1 某些key存在大量相同值 3.1.2 存在大量异常值或空值 3.2 业务数据本身的特性 3.3 SQL语句…

扶贫|精准扶贫管理系统|基于Springboot的精准扶贫管理系统设计与实现(源码+数据库+文档)

精准扶贫管理系统目录 目录 基于Springboot的精准扶贫管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员模块的实现 &#xff08;1&#xff09;用户信息管理 &#xff08;2&#xff09;贫困户信息管理 &#xff08;3&#xff09;新闻类型管理 &a…

GPT-4影响高度创新思维的领域(一)

GPT-4的应用范围不再局限于对现有信息的检索、整理和复述&#xff0c;而是进一步拓展到了诸如文学创作、科学假设生成、教育辅导、商业策略建议等需要高度创新思维的领域。这种独立思考和创新能力赋予了GPT-4作为虚拟助手时更加丰富多元的角色定位&#xff0c;使其成为一种强大…

备战蓝桥杯---图论之最短路dijkstra算法

目录 先分个类吧&#xff1a; 1.对于有向无环图&#xff0c;我们直接拓扑排序&#xff0c;和AOE网类似&#xff0c;把取max改成min即可。 2.边权全部相等&#xff0c;直接BFS即可 3.单源点最短路 从一个点出发&#xff0c;到达其他顶点的最短路长度。 Dijkstra算法&#x…

二叉树相关OJ题

创作不易&#xff0c;感谢三连&#xff01;&#xff01; 一、选择题 1、某二叉树共有 399 个结点&#xff0c;其中有 199 个度为 2 的结点&#xff0c;则该二叉树中的叶子结点数为&#xff08; &#xff09; A.不存在这样的二叉树 B.200 C.198 D.199解析&#xff1a;选B&…

WebSocket | 基于TCP的全双工通信网络协议

文章目录 1、介绍2、示例2.1、分析2.2、代码开发2.3、功能测试 ​&#x1f343;作者介绍&#xff1a;双非本科大三网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;专注于Java领域学习&#xff0c;擅长web应用开发、数据结构和算法&#xff0c;初步涉猎Python人工智能开…

Android14之Android Rust模块编译语法(一百八十七)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

问题:从完整的问题解决过程来看,( )是首要环节。A.理解问题 B.提出假设C.发现问题 D.检验假设 #学习方法#学习方法

问题&#xff1a;从完整的问题解决过程来看&#xff0c;&#xff08; &#xff09;是首要环节。A&#xff0e;理解问题 B&#xff0e;提出假设C&#xff0e;发现问题 D&#xff0e;检验假设 A.理解问题 B.提出假设 C&#xff0e;发现问题 参考答案如图所示

Python setattr函数

在Python编程中&#xff0c;setattr()函数是一个有用且灵活的内置函数&#xff0c;用于设置对象的属性值。它可以在运行时动态地设置对象的属性&#xff0c;无论是新建对象还是已有对象。本文将深入探讨setattr()函数的用法、语法、示例代码&#xff0c;并探讨其在实际编程中的…

MySQL数据库基础(三):Linux系统下的MySQL安装与使用

文章目录 Linux系统下的MySQL安装与使用 一、MySQL部署安装 1. 卸载自带的MySQL8 2. 删除自带配置文件 3. 下载MySQL源 4. 安装MySQL源 5. 使用yum安装MySQL 6. 获取默认密码 7. 登录MySQL 8. 修改密码 二、登陆MySQL数据库 1、本地&#xff08;针对本地MySQL&…

【DDD】学习笔记-对象图与聚合

类之间的关系 在理解领域驱动设计的聚合&#xff08;Aggregate&#xff09;之前&#xff0c;我们需要先理清面向对象设计中对象之间的关系。正如生活中我们不可能做到“鸡犬之声相闻&#xff0c;老死不相往来”一般&#xff0c;对象之间必然存在关系&#xff0c;如此才可以通力…

C++入门篇(5)——类和对象(2)

目录 1.类的6个默认成员函数 2.构造函数 2.2 概念 2.3 特性 3.析构函数 3.1 概念 3.2 特性 1.类的6个默认成员函数 如果一个类一个成员都没有&#xff0c;那么这个类就是空类。但空类并非什么都没有&#xff0c;编译器会对任何一个类都生成六个默认成员函数。 2.构造…

Git 初学

目录 一、需求的产生 二、版本控制系统理解 1. 认识版本控制系统 2. 版本控制系统分类 &#xff08;1&#xff09;集中式版本控制系统 缺点&#xff1a; &#xff08;2&#xff09;分布式版本控制系统 三、初识 git 四、git 的使用 例&#xff1a;将 “ OLED文件夹 ”…

java排课管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java排课管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0&#…

Learn LaTeX 020 - LaTex Math Space Font 数学排版之空格、字号、字体

数学排版中很好的处理空格、字号和字体可以使你的出版文档平添更多的特色。 这个视频介绍并演示了这些方面的相关配置。 https://www.ixigua.com/7298100920137548288?id7307759620737466891&logTagb138f9145ce004f6b52a

2024下载使用CleanMyMac X软件时需要注意什么?

使用CleanMyMac X清理系统垃圾文件的步骤如下&#xff1a; 打开CleanMyMac X软件。在主界面中&#xff0c;选择“清理”功能块下的“清理系统垃圾”选项。点击“扫描”按钮&#xff0c;软件将自动扫描系统垃圾&#xff0c;包括缓存文件、系统日志文件等。扫描完成后&#xff0…

【Java基础题型】求商和余数

需求&#xff1a;给定两个整数&#xff0c;被除数和除数(都是正数&#xff0c;且不超过int的范围)。 将两数相除&#xff0c;要求不使用乘法、除法和%运算符。 得到商和余数。 被除数 %除数商 ... 余数 #这里%代表除 //1、求商&#xff0c;就是求里…

【剪辑必备】今天我教你如何手动去下载苹果官网4K预告片 完全免费

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;web开发者、设计师、技术分享博主 &#x1f40b; 希望大家多多支持一下, 我们一起学习和进步&#xff01;&#x1f604; &#x1f3c5; 如果文章对你有帮助的话&#xff0c;欢迎评论 &#x1f4ac;点赞&a…

C++面向对象程序设计-北京大学-郭炜【课程笔记(二)】

C面向对象程序设计-北京大学-郭炜【课程笔记&#xff08;二&#xff09;】 1、结构化程序设计结构化程序设计的不足 2、面向对象的程序设计2.1、面向对象的程序设计2.2、从客观事物抽象出类2.3、对象的内存分配2.4、对象之间的运算2.5、使用类的成员变量和成员函数用法1&#x…