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.hqwc.cn/news/471815.html

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

相关文章

ssm的网上招聘系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; ssm的网上招聘系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring SpringMv…

【研究生复试】计算机软件工程人工智能研究生复试——资料整理(速记版)——计算机网络

1、JAVA 2、计算机网络 3、计算机体系结构 4、数据库 5、计算机租场原理 6、软件工程 7、大数据 8、英文 自我介绍 2. 计算机网络 1. TCP如何解决丢包和乱序&#xff1f; 序列号&#xff1a;TCP所传送的每段数据都有标有序列号&#xff0c;避免乱序问题发送端确认应答、超时…

【Linux】进程的初步认识

进程的初步认识 基本概念描述进程task_struct-PCB的一种task_stuct内容分类 查看进程通过系统调用获取进程标识符 基本概念 要了解进程&#xff0c;首先我们要知道两点 我们可以同时启动多个程序&#xff0c;也就意味着我们可以将多个.exe文件加载到内存操作系统如何去管理这些…

【c++】析构函数

1.特征 析构函数是特殊的成员函数&#xff0c;其特征如下&#xff1a; 1.析构函数名是在类名前加上字符~。 2.无参数无返回值类型。 3.一个类只能有一个析构函数。若未显式定义&#xff0c;系统会自动生成默认的析构函数。注意&#xff1a;析构函数不能重载。 4.对象生命周…

Mybatis——Javaweb进阶学习(五)

目录 一、Mybatis快速入门1.创建Springboot工程&#xff0c;数据库表user&#xff0c;实体类User2.引入Mybaties相关依赖3.编写Sql语句 二、lombok1.基本概念2.使用方法 三、基础操作1.环境准备a.数据库准备b.创建员工实体类Emp数据类型对比命名对比 c.Mapper接口创建 2.删除操…

c语言操作符(下)

目录 ​编辑 逗号表达式 下标访问[] 函数调⽤() sizeof 结构成员访问操作符 结构体 结构体声明 直接访问 .成员名 间接访问 结构体指针->成员名 逗号表达式 exp1, exp2, exp3, …expN 运算规则&#xff1a;从左向右依次执⾏。整个表达式的结果是最后⼀个表达…

SQL的1999语法

目录 交叉连接 实现交叉连接 自然连接 实现自然连接&#xff08;实际上就是内连接&#xff09; ON和USING 使用自然连接时要求两张表的字段名称相同&#xff0c;但是如果不相同或者两张表中有两组字段是重名,这时就要利用 ON 子句指定关联条件&#xff0c;利用 USING 子句…

qml之Control类型布局讲解,padding属性和Inset属性细讲

1、Control布局图 2、如何理解&#xff1f; *padding和*Inset参数如何理解呢&#xff1f; //main.qml import QtQuick 2.0 import QtQuick.Controls 2.12 import QtQuick.Layouts 1.12 import QtQuick.Controls 1.4 import QtQml 2.12ApplicationWindow {id: windowvisible: …

【开源】SpringBoot框架开发独居老人物资配送系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 查询社区4.2 新增物资4.3 查询物资4.4 查询物资配送4.5 新增物资配送 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的独居老人物资配送系统&#xff0c;包含了社区档案、…

【MySQL】:DQL查询

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; MySQL从入门到进阶 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一. DQL1.1 基本语法1.2 基础查询1.3 条件查询1.3 聚合函数 &#x1f324;️ 全篇…

HiveSQL——统计当前时间段的有客人在住的房间数量

注&#xff1a;参考文章&#xff1a; HiveSQL一天一个小技巧&#xff1a;如何统计当前时间点状态情况【辅助变量累计变换思路】_sql查询统计某状态出现的次数及累计时间-CSDN博客文章浏览阅读2k次&#xff0c;点赞6次&#xff0c;收藏8次。本文总结了一种当前时间点状态统计的…

Linux第56步_根文件系统第3步_将busybox构建的根文件系统烧录到EMMC

1、第1次将“rootfs”打包 1)、打开第1个终端&#xff0c;准备在“mnt”目录下创建挂载目录“rootfs”&#xff1b; 输入“ls回车” 输入“cd /mnt回车” 输入“ls回车”&#xff0c;查看“mnt”目录下的文件和文件夹 输入“sudo mkdir rootfs回车”&#xff0c;在“mnt”…