关于开箱即用的文档静态网站生成器VuePress
关于VuePress
一个由Vue驱动的静态文档网站生成框架,具有开箱即用的优点。
给项目添加.gitignore
.gitignore
是git用来排除目录的清单,我们把以下目录加入其中,以便每次操作都把这些东西带上,搞得git项目乱七八糟的。
# 项目依赖包
node_modules
# Build之后的输出目录
.vuepress/dist
安装VuePress
全局安装VuePress
npm install -g vuepress
或者
yarn global add vuepress
在现有项目文件夹安装
npm install -D vuepress
或者
yarn add -D vuepress
给现有项目添加VuePress支持
在项目文件夹执行如下命令即可。
vuepress dev .
顺利的话,它就安装以来的Node包,然后启动一个8080的http监听。
打开网址(http://localhost:8080)[http://localhost:8080]
访问
如果提示你,没有权限执行ps命令,那就右键管理员打开PowerShell,然后执行以下命令解锁:
set-executionpolicy remotesigned
升级VuePress
npm i @vuepress/core
生产静态网站
vuepress build .
配置运行
根目录新建package.json
文件,内容
{
"scripts": {
"dev": "vuepress dev .",
"build": "vuepress build ."
}
}
这样就可以在终端界面运行:
开始写作
npm run dev
生成静态文件
npm run build
默认静态文件会生成在项目目录的.vuepress/dist
下
配置静态
看是否存在.vuepress/config.js
文件,没有的话就新建一个。
module.exports = {
title: `XXXXXXX- Home`,
description: `XXXXXXX`
}
静态资源
静态资源文件夹
关于静态资源应该放哪,有个默认可选路径.vuepress/public
,如果这个文件夹没有,你就自己新建一个,默认这个会打包到静态根目录。
我们在这个public
底下,再根据我们日常习惯,建立assets相关目录,示例如下:
而需要用的时候,这个静态文件的引用路径就是
/assets/img/xxxxx.ext
网站图标
将生成好的favicon.ico
放到.vuepress/public/assets/img/
中。
然后到.vuepress/config.js
文件中添加一项如下:
head: [
['link', { rel: 'shortcut icon', type: "image/x-icon", href: "/assets/img/favicon.ico" }]
]
只要路径对,重新发布后就可以看到网站图标了。
导航栏
导航栏默认是带搜索框的,然后如果想新增,就在.vuepress/config.js
文件中的themeConfig
节点底下新增nav
节点。
比如:
nav:
[
{ text: '首页', link: '/' },
{ text: '百度一下', link: 'https://www.baidu.com' },
]
外部链接<a>
标签的特性将默认包含target="_blank" rel="noopener noreferrer"
,你可以提供target
与rel
,它们将被作为特性被增加到<a>
标签上。
// .vuepress/config.js
module.exports = {
themeConfig: {
nav: [
{ text: 'External', link: 'https://google.com', target:'_self', rel:'' },
{ text: 'Guide', link: '/guide/', target:'_blank' }
]
}
}
侧边栏
自定义侧边栏
默认侧边栏是没有启用的,如果需要,在.vuepress/config.js
文件中的themeConfig
节点底下新增sidebar
节点。
比如:
sidebar:
[
['account/bizspark', 'BizSpark'],
['account/office', 'Office 365']
]
自动侧边栏
在.vuepress/config.js
文件中的themeConfig
节点底下新增sidebar
节点,设置成auto
模式即可。
sidebar: 'auto'
其他效果
开启滑动动画
// themeConfig
smoothScroll: true
添加上次更新时间
// themeConfig
lastUpdated: '上次更新',
全局显示代码行号
在.vuepress/config.js
文件中添加节点markdown
markdown:{
lineNumbers: true, // 显示代码行号
}
设置全局内容视图宽度
在.vuepress
路径新增styles
文件夹,并新建文件palette.styl
填充内容,其中contentWidth
的数值就是你要设置的默认最低内容视图宽度。
$contentWidth = 1000
多语言
在根目录新建文件夹zh-cn
和en-us
两个文件夹,然后将对应语言的文件放到对应的文件夹里面。
配置导航栏,如果导航栏是一个Item项,它会呈现下拉样式,比如我们多语言就可以做成如下:
nav:
[
{ text: '首页', link: '/' },
{
text: '语言',
ariaLabel: 'Language Menu',
items: [
{ text: '中文', link: '/zh-cn/' },
{ text: 'English', link: '/en-us/' }
]
},
]
参考资料
关于开箱即用的文档静态网站生成器VuePress的更多相关文章
- hugo-最好用的静态网站生成器
hugo最好用的静态网站生成器 Hugo是由Go语言实现的静态网站生成器.简单.易用.高效.易扩展.快速部署. 快速开始 安装Hugo 1. 二进制安装(推荐:简单.快速) 到 Hugo Releas ...
- jekyll 将纯文本转化为静态网站和博客 静态网站生成器
jekyll 将纯文本转化为静态网站和博客 静态网站生成器 这个貌似对windows 支持不是很好~ 但是有支持,官方说不建议使用
- DEDE SQL标签可以获取文档静态链接地址
在DedeCMS的系统里面,我可以通过由使用SQL语句来配合织梦标签进行更多的个性化调用.比如:推荐会员.推荐企业等.但是我们发现文档链接的底层模板地址的是动态的,那么我们要如何来进行转换,让他链接到 ...
- 国内android帮助文档镜像网站---http://wear.techbrood.com/develop/index.html
http://wear.techbrood.com/develop/index.html
- 国内强大的API接口文档写作网站showdoc
传送门:https://www.showdoc.cc/ 思思今天使用了一下,真是非常方便,瞬间爱上呀,哈哈. 赶紧去试试吧...
- python文档生成工具:pydoc、sphinx;django如何使用sphinx?
文档生成工具: 自带的pydoc,比较差 建议使用sphinx 安装: pip install sphinx 安装主题: 由各种主题,我选择常用的sphinx_rtd_theme pip instal ...
- SpringBoot2中,怎么生成静态文档
SpringBoot2中,怎么生成静态文档 在实际开发过程中,我们通过swagger就可以生成我们的接口文档,这个文档就可以提供给前端人员开发使用的.但是,有时候,我们需要把我们的接口文档,提供给第三 ...
- 一文搭建自己博客/文档系统:搭建,自动编译和部署,域名,HTTPS,备案等
本文纯原创,搭建后的博客/文档网站可以参考: Java 全栈知识体系.如需转载请说明原处. 第一部分 - 博客/文档系统的搭建 搭建博客有很多选择,平台性的比如: 知名的CSDN, 博客园, 知乎,简 ...
- 使用sphinx制作接口文档并托管到readthedocs
此sphinx可不是彼sphinx,此篇是指生成文档的工具,是python下最流行的文档生成工具,python官方文档即是它生成,官方网站是http://www.sphinx-doc.org,这里是一 ...
随机推荐
- redis分布式锁-可重入锁
redis分布式锁-可重入锁 上篇redis实现的分布式锁,有一个问题,它不可重入. 所谓不可重入锁,即若当前线程执行某个方法已经获取了该锁,那么在方法中尝试再次获取锁时,就会获取不到被阻塞. 同一个 ...
- Docker系列——Grafana+Prometheus+Node-exporter服务器监控平台(一)
在最近的博文中,都是介绍监控平台的搭建,其实并不难,主要是需要自己动手操作,实践一番就会了. 有天在想,云上的服务器,是不是也可以搭建一个监控平台,所以就捣鼓了一下,不过遗憾的是,使用阿里云开源的插件 ...
- 【转载】Linux查看PCIe版本及速率【方法】PCIE的X4X8X16 查看 数量 怎么看
Linux查看PCIe版本及速率 PCIE有四种不同的规格,通过下图来了解下PCIE的其中2种规格 查看主板上的PCI插槽 # dmidecode | grep --color "P ...
- make clean 清除之前编译的可执行文件及配置文件。 make distclean 清除所有生成的文件。
https://blog.csdn.net/bb807777/article/details/108302105 make clean 清除之前编译的可执行文件及配置文件.make distclean ...
- Linux 根目录所在分区被脏数据占满
背景: 公司在做一个项目,大概功能就是一个通行闸机的人脸识别系统,要经过门禁的人注册了之后,系统就会存储一张原始的图片在服务器的数据文件夹里面,包括了永久的存储和一些访客注册临时存储.一天周五的时 ...
- 搭建LNMP环境部署Wordpress博客
!!!首先要做的就是关闭系统的防火墙以及selinux: #systemctl stop firewalld #systemctl disable firewalld #sed -ri 's/^(SE ...
- Ubuntu 获取升级信息失败。可能网络有问题
升级Ubuntu系统时遇到的这个问题, 原因是默认的源不是国内的,而且还可能导致下载慢等问题. 1.备份源 cd /etc/apt/ sudo cp sources.list sources.list ...
- json字符串和字典的区别
json字符串和字典的区别: json: (JavaScript Object Notation)的首字母缩写,字面的意思是(javascript对象表示法),这里说的json指的是类似于javasc ...
- USB中TOKEN的CRC5与CRC16校验(神奇的工具生成Verilog实现)
USB2.0IP设计 最近,在学习USB2.0IP的设计,其中包含了CRC校验码的内容,之前学习千兆以太网曾经用到过CRC32校验(https://www.cnblogs.com/Xwangzi66/ ...
- 备份分区,备份文件切割保存 dd
cd /tmp wget dl.fedoraproject.org/pub/epel/6/x86_64/dcfldd-1.3.4.1-4.el6.x86_64.rpm sudo yum install ...