Vuepress 2从0-1保姆级进阶教程——美化与模板

在这里插入图片描述

Vuepress 2 专栏目录

1. 入门阶段

  1. Vuepress 2从0-1保姆级入门教程——环境配置篇
  2. Vuepress 2从0-1保姆级入门教程——安装流程篇
  3. Vuepress 2从0-1保姆级入门教程——文档配置篇
  4. Vuepress 2从0-1保姆级入门教程——范例与部署

2.进阶阶段

  1. Vuepress 2从0-1保姆级进阶教程——全文搜索篇
  2. Vuepress 2从0-1保姆级进阶教程——美化与模版

在这里插入图片描述

在这里插入图片描述

一、美化样式

（一）修改默认样式

📂 .vuepress下新建 📁 styles，新建palette.scss

//设备宽度，值自己改
$MQNarrow: 959px !default;
$MQMobile: 719px !default;
$MQMobileNarrow: 419px !default;

（二）自定义样式

📁 styles 内，新建index.scss

1. 平滑滚动

:root {
  scroll-behavior: smooth;
}

2. 覆盖默认样式

在这里插入图片描述

（1）浅色主题变量
:root {
  // brand colors
  --c-brand: #3eaf7c;
  --c-brand-light: #4abf8a;

  // background colors
  --c-bg: #ffffff;
  --c-bg-light: #f3f4f5;
  --c-bg-lighter: #eeeeee;
  --c-bg-dark: #ebebec;
  --c-bg-darker: #e6e6e6;
  --c-bg-navbar: var(--c-bg);
  --c-bg-sidebar: var(--c-bg);
  --c-bg-arrow: #cccccc;

  // text colors
  --c-text: #2c3e50;
  --c-text-accent: var(--c-brand);
  --c-text-light: #3a5169;
  --c-text-lighter: #4e6e8e;
  --c-text-lightest: #6a8bad;
  --c-text-quote: #999999;

  // border colors
  --c-border: #eaecef;
  --c-border-dark: #dfe2e5;

  // custom container colors
  --c-tip: #42b983;
  --c-tip-bg: var(--c-bg-light);
  --c-tip-title: var(--c-text);
  --c-tip-text: var(--c-text);
  --c-tip-text-accent: var(--c-text-accent);
  --c-warning: #ffc310;
  --c-warning-bg: #fffae3;
  --c-warning-bg-light: #fff3ba;
  --c-warning-bg-lighter: #fff0b0;
  --c-warning-border-dark: #f7dc91;
  --c-warning-details-bg: #fff5ca;
  --c-warning-title: #f1b300;
  --c-warning-text: #746000;
  --c-warning-text-accent: #edb100;
  --c-warning-text-light: #c1971c;
  --c-warning-text-quote: #ccab49;
  --c-danger: #f11e37;
  --c-danger-bg: #ffe0e0;
  --c-danger-bg-light: #ffcfde;
  --c-danger-bg-lighter: #ffc9c9;
  --c-danger-border-dark: #f1abab;
  --c-danger-details-bg: #ffd4d4;
  --c-danger-title: #ed1e2c;
  --c-danger-text: #660000;
  --c-danger-text-accent: #bd1a1a;
  --c-danger-text-light: #b5474d;
  --c-danger-text-quote: #c15b5b;
  --c-details-bg: #eeeeee;

  // badge component colors
  --c-badge-tip: var(--c-tip);
  --c-badge-warning: #ecc808;
  --c-badge-warning-text: var(--c-bg);
  --c-badge-danger: #dc2626;
  --c-badge-danger-text: var(--c-bg);

  // transition vars
  --t-color: 0.3s ease;
  --t-transform: 0.3s ease;

  // code blocks vars
  --code-bg-color: #282c34;
  --code-hl-bg-color: rgba(0, 0, 0, 0.66);
  --code-ln-color: #9e9e9e;
  --code-ln-wrapper-width: 3.5rem;

  // font vars
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;

  // layout vars
  --navbar-height: 3.6rem;
  --navbar-padding-v: 0.7rem;
  --navbar-padding-h: 1.5rem;
  --sidebar-width: 20rem;
  --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
  --content-width: 740px;
  --homepage-width: 960px;
}

// plugin-back-to-top
.back-to-top {
  --back-to-top-color: var(--c-brand);
  --back-to-top-color-hover: var(--c-brand-light);
}

// plugin-docsearch
.DocSearch {
  --docsearch-primary-color: var(--c-brand);
  --docsearch-text-color: var(--c-text);
  --docsearch-highlight-color: var(--c-brand);
  --docsearch-muted-color: var(--c-text-quote);
  --docsearch-container-background: rgba(9, 10, 17, 0.8);
  --docsearch-modal-background: var(--c-bg-light);
  --docsearch-searchbox-background: var(--c-bg-lighter);
  --docsearch-searchbox-focus-background: var(--c-bg);
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
  --docsearch-hit-color: var(--c-text-light);
  --docsearch-hit-active-color: var(--c-bg);
  --docsearch-hit-background: var(--c-bg);
  --docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
  --docsearch-footer-background: var(--c-bg);
}

// plugin-external-link-icon
.external-link-icon {
  --external-link-icon-color: var(--c-text-quote);
}

// plugin-medium-zoom
.medium-zoom-overlay {
  --medium-zoom-bg-color: var(--c-bg);
}

// plugin-nprogress
#nprogress {
  --nprogress-color: var(--c-brand);
}

// plugin-pwa-popup
.pwa-popup {
  --pwa-popup-text-color: var(--c-text);
  --pwa-popup-bg-color: var(--c-bg);
  --pwa-popup-border-color: var(--c-brand);
  --pwa-popup-shadow: 0 4px 16px var(--c-brand);
  --pwa-popup-btn-text-color: var(--c-bg);
  --pwa-popup-btn-bg-color: var(--c-brand);
  --pwa-popup-btn-hover-bg-color: var(--c-brand-light);
}

// plugin-search
.search-box {
  --search-bg-color: var(--c-bg);
  --search-accent-color: var(--c-brand);
  --search-text-color: var(--c-text);
  --search-border-color: var(--c-border);

  --search-item-text-color: var(--c-text-lighter);
  --search-item-focus-bg-color: var(--c-bg-light);
}
（2）暗黑主题变量

在这里插入图片描述

html.dark {
  // brand colors
  --c-brand: #3aa675;
  --c-brand-light: #349469;

  // background colors
  --c-bg: #22272e;
  --c-bg-light: #2b313a;
  --c-bg-lighter: #262c34;
  --c-bg-dark: #343b44;
  --c-bg-darker: #37404c;

  // text colors
  --c-text: #adbac7;
  --c-text-light: #96a7b7;
  --c-text-lighter: #8b9eb0;
  --c-text-lightest: #8094a8;

  // border colors
  --c-border: #3e4c5a;
  --c-border-dark: #34404c;

  // custom container colors
  --c-tip: #318a62;
  --c-warning: #e0ad15;
  --c-warning-bg: #2d2f2d;
  --c-warning-bg-light: #423e2a;
  --c-warning-bg-lighter: #44442f;
  --c-warning-border-dark: #957c35;
  --c-warning-details-bg: #39392d;
  --c-warning-title: #fdca31;
  --c-warning-text: #d8d96d;
  --c-warning-text-accent: #ffbf00;
  --c-warning-text-light: #ddb84b;
  --c-warning-text-quote: #ccab49;
  --c-danger: #fc1e38;
  --c-danger-bg: #39232c;
  --c-danger-bg-light: #4b2b35;
  --c-danger-bg-lighter: #553040;
  --c-danger-border-dark: #a25151;
  --c-danger-details-bg: #482936;
  --c-danger-title: #fc2d3b;
  --c-danger-text: #ea9ca0;
  --c-danger-text-accent: #fd3636;
  --c-danger-text-light: #d9777c;
  --c-danger-text-quote: #d56b6b;
  --c-details-bg: #323843;

  // badge component colors
  --c-badge-warning: var(--c-warning);
  --c-badge-warning-text: #3c2e05;
  --c-badge-danger: var(--c-danger);
  --c-badge-danger-text: #401416;

  // code blocks vars
  --code-hl-bg-color: #363b46;
}

// plugin-docsearch
html.dark .DocSearch {
  --docsearch-logo-color: var(--c-text);
  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
    0 2px 2px 0 rgba(3, 4, 9, 0.3);
  --docsearch-key-gradient: linear-gradient(-225deg, #444950, #1c1e21);
  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
    0 -4px 8px 0 rgba(0, 0, 0, 0.2);
}

3. 额外样式

（1）我的样式
/* badge */
span[alt="blue"] {
    margin-left: .2em;
    padding: 0 .5em;
    color: white;
    border-radius: 5%;
    background-image: linear-gradient(to right, #00c6fb 0%, #005bea 100%);
}

span[alt="green"] {
    margin-left: .2em;
    padding: 0 .5em;
    color: white;
    border-radius: 5%;
    background-image: linear-gradient(60deg, #96deda 0%, #50c9c3 100%);
}

span[alt="purple"] {
    margin-left: .2em;
    padding: 0 .5em;
    color: white;
    border-radius: 5%;
    background-image: linear-gradient(to right, #ec77ab 0%, #7873f5 100%);
}

span[alt="orange"] {
    margin-left: .2em;
    padding: 0 .5em;
    color: white;
    border-radius: 5%;
    background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
}

span[alt="black"] {
    margin-left: .2em;
    padding: 0 .5em;
    color: white;
    border-radius: 5%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; 
    background-blend-mode: multiply,multiply;
}
（2）效果
<span alt = "blue">测试</span>
<span alt = "black">测试</span>
<span alt = "orange">测试</span>
<span alt = "purple">测试</span>

在这里插入图片描述

二、模板

📖 如需开发主题，请阅读百家饭OpenAPI的编写vuepress主题（自定义自己的框架，开发复杂程序）

🪨模版是方便文章写作提前做好的布局样式，Vuepress默认主题提供两种布局Layout和NotFound

💡 Vuepress支持用户自定义布局哦

在这里插入图片描述

（一）编辑模板

在📂.vuepress内新建📁layout，用来存放模版文件,这里以banner.vue为例，源码参考Vue3.0组件—banner轮播图（渐入渐隐效果），略有修改

<script>
import { ref, onMounted, unref, onUnmounted } from "vue";
import Navbar from '@theme/Navbar.vue'
import Page from '@theme/Page.vue'

//自动切换banner源码请参考https://blog.csdn.net/weixin_43622279/article/details/12693709

模板需要的图片等素材请放到📁public
在这里插入图片描述

（二）导入模板

在这里插入图片描述

在📂.vuepress内新建文件client.ts，导入模版文件并配置布局样式

import { defineClientConfig } from 'vuepress/client'
import home from './layout/home.vue'

export default defineClientConfig({
    layouts: {
        home,
    },
})

在这里插入图片描述

（三）使用模板

在要使用的文档里添加模版名，例如

---
layout: home
---

（四）测试效果

1. 视频展示

Vue 自动播放banner

2. 截图预览

在这里插入图片描述

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

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

相关文章

【Java程序设计】【C00388】基于（JavaWeb）Springboot的校园竞赛管理系统（有论文）

【Java程序设计】【C00388】基于（JavaWeb）Springboot的校园竞赛管理系统（有论文）

Springboot的校园竞赛管理系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;已经做了六年的毕业设计程序开发&#xff0c;开发过上千套毕业设计程序&#xff0c;博客…
阅读更多...
基于ZHW3548的红外额温枪解决方案

基于ZHW3548的红外额温枪解决方案

红外额温枪&#xff0c;非接触式测量最典型的方法是红外测温。自红外辐射原理被发现以来&#xff0c;红外技术被广泛应用在温度测量中。红外测温仪具有测温范围广&#xff0c;响应速度快&#xff0c;灵敏度高等特点。红外耳温枪、红外额温计和红外筛检仪都属于非接触式体温计。…
阅读更多...
实验3 中文分词

实验3 中文分词

必做题&#xff1a; 数据准备&#xff1a;academy_titles.txt为“考硕考博”板块的帖子标题&#xff0c;job_titles.txt为“招聘信息”板块的帖子标题&#xff0c;使用jieba工具对academy_titles.txt进行分词&#xff0c;接着去除停用词&#xff0c;然后统计词频&#xff0c;最…
阅读更多...
鱼眼相机的测距流程及误差分析[像素坐标系到空间一点以及测距和误差分析]

鱼眼相机的测距流程及误差分析[像素坐标系到空间一点以及测距和误差分析]

由于最近在整理单目测距的内容&#xff0c;顺手也总结下鱼眼相机的测距流程和误差分析&#xff0c;如果有错误&#xff0c;还请不吝赐教。 参考链接: 鱼眼镜头的成像原理到畸变矫正&#xff08;完整版&#xff09; 相机模型总结&#xff08;针孔、鱼眼、全景&#xff09; 三维…
阅读更多...
Linux 基础IO [缓冲区文件系统]

Linux 基础IO [缓冲区文件系统]

&#x1f493;博主CSDN主页:麻辣韭菜-CSDN博客&#x1f493;   ⏩专栏分类&#xff1a;http://t.csdnimg.cn/G90eI⏪   &#x1f69a;代码仓库:Linux: Linux日常代码练习&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多Linux知识   &#x1f51d; 目录 前言…
阅读更多...
HarmonyOS实战开发-实现自定义弹窗

HarmonyOS实战开发-实现自定义弹窗

介绍 本篇Codelab基于ArkTS的声明式开发范式实现了三种不同的弹窗&#xff0c;第一种直接使用公共组件&#xff0c;后两种使用CustomDialogController实现自定义弹窗&#xff0c;效果如图所示 相关概念 AlertDialog&#xff1a;警告弹窗&#xff0c;可设置文本内容和响应回调…
阅读更多...
Swift 从获取所有 NSObject 对象聊起：ObjC、汇编语言以及底层方法调用链（三）

Swift 从获取所有 NSObject 对象聊起：ObjC、汇编语言以及底层方法调用链（三）

概览 承接上一篇博文： Swift 从获取所有 NSObject 对象聊起：ObjC、汇编语言以及底层方法调用链（二）我们在其中讨论了如何使用第三方强大通用的钩子库 SwiftHook 来协助我们完成 NSObject 构造器 init 的 SWIZZ 操作。我们还讨论了为什么用 print 打印对象信息时会发生崩溃…
阅读更多...
在Windows系统上安装多个 Nodejs

在Windows系统上安装多个 Nodejs

前言 在Windows系统安装Nodejs 在Windows系统上安装多个 Nodejs v14.16.1安装位置 D:\sde\nodejs\node-v14.16.1-win-x64 v16.20.2安装位置 D:\sde\nodejs\node-v16.20.2-win-x64 v18.20.0安装位置 D:\sde\nodejs\node-v18.20.0-win-x64 v20.12.0安装位置 D:\sde\nod…
阅读更多...
YOLOv9改进策略 ：neck优化 | 路径融合GFPN，小目标到大目标一网打尽 | 轻骨干重Neck的轻量级目标检测器GiraffeDet

YOLOv9改进策略 ：neck优化 | 路径融合GFPN，小目标到大目标一网打尽 | 轻骨干重Neck的轻量级目标检测器GiraffeDet

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文改进内容&#xff1a;设计了一种新的路径融合GFPN&#xff1a;包含跳层与跨尺度连接&#xff0c;改进思路来自ICLR2022 GiraffeDet的核心思想。 &#x1f4a1;&#x1f4a1;&#x1f4a1;GFPN和六个检测头结合&#xff0c;这种跳层…
阅读更多...
集体出走的Stability AI 发布全新代码大模型，3B以下性能最优，超越Code Llama和DeepSeek-Coder

集体出走的Stability AI 发布全新代码大模型，3B以下性能最优，超越Code Llama和DeepSeek-Coder

Stability AI又有新动作&#xff01;程序员又有危机了&#xff1f; 3月26日&#xff0c;Stability AI推出了先进的代码语言模型Stable Code Instruct 3B&#xff0c;该模型是在Stable Code 3B的基础上进行指令调优的Code LM。 Stability AI 表示&#xff0c;Stable Code Instru…
阅读更多...
【python】flask执行上下文context，请求上下文和应用上下文原理解析

【python】flask执行上下文context，请求上下文和应用上下文原理解析

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…
阅读更多...
2024河北石家庄矿业矿山展览会|河北智慧矿山展会|河北矿博会

2024河北石家庄矿业矿山展览会|河北智慧矿山展会|河北矿博会

2024中国&#xff08;石家庄&#xff09;国际矿业博览会 　　 　　时间&#xff1a;2024年7月4-6日 地点&#xff1a;石家庄国际会展中心.正定 　　 　　随着全球经济的持续增长和矿产资源需求的不断攀升&#xff0c;矿业行业正迎来前所未有的发展机遇。作为矿业领域的盛会&…
阅读更多...
3.28C++

3.28C++

复数类的实现&#xff0c;写出三种构造函数&#xff0c;算术运算符、关系运算符、逻辑运算符重载尝试实现自增、自减运算符的重载 #include <iostream> using namespace std; class Num {int rel; //实部int vir; //虚部 public:Num():rel(2),vir(1){}Num(int rel,…
阅读更多...
确保未来安全：应对云安全的复杂性

确保未来安全：应对云安全的复杂性

云是业务运营的重要组成部分&#xff0c;它改变了组织扩展、创新和适应的方式。然而&#xff0c;其影响力日益增长的广度和深度不仅仅局限于商业领域。云环境是我们日常生活中不可或缺的一部分&#xff0c;负责存储和传输全球平民最敏感的数据。随着大量企业和个人利用云&#…
阅读更多...
【C语言】编译和链接----从源代码到可执行程序的转换【图文详解】

【C语言】编译和链接----从源代码到可执行程序的转换【图文详解】

欢迎来CILMY23的博客喔&#xff0c;本篇为【C语言】文件操作揭秘&#xff1a;C语言中文件的顺序读写、随机读写、判断文件结束和文件缓冲区详细解析【图文详解】&#xff0c;感谢观看&#xff0c;支持的可以给个一键三连&#xff0c;点赞关注收藏。 前言 欢迎来到本篇博客&…
阅读更多...
最小化安装Kubesphere报错问题解决方法

最小化安装Kubesphere报错问题解决方法

最小化安装Kubesphere报错: TASK [preinstall : Stop if defaultStorageClass was not found] ****************** fatal: [localhost]: FAILED! > {"assertion": "\"(default)\" in default_storage_class_check.stdout", "changed&qu…
阅读更多...
数据结构进阶篇 之 【二叉树链序存储】的整体实现讲解

数据结构进阶篇 之 【二叉树链序存储】的整体实现讲解

封建迷信我嗤之以鼻&#xff0c;财神殿前我长跪不起 一、二叉树链式结构的实现 1.二叉树的创建 1.1 手动创建 1.2 前序递归创建 2.二叉树的遍历 2.1 前序&#xff0c;中序以及后序遍历概念 2.2 层序遍历概念 2.3 前序打印实现 2.4 中序打印实现 2.4 后序打印实现 2.…
阅读更多...
SnapGene 5 for Mac 分子生物学软件

SnapGene 5 for Mac 分子生物学软件

SnapGene 5 for Mac是一款专为Mac操作系统设计的分子生物学软件&#xff0c;以其强大的功能和用户友好的界面&#xff0c;为科研人员提供了高效、便捷的基因克隆和分子实验设计体验。 软件下载&#xff1a;SnapGene 5 for Mac v5.3.1中文激活版 这款软件支持DNA构建和克隆设计&…
阅读更多...
Linux_进程概念_冯诺依曼_进程概念_查看进程_获取进程pid_创建进程_进程状态_进程优先级_环境变量_获取环境变量三种方式_3

Linux_进程概念_冯诺依曼_进程概念_查看进程_获取进程pid_创建进程_进程状态_进程优先级_环境变量_获取环境变量三种方式_3

文章目录 一、硬件-冯诺依曼体系结构二、软件-操作系统-进程概念0.操作系统做什么的1.什么叫做进程2.查看进程3.系统接口 获取进程pid- getpid4.系统接口 获取父进程pid - getppid5.系统接口 创建子进程 - fork1、手册2、返回值3、fork做了什么4、基本用法 6.进程的状态1、进程…
阅读更多...
【Java扫盲篇】String、String Buffer和String Builder的区别

【Java扫盲篇】String、String Buffer和String Builder的区别

你在面试时&#xff0c;面试官让你讲讲String String Buffer String Builder的区别&#xff0c;你是否能流畅的、完整的叙述出他们三者的区别? ✍先说结论 相同点&#xff1a; 他们的底层都是由char数组实现的。不同点&#xff1a; String对象一旦创建&#xff0c;是不能修…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站