DDR爱好者之家 Design By 杰米
使用技术:
VuePress - Vue 驱动的静态网站生成器
仓库地址:https://github.com/yinian-R/vuepress-demo
全局安装
## 安装 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' } ] } };
首页
需要在dosc/README.md指定 home: true
--- home: true heroImage: /image/favicon.ico heroText: Hero 标题 tagline: Hero 副标题 actionText: 快速上手 → actionLink: /guide/ features: - title: 简洁至上 details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。 - title: Vue驱动 details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。 - title: 高性能 details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。 footer: MIT Licensed | Copyright © 2018-present Evan You ---
侧边栏
想要使 侧边栏(Sidebar)生效,需要配置 themeConfig.sidebar,基本的配置,需要一个包含了多个链接的数组:
module.exports = { themeConfig: { sidebar: [ '/', ['/hello', 'hello page'] ] } };
部署
设置部署站点的基础路径。
module.exports = { base: '/vuepress-demo/', };
在你的项目中,创建一个如下的 deploy.sh 文件
#!/usr/bin/env bash # 确保脚本抛出遇到的错误 set -e # 生成静态文件 npm run docs:build # 进入生成的文件夹 cd docs/.vuepress/dist # 如果是发布到自定义域名 # echo 'www.example.com' > CNAME git init git add -A git commit -m 'deploy' # 如果发布到 https://<USERNAME>.github.io # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master # 如果发布到 https://<USERNAME>.github.io/<REPO> git push -f git@github.com:yinian-R/vuepress-demo.git master:gh-pages cd -
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]