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

news2024/9/26 5:19:29

在这里插入图片描述

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 setup>请修改源码

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

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

相关文章

使用unplugin-auto-import页面不引入api飘红

使用unplugin-auto-import页面不引入api飘红

解决方案&#xff1a;. tsconfig.json文件夹加上 {"compilerOptions": {"target": "ES2020","useDefineForClassFields": true,"module": "ESNext","lib": ["ES2020", "DOM", &q…
阅读更多...
Python程序设计 循环结构（二）

Python程序设计 循环结构（二）

1.斐波那契数列 编写一个能计算斐波那契数列中第x个数的小程序。斐波那契数列&#xff08;Fibonacci sequence&#xff09;&#xff0c;又称黄金分割数列、 因数学家莱昂纳多斐波那契&#xff08;Leonardoda Fibonacci&#xff09;以兔子繁殖为例子而引入&#xff0c;故又称为…
阅读更多...
分类任务中的评估指标：Accuracy、Precision、Recall、F1

分类任务中的评估指标：Accuracy、Precision、Recall、F1

概念理解 T P TP TP、 T N TN TN、 F P FP FP、 F N FN FN精度/正确率&#xff08; A c c u r a c y Accuracy Accuracy&#xff09; 二分类查准率 P r e c i s i o n Precision Precision&#xff0c;查全率 R e c a l l Recall Recall 和 F 1 − s c o r e F1-score F1−s…
阅读更多...
Collection与数据结构 数据结构预备知识(一) :集合框架与时间空间复杂度

Collection与数据结构 数据结构预备知识(一) :集合框架与时间空间复杂度

1.集合框架 1.1 什么是集合框架 Java集合框架,又被称为容器,是定义在java.util包下的一组接口和接口实现的一些类.其主要的表现就是把一些数据放入这些容器中,对数据进行便捷的存储,检索,管理.集合框架底层实现原理其实就是各种数据结构的实现方法,所以在以后的学习中,我们会…
阅读更多...
2024年2月吸尘器行业线上电商（京东天猫淘宝）综合排行榜

2024年2月吸尘器行业线上电商（京东天猫淘宝）综合排行榜

鲸参谋监测的线上电商平台&#xff08;淘宝天猫京东&#xff09;2月吸尘器行业销售数据公开。 根据鲸参谋电商数据平台显示&#xff0c;吸尘器行业2月销量累计约53万件&#xff0c;环比上个月下滑29%&#xff0c;同比去年下滑19%&#xff1b;销售额累计约4亿&#xff0c;环比上…
阅读更多...
​ ​Redis（五）主从复制：主从模式介绍、配置、拓扑（一主一从结构、一主多从结构、树形主从结构）、原理（复制过程、​​​​​​​数据同步psync）、总结

​ ​Redis（五）主从复制：主从模式介绍、配置、拓扑（一主一从结构、一主多从结构、树形主从结构）、原理（复制过程、​​​​​​​数据同步psync）、总结

接上次博客&#xff1a;Redis&#xff08;四&#xff09;&#xff1a;持久化和事务&#xff1a;RDB&#xff08;定期备份&#xff09;【触发机制、流程说明、文件的处理、优缺点】、AOF&#xff08;实时备份&#xff09;【使用AOF、命令写入、文件同步、重写机制、启动时数据恢…
阅读更多...
Karmada 管理有状态应用 Xline 的早期探索与实践

Karmada 管理有状态应用 Xline 的早期探索与实践

背景与动机 目前随着云原生技术和云市场的不断成熟&#xff0c;越来越多的 IT 厂商开始投入到跨云多集群的怀抱当中。以下是 flexera 在 2023 年中关于云原生市场对多云多集群管理的接受程度的调查报告&#xff08;http://info.flexera.com&#xff09; 从 flexera 的报告中可…
阅读更多...
学习或复习电路的game推荐：nandgame(NAND与非门游戏)、Turing_Complete(图灵完备)、logisim工具

学习或复习电路的game推荐：nandgame(NAND与非门游戏)、Turing_Complete(图灵完备)、logisim工具

https://www.nandgame.com/ 免费 https://store.steampowered.com/app/1444480/Turing_Complete/ 收费&#xff0c;70元。据说可以导出 Verilog &#xff01; logisim及其衍生版本 都需要安装java环境。 http://www.cburch.com/logisim/ 是原版&#xff0c; 下载页面&#…
阅读更多...
Python实现猜数字游戏：一次编程旅程

Python实现猜数字游戏：一次编程旅程

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …
阅读更多...
Nexus3 Docker 私有仓库

Nexus3 Docker 私有仓库

Nexus3 Docker 私有仓库 安装并部署 Nexus3 $ docker search nexus3$ docker pull sonatype/nexus3$ mkdir /home/tester/data/docker/nexus3/sonatype-work $ sudo chown -R 200 /home/tester/data/docker/nexus3/sonatype-work$ docker run -d --namenexus3 \ --restartalw…
阅读更多...
【CSS浮动属性】别再纠结布局了！一文带你玩转CSS Float属性

【CSS浮动属性】别再纠结布局了！一文带你玩转CSS Float属性

在网页设计的世界里&#xff0c;CSS浮动属性&#xff08;float&#xff09;就像一把双刃剑。它能够让元素脱离文档流&#xff0c;实现灵活的布局&#xff0c;但如果处理不当&#xff0c;也可能引发一系列布局问题。 今天&#xff0c;我们就来深入探讨这把“剑”的正确使用方法…
阅读更多...
T1 神奇苹果桶 (25分) - 小米前端笔试编程题解

T1 神奇苹果桶 (25分) - 小米前端笔试编程题解

考试平台&#xff1a; 赛码 题目类型&#xff1a; 20道选择 2道编程题 考试时间&#xff1a; 2024-03-23 &#xff08;两小时&#xff09; 题目描述 小希在森林冒险的时候发现一个神奇的木桶&#xff0c;某些时会凭空出现一些苹果&#xff0c;小希很解地大家分享了这一个神奇…
阅读更多...
argocd cli工具使用

argocd cli工具使用

一、前言 ragocd除了使用web界面操作之外&#xff0c;也可以通过argocd cli工具进行操作&#xff0c;关于集群创建、gitlab仓库创建、app创建都是可以通过yaml 文件去操作&#xff0c;使用web界面创建的操作也需要使用argocd cli工具进行备份 二、使用 在argocd部署的章节已经…
阅读更多...
fuzzywuzzy，一个好用的 Python 库！

fuzzywuzzy，一个好用的 Python 库！

目录 前言 安装 基本功能 1. 字符串相似度比较 2. 模糊匹配与排序 实际应用场景 1. 数据清洗 2. 文本匹配与搜索 3. 搜索引擎优化 总结 前言 大家好&#xff0c;今天为大家分享一个好用的 Python 库 - fuzzywuzzy Github地址&#xff1a;https://github.com/seatgeek/fu…
阅读更多...
nginx 不能访问的排查思路

nginx 不能访问的排查思路

场景: 在云主机上搭建了nginx服务&#xff0c;测试阶段nginx服务监听的81端口&#xff0c;但无法通过公网访问到nginx默认网页&#xff1b; Nginx安装路径&#xff1a;/www/nginx/ 尝试访问&#xff0c;发现81端口不通 允许访问81 允许81端口开放后&#xff0c;发现 于是查看n…
阅读更多...
蓝鹏为何专注智能测量仪的加工定制？

蓝鹏为何专注智能测量仪的加工定制？

在这个日新月异的科技时代&#xff0c;自动化工厂层出不穷&#xff0c;并且是在不断地升级改造&#xff0c;为了产品的高速高质高效的自动化生产&#xff0c;智能测量仪的重要性不言而喻。智能测量仪的种类很多&#xff0c;蓝鹏一直致力于专业仪器定制&#xff0c;但你有没有想…
阅读更多...
python数据实时传给unity工程并绘制出来

python数据实时传给unity工程并绘制出来

python # 服务器端代码 import socket import random import struct import time# 创建一个服务器Socket server_socket socket.socket(socket.AF_INET, socket.SOCK_STREAM)# 监听的地址和端口 host 127.0.0.1 port 12345# 绑定地址和端口 server_socket.bind((host, port…
阅读更多...
UE4_官方动画内容示例1.2_动画蓝图——使用蓝图告知Actor播放动画

UE4_官方动画内容示例1.2_动画蓝图——使用蓝图告知Actor播放动画

展示了两个示例&#xff1a;在其中一个示例中&#xff0c;使用蓝图告知Actor播放动画&#xff0c;在另外一个示例中&#xff0c;展示了告知Actor播放动画的动画蓝图&#xff08;例如&#xff0c;此示例展示了如何将变量从蓝图传递给动画蓝图&#xff0c;并演示了如何将现有姿势…
阅读更多...
如何使用Excel创建一个物品采购表

如何使用Excel创建一个物品采购表

在企业的日常运营中&#xff0c;物品采购是一个常见且重要的活动。有效的采购管理不仅可以确保企业及时获得所需物资&#xff0c;还可以控制成本、提高效率。Microsoft Excel是一个功能强大的工具&#xff0c;它可以帮助我们创建和管理物品采购表。本文将详细介绍如何使用Excel…
阅读更多...
IDEA2023版本整合SpringBoot热部署

IDEA2023版本整合SpringBoot热部署

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 开发环境篇 ✨特色专栏&#xff1a; M…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023