浅玩一下vuepress

上个学期的专业前沿课要求做的网站,由于正好卡在期末,所以完全没时间搞,浅试了一下vuepress。确实是相当方便,特别是只需要文档的网页,上手特别容易,基本只要照着文档中的内容改配置文件即可。但是缺点就是可以自定义的地方比较少,样式也很烂大街。

不过对于我这种随便敷衍一下作业的也够了

网站部署到了GitHub Page上,放个链接 可以点这个

顺便随便记录一点配置结构,方便下次要用的时候直接来这边看。

./docs/README.md

1
2
3
4
5
6
7
8
9
10
11
12
```yaml
home: true
heroImage: /TeslaBanner.jpeg
heroText: 自动驾驶
tagline: 专业前沿10组
actionText: 开始正文 →
actionLink: /article/
features:
- title: 自动驾驶原理 details: 挑选数篇论文解释当前自动驾驶技术原理以及技术路线
- title: 自动驾驶技术成功案例 details: 从目前市场存在的自动驾驶案例分析该技术未来的发展
- title: 自动驾驶存在问题 details: 安全性?可靠性?社会层面的问题?
footer: MIT Licensed | Copyright © 2022-专业前沿10组 | 关注永雏塔菲谢谢喵
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
./docs/.vuepress/config.js

```js
module.exports = {
// 网站的一些基本配置
// base:配置部署站点的基础路径,后续再介绍
base: '/vuepress-test/',
// base: '.',
title: '专业前沿10组 专题网站', // 网站的标题
description: '自动驾驶', // 网站的描述,它将会以 <meta> 标签渲染到当前页面的 HTML 中。
head: [
['link', { rel: 'icon', href: '/ElonMusk.jpg' }], // 需要被注入到当前页面的 HTML <head> 中的标签
],
themeConfig: {
sidebar: 'auto',
// displayAllHeaders: true,
logo: '/ding.png',
nav: [
{ text: '首页', link: '/' },
// 可指定链接跳转模式:默认target: '_blank'新窗口打开,_self当前窗口打开
{ text: '正文', link: '/article/' },
// { text: '后端', link: '/blog/back/' },
// { text: '前端', link: '/blog/front/' },
{ text: 'Tesla', link: 'https://www.tesla.com/', target: '_blank' },
{
text: '速通理塘',
link: 'https://www.bilibili.com/video/BV1df4y1M7uL',
target: '_blank',
},
// {
// text: '豆瓣',
// link: 'https://movie.douban.com',
// target: '_self',
// rel: '',
// },
// 支持嵌套,形成下拉式的导航菜单
// {
// text: '语言',
// ariaLabel: 'Language Menu',
// items: [
// { text: '中文', link: '/language/chinese/' },
// { text: '英文', link: '/language/english/' },
// ],
// },
],
},
};

最后再放一个部署用的脚本deploy.sh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
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:<USERNAME>/<REPO>.git master:gh-pages

git push -f git@github.com:yydrowz3/vuepress-test.git main:gh-pages

cd -
作者

Jhuoer Yen

发布于

2022-07-26

更新于

2023-09-18

许可协议

评论

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×