关于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",你可以提供targetrel,它们将被作为特性被增加到<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-cnen-us两个文件夹,然后将对应语言的文件放到对应的文件夹里面。

配置导航栏,如果导航栏是一个Item项,它会呈现下拉样式,比如我们多语言就可以做成如下:

nav:
[
{ text: '首页', link: '/' },
{
text: '语言',
ariaLabel: 'Language Menu',
items: [
{ text: '中文', link: '/zh-cn/' },
{ text: 'English', link: '/en-us/' }
]
},
]

参考资料

关于开箱即用的文档静态网站生成器VuePress的更多相关文章

  1. hugo-最好用的静态网站生成器

    hugo最好用的静态网站生成器 Hugo是由Go语言实现的静态网站生成器.简单.易用.高效.易扩展.快速部署. 快速开始 安装Hugo 1. 二进制安装(推荐:简单.快速) 到 Hugo Releas ...

  2. jekyll 将纯文本转化为静态网站和博客 静态网站生成器

    jekyll 将纯文本转化为静态网站和博客 静态网站生成器 这个貌似对windows 支持不是很好~ 但是有支持,官方说不建议使用

  3. DEDE SQL标签可以获取文档静态链接地址

    在DedeCMS的系统里面,我可以通过由使用SQL语句来配合织梦标签进行更多的个性化调用.比如:推荐会员.推荐企业等.但是我们发现文档链接的底层模板地址的是动态的,那么我们要如何来进行转换,让他链接到 ...

  4. 国内android帮助文档镜像网站---http://wear.techbrood.com/develop/index.html

    http://wear.techbrood.com/develop/index.html

  5. 国内强大的API接口文档写作网站showdoc

    传送门:https://www.showdoc.cc/ 思思今天使用了一下,真是非常方便,瞬间爱上呀,哈哈. 赶紧去试试吧...

  6. python文档生成工具:pydoc、sphinx;django如何使用sphinx?

    文档生成工具: 自带的pydoc,比较差 建议使用sphinx 安装: pip install sphinx 安装主题: 由各种主题,我选择常用的sphinx_rtd_theme pip instal ...

  7. SpringBoot2中,怎么生成静态文档

    SpringBoot2中,怎么生成静态文档 在实际开发过程中,我们通过swagger就可以生成我们的接口文档,这个文档就可以提供给前端人员开发使用的.但是,有时候,我们需要把我们的接口文档,提供给第三 ...

  8. 一文搭建自己博客/文档系统:搭建,自动编译和部署,域名,HTTPS,备案等

    本文纯原创,搭建后的博客/文档网站可以参考: Java 全栈知识体系.如需转载请说明原处. 第一部分 - 博客/文档系统的搭建 搭建博客有很多选择,平台性的比如: 知名的CSDN, 博客园, 知乎,简 ...

  9. 使用sphinx制作接口文档并托管到readthedocs

    此sphinx可不是彼sphinx,此篇是指生成文档的工具,是python下最流行的文档生成工具,python官方文档即是它生成,官方网站是http://www.sphinx-doc.org,这里是一 ...

随机推荐

  1. XAML常用控件2

    这节继续讲一些xaml中的常用控件. 布局控件 除了我们之前讲过的Grid,StackPanel,Border布局控件,xaml中还有如下几个布局控件: Canvas:使用这个布局,可以通过坐标来控制 ...

  2. 解密华为云FusionInsight MRS新特性:一架构三湖

    摘要:华为云安全网关产品总监郭冕在"华为云TechWave云原生2.0专题日"上发表<华为云FusionInsight MRS,一个架构实现三种数据湖>的主题演讲,分享 ...

  3. 还可以使用 -c 参数来显示全部内容,并标出不同之处 diff -c test2.txt test1.txt

    二.实例 在test目录下存放了两个文本文件,test1.txt  test2.txt . 比较这两个文件的异同. diff  test1.txt   test2.txt     "5c5& ...

  4. ARP欺骗-断网小技巧

    警告:请勿用于非法用途,后果自负! 环境: 攻击方: Kali Linux 被攻击方: Windows XP 二者在同一局域网下 步骤 1.查看Windows的IP,联网状态 在Windows的cmd ...

  5. Linux_配置辅助DNS服务(基础)

    [RHEL8]-DNSserver1:[RHEL7]-DNSserver2:[Centos7]-DNSclient !!!测试环境我们首关闭防火墙和selinux(DNSserver1.DNSserv ...

  6. Linux中的防火墙

    firewalld 一.防火墙安全概述 firewalld支持命令行也支持GUI设置,相对于iptables,firewalld配置更加的方便.在底层的命令都是iptables, firewalld ...

  7. Ubuntu 软件更新 系统升级

    注意:操作前请先切换root权限 sudo su 1.软件更新 更新源 apt-get update 更新软件 apt-get upgrade 2.系统升级 安装系统更新 apt-get dist-u ...

  8. 050.Python前端jQuery

    一 jQuery是什么? jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后又一个优秀的Ja ...

  9. Linux服务之Samba服务篇

    Samba服务 桑巴Smb是基于cs架构 作用:用于跨平台进行文件共享 优点:兼容性好,较为安全(具备身份验证) 缺点:仅限内网环境使用 应用:一般在办公环境下使用 rz 也是一种可以在Windows ...

  10. MyBatis 全局配置文件详解(七)

    MyBatis 配置文件作用 MyBatis配置文件包含影响 MyBatis 框架正常使用的功能设置和属性信息.它的作用好比手机里的设置图标,点击这个图标就可以帮助我们查看手机的属性信息和设置功能.其 ...