内容简介:使用技术:仓库地址:如果你想在一个现有项目中使用 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 静态网站生成》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 使用Compodoc生成angular项目静态文档
- Jekyll 4.1.1 发布,静态网页生成框架
- 利用Django徒手写个静态页面生成工具
- Jekyll 3.6.1 发布,静态站点生成器
- Jekyll 3.7.0 发布,静态站点生成器
- Jekyll 3.7.3 发布,静态站点生成器
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Open Scene Graph3.0三维视景仿真技术开发详解
国防工业出版社 / 2012-7-1 / 46.00元
OpenSceneGraph 3.0三维视景仿真技术开发详解,ISBN:9787118081411,作者:杨化斌 著 杨化斌 编一起来看看 《Open Scene Graph3.0三维视景仿真技术开发详解》 这本书的介绍吧!