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

passwordgloo

已于 2024-06-10 11:11:21 修改

阅读量454

点赞数 1

分类专栏： Vuepress 2教程文章标签： vue

于 2024-03-24 18:41:35 首次发布

本文链接：https://blog.csdn.net/passwordgloo/article/details/136992445

版权

Vuepress 2教程专栏收录该内容

7 篇文章 19 订阅

订阅专栏

本文详细介绍了如何在Vuepress2中进行美化样式定制，包括修改默认样式、创建自定义主题和模板，以及如何导入和使用预定义或自定义的布局。此外，还涉及到了组件和主题开发的基础知识。

摘要由CSDN通过智能技术生成

在这里插入图片描述

Vuepress 2 专栏目录【已完结】

1. 入门阶段

Vuepress 2从0-1保姆级入门教程——环境配置篇
Vuepress 2从0-1保姆级入门教程——安装流程篇
Vuepress 2从0-1保姆级入门教程——文档配置篇
Vuepress 2从0-1保姆级入门教程——主题与部署

2.进阶阶段

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

在这里插入图片描述

一、美化样式

在这里插入图片描述

（一）修改默认样式

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

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

（二）自定义样式

📁 styles 内，新建index.scss，例如为实现标题锚点平滑滚动效果可输入以下代码：

:root {
  scroll-behavior: smooth;
}

1. 修改默认样式

在这里插入图片描述

（1）浅色主题变量

::root {
  // brand colors
  --c-brand: #3eaf7c;
  --c-brand-light: #4abf8a;

  // background colors
  --c-bg: #fff;
  --c-bg-light: #f3f4f5;
  --c-bg-lighter: #eee;
  --c-bg-dark: #ebebec;
  --c-bg-darker: #e6e6e6;
  --c-bg-navbar: var(--c-bg);
  --c-bg-sidebar: var(--c-bg);
  --c-bg-arrow: #ccc;

  // 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: #999;

  // 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: #600;
  --c-danger-text-accent: #bd1a1a;
  --c-danger-text-light: #b5474d;
  --c-danger-text-quote: #c15b5b;
  --c-details-bg: #eee;

  // 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);

  // code group colors
  --c-code-group-tab-title: rgb(255 255 255 / 90%);
  --c-code-group-tab-bg: var(--code-bg-color);
  --c-code-group-tab-outline: var(var(--c-code-group-tab-title));
  --c-code-group-tab-active-border: var(--c-brand);

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

  // code blocks vars
  --code-bg-color: #282c34;
  --code-hl-bg-color: rgb(0 0 0 / 66%);
  --code-hl-error-bg-color: rgb(244 63 94 / 16%);
  --code-hl-warning-bg-color: rgb(255 193 7 / 16%);
  --code-line-diff-remove-color: rgb(244 63 94 / 16%);
  --code-line-diff-remove-symbol-color: #e0575b;
  --code-line-diff-add-color: rgb(16 185 129 / 16%);
  --code-line-diff-add-symbol-color: #298459;
  --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;

  // external-link-icon
  --external-link-icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
  --external-link-icon-color: var(--c-text-quote);
}

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

// plugin-catalog
.vp-catalog-wrapper {
  --catalog-bg-color: var(--c-bg);
  --catalog-bg-secondary-color: var(--c-bg-dark);
  --catalog-border-color: var(--c-border);
  --catalog-active-color: var(--c-brand);
  --catalog-hover-color: var(--c-brand-light);
}

// plugin-comment
.waline-wrapper {
  --waline-bg-color: var(--c-bg);
  --waline-bg-color-light: var(--c-bg-light);
  --waline-text-color: var(--c-color);
  --waline-border: 1px solid var(--c-border);
  --waline-border-color: var(--c-border);
  --waline-theme-color: var(--c-brand);
  --waline-active-color: var(--c-brand-light);
}

// plugin-docsearch
/* stylelint-disable-next-line selector-class-pattern */
.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: rgb(9 10 17 / 80%);
  --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-medium-zoom
.medium-zoom-overlay {
  --medium-zoom-bg-color: var(--c-bg);
}

// plugin-notice
.vp-notice-wrapper {
  --notice-color: var(--c-text);
  --notice-bg-color: var(--c-bg);
  --notice-primary-color: var(--c-brand);
  --notice-primary-text-color: var(--c-bg);
  --notice-primary-hover-color: var(--c-brand-light);
  --notice-button-color: var(--c-bg-light);
  --notice-button-hover-color: var(--c-bg-lighter);
}

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

body {
  // plugin-photo-swipe
  --photo-swipe-bullet: var(--c-bg);
  --photo-swipe-bullet-active: var(--c-brand);

  // plugin-pwa-popup
  --pwa-text-color: var(--c-text);
  --pwa-bg-color: var(--c-bg);
  --pwa-border-color: var(--c-brand);
  --pwa-btn-text-color: var(--c-bg);
  --pwa-btn-bg-color: var(--c-brand);
  --pwa-btn-hover-bg-color: var(--c-brand-light);
}

// plugin-redirect
.redirect-modal-mask {
  --redirect-bg-color: var(--c-bg);
  --redirect-bg-color-light: var(--c-bg-light);
  --redirect-bg-color-lighter: var(--c-bg-lighter);
  --redirect-text-color: var(--c-text);
  --redirect-primary-color: var(--c-brand);
  --redirect-primary-hover-color: var(--c-brand-light);
  --redirect-primary-text-color: var(--c-bg);
}

// 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
  /* stylelint-disable-next-line selector-class-pattern */
  .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 rgb(3 4 9 / 30%);
    --docsearch-key-gradient: linear-gradient(-225deg, #444950, #1c1e21);
    --docsearch-footer-shadow: inset 0 1px 0 0 rgb(73 76 106 / 50%),
      0 -4px 8px 0 rgb(0 0 0 / 20%);
  }

  // plugin-pwa
  body {
    --pwa-shadow-color: rgb(0 0 0 / 30%);
    --pwa-content-color: #ccc;
    --pwa-content-light-color: #999;
  }
}

我的样式分享

/* badge */
@mixin badgeCommon {
    margin-left: .2em;
    padding: 0 .5em;
    color: white;
    border-radius: 5%;
}

span[alt="blue"] {
    @include badgeCommon();
    background-image: linear-gradient(to right, #00c6fb 0%, #005bea 100%);
}

span[alt="green"] {
    @include badgeCommon();
    background-image: linear-gradient(60deg, #96deda 0%, #50c9c3 100%);
}

span[alt="purple"] {
    @include badgeCommon();
    background-image: linear-gradient(to right, #ec77ab 0%, #7873f5 100%);
}

span[alt="orange"] {
    @include badgeCommon();
    background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
}

span[alt="black"] {
    @include badgeCommon();
    background-image: linear-gradient(to right, #434343 0%, black 100%);
}

<span alt ="blue">测试</span>
<span alt ="black">测试</span>
<span alt ="orange">测试</span>
<span alt ="purple">测试</span>

在这里插入图片描述

二、模板

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

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

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

在这里插入图片描述

（一）编辑模板

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

默认主题提供以下组件：

在这里插入图片描述

<script setup>
import { ref, onMounted, unref, onUnmounted } from "vue";
import { Content } from 'vuepress/client'
import Navbar from '@theme/VPNavbar.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,
    },
})