vuepress-theme-reco 2.0 安装

1. 全局安装 VuePress

npm install -g vuepress

2. 在项目中初始化 VuePress

mkdir my-blog && cd my-blog
npm init -y

3. 安装 vuepress-theme-reco

npm install vuepress-theme-reco@next

4. 在项目中创建配置文件

在项目根目录下创建 `.vuepress` 文件夹，并在其中创建 `config.js` 文件，具体配置可参考 vuepress-theme-reco 的文档。

mkdir .vuepress && cd .vuepress
touch config.js

5. 运行 VuePress

vuepress dev

6. 访问网站

在浏览器中访问 `http://localhost:8080` 即可预览网站。

相关问题

vuepress-theme-reco 2.0 导航栏

vuepress-theme-reco 2.0 的导航栏可以通过配置文件进行设置。以下是一个简单的例子：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'External', link: 'https://google.com' },
    ]
  }
}

上述代码中，`nav` 是一个数组，其中每个元素都代表导航栏中的一个链接。每个链接可以包含 `text` 和 `link` 两个属性，分别表示链接的文本和 URL。

此外，`nav` 数组还可以包含子数组，用于创建下拉菜单：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      {
        text: 'Guide',
        items: [
          { text: 'Getting Started', link: '/guide/' },
          { text: 'Advanced', link: '/guide/advanced/' }
        ]
      },
      { text: 'External', link: 'https://google.com' },
    ]
  }
}

上述代码中，`items` 是一个包含子链接的数组，用于创建下拉菜单。每个子链接可以包含 `text` 和 `link` 两个属性，同样表示链接的文本和 URL。

vuepress-theme-reco 2.0 导航栏 logo

在 VuePress-theme-reco 2.0 中，可以通过以下方式添加导航栏 logo：

1. 在 `.vuepress/public` 目录下添加一个名为 `logo.png` 的图片文件。

2. 在 `.vuepress/config.js` 文件中的 `themeConfig` 中添加 `logo` 属性，值为 `'/logo.png'`。

示例代码：

module.exports = {
  themeConfig: {
    logo: '/logo.png'
  }
}

注意：如果你的图片不是 PNG 格式的，请将 `.png` 替换为对应的格式后缀名。另外，使用绝对路径时请确保路径正确。