主题reco使用及配置

沈故2022-08-09vuepress

快速上手

前提条件

本文会帮助你从头搭建一个简单的 VuePress 文档。如果你想在一个现有项目中使用 VuePress 管理文档，从步骤 3 开始。

创建并进入一个新目录

mkdir vuepress-starter && cd vuepress-starter

使用你喜欢的包管理器进行初始化
```
yarn init # npm init
```
将 VuePress 安装为本地依赖
我们已经不再推荐全局安装 VuePress
```
yarn add -D vuepress # npm install -D vuepress
```
注意
如果你的现有项目依赖了 webpack 3.x，我们推荐使用 Yarnopen in new window而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误的依赖树。

创建你的第一篇文档

mkdir docs && echo '# Hello VuePress' > docs/README.md

在 package.json 中添加一些 scriptsopen in new window

这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

在本地启动服务器

yarn docs:dev # npm run docs:dev

访问 http://localhost:8080，即成功使用vuepress

进阶

暗色模式切换为默认操作

如果你喜欢暗色模式的话，接下来的操作可以将它设置为默认。(应该主题从 1.2.0 之后才生效)

TIP

初始化^1.3.0+^

暗色模式默认开启，为 auto 模式，显示模式调节按钮，你也可以自定义初始化配置：

// .vuepress/config.js
module.exports = {
  theme: "reco",
  themeConfig: {
    mode: "dark", // 默认 auto，auto 跟随系统，dark 暗色模式，light 亮色模式
    modePicker: false, // 默认 true，false 不显示模式调节按钮，true 则显示
  },
};

Config.js 配置

移动端优化

在移动端，搜索框在获得焦点时会放大，并且在失去焦点后可以左右滚动，这可以通过设置元来优化。

// .vuepress/config.js
module.exports = {
  head: [
    [
      "meta",
      {
        name: "viewport",
        content: "width=device-width,initial-scale=1,user-scalable=no",
      },
    ],
  ],
};

图标

您可以在导航菜单中使用主题的内置图标，如下所示：

{ text: 'Tags', link: '/tags/', icon: 'reco-tag' }

具体图标代码可以去官方网站open in new window查看。

备案信息和项目开始时间

ICP 备案指向链接 和 公安部备案 在 1.2.0 后生效。

// .vuepress/config.js
module.exports = {
  themeConfig: {
    // 备案
    record: "ICP 备案文案",
    recordLink: "ICP 备案指向链接",
    cyberSecurityRecord: "公安部备案文案",
    cyberSecurityLink: "公安部备案指向链接",
    // 项目开始时间，只填写年份
    startYear: "2017",
  },
};

设置作者姓名

设置全局作者姓名

// .vuepress/config.js
module.exports = {
  themeConfig: {
    // author
    author: "reco_luan",
  },
};

为单篇文章设置作者姓名

---
title: 你还没真的努力过，就轻易输给了懒惰
date: 2015-04-23
categories: article
author: 渡渡
---

华为文案

首页可以显示 “华为” 文案，需要以下配置。

// .vuepress/config.js
module.exports = {
  themeConfig: {
    huawei: true,
  },
};

Logo

导航栏左侧可以显示 logo, 需要以下配置。

// .vuepress/config.js
module.exports = {
  themeConfig: {
    logo: "/head.png",
  },
};

头像

1.2.0 后使用 themeConfig.authorAvatar 替换首页的 faceImage 来设置头像

// .vuepress/config.js

module.exports = {
  theme: "reco",
  themeConfig: {
    authorAvatar: "/avatar.png",
  },
};

主题reco使用及配置

页面导航