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

news2025/1/18 3:18:08

作用说明

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.coloradmin.cn/o/1450083.html

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

相关文章

【分享】图解ADS+JLINK调试ARM

文章是对LPC2148而写的&#xff0c;但是对三星的44B0芯片同样适用&#xff0c;只需要在选择时将相应的CPU选择的S3C44B0就可以了。 JLINK在ADS下调试心得 前两天一个客户用jlink在ADS下调试LPC2148总报错&#xff0c;这个错误我之前在调试LPC2200的时候也碰到过&#xff0c;后…

基于JAVA,SpringBoot和Vue二手房屋销售系统设计

摘要&#xff1a; 本研究旨在设计并实现一个基于JAVA, SpringBoot和Vue技术的二手房屋销售系统。该系统采用当前流行的前后端分离架构&#xff0c;后端使用SpringBoot框架快速搭建RESTful API&#xff0c;提供稳定且高效的服务端应用&#xff1b;前端则通过Vue.js框架构建动态…

【AIGC】Stable Diffusion的生成参数入门

Stable Diffusion 的生成参数是用来控制图像生成过程的重要设置&#xff0c;下面是一些常见的生成参数及其详解 1、采样器&#xff0c;关于采样器的选择参照作者的上一篇文章 2、采样步数&#xff08;Sampling Steps&#xff09;是指在生成图像时模型执行的总步数&#xff0c…

问题:规范化过程主要为克服数据库逻辑结构中的插入异常、删除异常以及(??)的缺陷. #职场发展#职场发展#知识分享

问题&#xff1a;规范化过程主要为克服数据库逻辑结构中的插入异常、删除异常以及(??)的缺陷. 参考答案如图所示

春节专题|产业7问:区块链厂商的现在和未来——混合技术厂商

2023转瞬即逝&#xff0c;不同于加密领域沉寂一整年后在年末集中爆发&#xff0c;对于我国的区块链厂商而言&#xff0c;稳中求胜才是关键词&#xff0c;在平稳发展的基调下&#xff0c;产业洗牌也悄无声息的到来。 从产业总体而言&#xff0c;在经过了接近3年的快速发展后&…

[word] word保存了但是再打开就没有了怎么办 #职场发展#其他

word保存了但是再打开就没有了怎么办 word保存了但是再打开就没有了怎么办&#xff1f; 一些朋友反映常常找不到自己保存在电脑中的Word的文档&#xff0c;不知道是怎么回事。如果是突然消失的&#xff0c;其实情况还是有很多种&#xff0c;相信大家也有一定的了解。在这里&a…

前端秘法基础式(HTML)(第二卷)

目录 一.表单标签 1.表单域 2.表单控件 2.1input标签 2.2label/select/textarea标签 2.3无语义标签 三.特殊字符 一.表单标签 用来完成与用户的交互,例如登录系统 1.表单域 <form>通过action属性,将用户填写的数据转交给服务器 2.表单控件 2.1input标签 type…

Linux操作系统基础(十二):yum软件包管理器

文章目录 yum软件包管理器 一、yum常用命令 二、yum在线安装软件案例 三、yum在线删除软件案例 yum软件包管理器 yum&#xff08; Yellow dog Updater, Modified&#xff09;是一个在 Fedora 和 RedHat中的 Shell 前端软件包管理器。基于RPM包管理&#xff0c;能够从指定的…

开窗,挖槽,放电齿,拼版

我们在阻焊层画线&#xff0c;就相当于去掉绿油阻焊&#xff0c;开窗一般是用在大电流走线的时候。先画要走的导线&#xff0c;之后切换到TopSolder或者Bottom Solder层&#xff0c;然后Place->line 画一条和原来先粗细一样的线即可&#xff01;但走电流的仍然是导线&#x…

字符输入/输出和输入验证 DAY19

文章目录 前言一、单字符I/O二、缓冲区为什么要引入缓冲区&#xff1f;文件结尾补充**注意几点** 重定向和文件重定向输入cmd是什么&#xff1f;重定向输出组合重定向小试牛刀&#xff1a;文件输出 创建更友好的用户界面使用缓冲输入 如果您发现文章有错误请与我留言&#xff0…

Linux多线程[二]

线程同步 一个资源&#xff0c;我们不知道他是不是准备好了资源&#xff0c;就需要频繁申请。这时候对于这个执行流&#xff0c;多次检测&#xff0c;极大的浪费了资源。而且对于资源来说一个线程多次申请资源的时候&#xff0c;他一直申请到资源&#xff0c;别的线程申请不到…

debug - 打补丁 - 浮点数加法

文章目录 debug - 打补丁 - 浮点数加法概述笔记demo用CE查看汇编(x64debug)main()update_info()快捷键 - CE中查看代码时的导航打补丁的时机 - 浮点数加法补丁代码补丁效果浮点数寄存器组的保存END debug - 打补丁 - 浮点数加法 概述 在cm中, UI上显示的数值仅仅用来显示, 改…

微信公众号怎么做收集信息功能_轻松打造信息收集神器

微信公众号&#xff1a;轻松打造信息收集神器&#xff0c;让您的业务更上一层楼&#xff01; 在数字化时代&#xff0c;信息的传递与收集已成为企业和个人成功的关键。微信&#xff0c;作为中国最大的社交平台之一&#xff0c;其公众号功能为企业和个人提供了一个绝佳的信息收…

第三百四十七回

文章目录 1. 概念介绍2. 原理与方法2.1 知识对比2.2 使用方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了"加密包crypto"相关的内容&#xff0c;本章回中将介绍characters包.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 在项目中会遇到获取字…

2024年【起重机司机(限门式起重机)】考试及起重机司机(限门式起重机)模拟考试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 起重机司机(限门式起重机)考试是安全生产模拟考试一点通总题库中生成的一套起重机司机(限门式起重机)模拟考试题&#xff0c;安全生产模拟考试一点通上起重机司机(限门式起重机)作业手机同步练习。2024年【起重机司机…

第13章 网络 Page734 “I/O对象”的链式传递 单独的火箭发射函数,没有用对的智能指针

上一篇博文中&#xff0c;我们使用单独的火箭发射函数&#xff0c;结果什么结果也没有得到&#xff0c;原因是launch_rocket()函数结束时&#xff0c;其内的局部对象counter生命周期也结束了 那么可以将counter改为指针吗&#xff1f;在堆中分配&#xff0c;这样当函数退出时&…

SpringBoot+Tess4J实现本地与远程图片的文字识别

Spring Boot应用程序里集成Tess4J来实现OCR&#xff08;光学字符识别&#xff09;&#xff0c;以识别出本地和远程图片中的文字 一、添加依赖 <dependency><groupId>net.sourceforge.tess4j</groupId><artifactId>tess4j</artifactId><vers…

基于Echarts的可视化项目

整体的效果 概览区域 <!-- 概览区域模块制作 --><div class"panel overview"><div class"inner"><ul><li><h4>2190</h4><span><i class"icon-dot"></i>设备总数</span></…

洛谷C++简单题小练习day12—寻找最小值小程序

day12--寻找最小值--2.16 习题概述 题目描述 给出 n 和 n 个整数 ai​&#xff0c;求这 n 个整数中最小值是什么。 输入格式 第一行输入一个正整数 n&#xff0c;表示数字个数。 第二行输入 n 个非负整数&#xff0c;表示 1,2…a1​,a2​…an​&#xff0c;以空格隔开。 …

Android ·移动应用开发 创建第一个Android项目

文章目录 一、创建第一个Android项目1.1 准备好Android Studio1.2 运行程序1.3 程序结构是什么app下的结构res - 子目录&#xff08;所有图片、布局、字符串等资源&#xff09;AndroidManifest.xml 有四大组件&#xff0c;程序添加权限声明 Project下的结构 二、开发android时&…