本文主要是介绍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>效果展示
重要！看图体会配置的效果！
这篇关于VitePress-16- 配置- head 的配置网页icon与插入一个script标签的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
