VuePress 静态网站生成

栏目: Node.js · 发布时间: 5年前

内容简介:使用技术:仓库地址:如果你想在一个现有项目中使用 VuePress,同时想要在该项目中管理文档,则应该将 VuePress 安装为本地依赖。

使用技术:

  • VuePress - Vue 驱动的静态网站生成器

仓库地址: https://github.com/yinian-R/v...

全局安装

## 安装
yarn global add vuepress # 或者:npm install -g vuepress

现有项目

如果你想在一个现有项目中使用 VuePress,同时想要在该项目中管理文档,则应该将 VuePress 安装为本地依赖。

## 没有项目可以初始化
yarn init

## 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者:npm install -D vuepress

## 新建一个 docs 文件夹
mkdir docs

## 新建一个 markdown 文件
echo # Hello VuePress! > docs/README.md

## 开始写作
npx vuepress dev docs

接着,在 package.json 里加一些脚本:

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

基本配置

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js

一个 VuePress 网站必要的配置文件是 .vuepress/config.js,它应该导出一个 JavaScript 对象:

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around'
}

静态资源

创建public文件夹,主要用于存放静态资源

.
├─ docs
│  └─ .vuepress
│     └─ public
│          └─ image
│               └─ favicon.ico

添加网站 favicon,修改 .vuepress/config.js 内容

module.exports = {
    head:[
        ['link', {rel:'icon', href:'/image/favicon.ico'}]
    ]
};

导航栏

你可以通过 themeConfig.nav 增加一些导航栏链接:

module.exports = {
    themeConfig: {
        nav: [
            { text: '主页', link: '/' },
            { text: '配置', link: '/guide/' },
            {
                text: '语言',
                items: [
                    { text: '中文', link: '/language/chinese/' },
                    { text: 'English', link: '/language/english/' }
                ]
            },
            { text: 'GitHub', link: 'https://github.com' }
        ]
    }
};

侧边栏

想要使 侧边栏(Sidebar)生效,需要配置 themeConfig.sidebar,基本的配置,需要一个包含了多个链接的数组:

module.exports = {
    themeConfig: {
        sidebar: [
            '/',
            ['/hello', 'hello page']
        ]
    }
};

以上所述就是小编给大家介绍的《VuePress 静态网站生成》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Open Scene Graph3.0三维视景仿真技术开发详解

Open Scene Graph3.0三维视景仿真技术开发详解

国防工业出版社 / 2012-7-1 / 46.00元

OpenSceneGraph 3.0三维视景仿真技术开发详解,ISBN:9787118081411,作者:杨化斌 著 杨化斌 编一起来看看 《Open Scene Graph3.0三维视景仿真技术开发详解》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器