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>

效果展示

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

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

html从零开始7:文档流、浮动、清除浮动,定位【搬代码】

文档流 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, init…

C++类和对象-继承->基本语法、继承方式、继承中的对象模型、继承中构造和析构顺序、继承同名成员处理方式、继承同名静态成员处理方式、多继承语法、菱形继承

#include<iostream> using namespace std; //普通实现页面 //Java页面 //class Java //{ //public: // void header() // { // cout << "首页、公开课、登录、注册...&#xff08;公共头部&#xff09;" << endl; // } // voi…

Phobos捆绑某数控软件AdobeIPCBroker组件定向勒索

前言 Phobos勒索病毒最早于2019年被首次发现并开始流行起来&#xff0c;该勒索病毒的勒索提示信息特征与CrySiS(Dharma)勒索病毒非常相似&#xff0c;但是两款勒索病毒的代码特征却是完全不一样&#xff0c;近日笔者在逛某开源恶意软件沙箱的时候发现了一款Phobos勒索病毒捆绑…

sql语句学习(一)--查询

【有道云笔记】基本sql语句2—查询基础 数据库表结构 DROP TABLE IF EXISTS class; CREATE TABLE class (id int(11) NOT NULL AUTO_INCREMENT,class_num varchar(11) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NOT NULL COMMENT 班级号,class_name varchar(255) CHARACTE…

第24讲投票管理实现

投票管理实现 后端&#xff1a; package com.java1234.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.java1234.entity.*; import com.java1234.service.…

QEMU使用步骤

1、安装虚拟机环境&#xff1a;ubuntu-16.04.7-desktop-amd64.iso,下载地址&#xff1a;Index of /ubuntu-releases/16.04.7/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 2、安装gcc-linaro-7.3.1-2018.05-x86_64_arm-linux-gnueabihf.tar.xz到/opt目录&#xf…

SECS/GEM的HSMS通讯?金南瓜方案

High Speed SECS Message Service (HSMS) 是一种基于 TCP/IP 的协议&#xff0c;它使得 SECS 消息通信更加快速。这通常用作设备间通信的接口。 HSMS 状态逻辑变化&#xff08;序列&#xff09;&#xff1a; 1.Not Connected&#xff1a;准备初始化 TCP/IP 连接&#xff0c;但尚…

第十九篇【传奇开心果系列】Python的OpenCV库技术点案例示例:文字识别与OCR

传奇开心果短博文系列 系列短博文目录Python的OpenCV库技术点案例示例系列 短博文目录前言一、OpenCV 文字识别介绍二、图像预处理示例代码三、文字区域检测示例代码四、文字识别示例代码五、文字后处理示例代码六、OpenCV结合Tesseract OCR库实现文字识别示例代码七、OpenCV结…

【Cocos入门】物理系统(物理碰撞)

物理碰撞 物理引擎默认是关闭状态以节省资源开销。开启方法和之前的普通碰撞类似&#xff1a;cc.director.getPhysicsManager().enabled true但有一个区别&#xff0c;物理引擎的开启必须放在onLoad函数内运行&#xff0c;否则不生效。 物理碰撞组件也同样具有碰撞回调函数。…

9 个管理 Windows 硬盘的最佳免费磁盘分区软件 [2024 排名]

管理分区可能是一项具有挑战性的任务。当您想到删除、缩小、移动、磁盘分区或合并分区等方面时&#xff0c;您会认为它们是很难做到的事情。然而&#xff0c;虽然 Windows 自己的磁盘管理可以处理大部分问题&#xff0c;但它无法处理管理分区的所有方面。 这时候优质的磁盘管理…

半导体通讯SECS-I是什么?

SECS-I&#xff08;Semi Equipment Communications Standard 1 Message Transfer&#xff09;是一个定义如何发送和接收通信内容&#xff08;Content&#xff09;的协议。此标准定义了通过RS-232C传输介质进行通信内容的发送和接收规约。 其主要特点如下&#xff1a; 1.使用RS2…

android 控制台输出 缺失

问题 android 控制台输出内容缺失 详细问题 笔者进行android开发&#xff0c;期望控制台打印Log日志或是输出内容 Log.i("tag","content");或 System.out.println("content")但是实际上&#xff0c;上述内容并没有按照笔者期望打印 解决方…

84 CTF夺旗-PHP弱类型异或取反序列化RCE

目录 案例1&#xff1a;PHP-相关总结知识点-后期复现案例2&#xff1a;PHP-弱类型对比绕过测试-常考点案例3&#xff1a;PHP-正则preg_match绕过-常考点案例4&#xff1a;PHP-命令执行RCE变异绕过-常考点案例5&#xff1a;PHP-反序列化考题分析构造复现-常考点涉及资源&#xf…

2024.02.14作业

1. 请编程实现二维数组的杨辉三角 #include <stdio.h> #include <stdlib.h> #include <string.h>int main() {int n;scanf("%d", &n);int a[n][n];memset(a, 0, sizeof(a));a[0][0] 1;for (int i 1; i < n; i){for (int j 0; j < i …

tick数据、盘口数据、成交明细数据详解

近期开始学习订单薄策略(order book strategy)、订单流策略(order flow strategy)&#xff0c;理清数据是第一步。 一、成交明细数据 用各个软件进行看盘&#xff0c;除了分时、k线最常用外&#xff0c;盘口数据/成交明细也会显示出来&#xff0c;下图是螺纹主力shfe.rb2401 …

auto关键字详讲

目录 1.问题思考 2.auto关键字介绍 3. 早期auto的缺陷&#xff1a; 4.什么叫自动存储器&#xff1f; 5. c标准auto关键字 5.1auto的使用细节 5.2 auto什么时候不能推导变量的类型呢&#xff1f; 5.3基于范围的for循环 5.3.1范围for的用法 5.3.2 范围for的使用条件 6.…

C语言学习day14:跳转语句

今天学习的跳转语句主要是三种&#xff1a; break continue goto 上一篇文章已经说过了break和continue break&#xff1a;结束这个循环 continue&#xff1a;结束当前的循环迭代&#xff0c;进行下一次的迭代 看看二者代码的区别 代码&#xff08;break&#xff09;&am…

奔跑吧小恐龙(Java)

前言 Google浏览器内含了一个小彩蛋当没有网络连接时&#xff0c;浏览器会弹出一个小恐龙&#xff0c;当我们点击它时游戏就会开始进行&#xff0c;大家也可以玩一下试试&#xff0c;网址&#xff1a;恐龙快跑 - 霸王龙游戏. (ur1.fun) 今天我们也可以用Java来简单的实现一下这…

Nodejs 第三十七章(连表and子查询)

子查询 子查询&#xff08;Subquery&#xff09;&#xff0c;也被称为嵌套查询&#xff08;Nested Query&#xff09;&#xff0c;是指在一个查询语句中嵌套使用另一个完整的查询语句。子查询可以被视为一个查询的结果集&#xff0c;它可以作为外层查询的一部分&#xff0c;用…

Spring Boot 笔记 015 创建接口_更新文章分类

1.1.1 实体类id增加NotNull注释&#xff0c;并做分组校验 1.1.1.1 定义分组 1.1.1.2 实体类中指定校验项属于哪个分组 如果说某个校验项没有指定分组,默认属于Default分组 分组之间可以继承, A extends B 那么A中拥有B中所有的校验项package com.geji.pojo;import com.faste…