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保姆级进阶教程——美化与模版
3. Vuepress 2从0-1保姆级进阶教程——标准化流程

logo等静态文件：https://wwk.lanzouo.com/b04x8f3hg
密码：666
仓库：https://gitee.com/passwordgloo/vuepress2-tutorial

git clone git@gitee.com:passwordgloo/vuepress2-tutorial.git
cd vuepress2-tutorial
pnpm install

# 谨慎更新包
# pnpm docs:update-package

一、美化样式

默认主题使用sass作为css预处理器

palette.scss 自定义样式变量（覆盖默认样式）
index.scss 支持自定义样式

（一）修改默认样式

📂 .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;