VuePress로 개인 웹페이지 만들기-위챗 개발-php.cn

집

위챗 애플릿

위챗 개발

VuePress로 개인 웹페이지 만들기

php中世界最好的语言

Jun 04, 2018 pm 03:49 PM

vuepress웹페이지

이번에는 개인 웹페이지를 만들 수 있는 VuePress를 소개하겠습니다. VuePress에서 개인 웹페이지를 만들 때 주의사항은 무엇인가요?

VuePress

vuepress는 Youda가 4월 12일에 출시한 새로운 vue 기반 정적 웹사이트 생성기입니다. 실제로 웹팩이 내장된 vue 스파 애플리케이션입니다. 선적 서류 비치.

Vue SSR을 기반으로 한 정적 사이트 생성기 원래 목적은 즐겁게 문서를 작성하는 것이지만 블로그에도 매우 적합하다는 것을 알았습니다.

이것은 VuePress의 공식 문서입니다

만들기 시작하기

문서에 있는 예제를 따라가며 직접 플레이해볼 수도 있지만 VuePress 문서도 VuePress를 사용하여 구현되므로 트릭을 사용했습니다. 재미있게 VuePress 저장소에서 직접 다운로드했습니다.

1. 먼저 VuePress를 전역적으로 설치하세요

npm install -g vuepressnpm install -g vuepress

2.然后把VuePress仓库克隆到你的电脑

git clone git@github.com:docschina/vuepress.git

在docs文件中执行（请确保你的 Node.js 版本 >= 8）

cd vuepress
cd docs
vuepress dev

当你看到这一行就说明已经成功了：

 VuePress dev server listening at http://localhost:8080/

下面我们打开http://localhost:8080/

发现真的打开了vuepress文档：

下面的工作就是数据的替换了，但我们应该先看一下docs的目录结构：

├─.vuepress
│ ├─components
│ └─public
│ └─icons
│ └─config.js // 配置文件
├─config // Vuepress文档的配置参考内容
├─default-theme-config // Vuepress文档的默认主题配置内容
├─guide // Vuepress文档的指南内容
└─zh // 中文文档目录
 ├─config
 ├─default-theme-config
 └─guide
└─README.md // 首页配置文件

文档分成了两部分，中文文档在/zh/目录下，英文文档在根目录下。

其实目录里面的东西都挺好看懂的，首先guide 、default-theme-config、config 这三个目录中的都是Vuepress文档的主要内容，从中文文档里也可以看到只有这三个目录被替换了。

首页配置

默认主题提供了一个主页布局，要使用它，需要在你的根目录 README.md 的 YAML front matter 中指定 home：true，并加上一些其他的元数据。

我们先看看根目录下的README,md：

home: true // 是否使用Vuepress默认主题
heroImage: /hero.png // 首页的图片
actionText: Get Started → // 按钮的文字
actionLink: /guide/ // 按钮跳转的目录
features: // 首页三个特性
- title: Simplicity First
 details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
 details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
 details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2018-present Evan You // 页尾

实在看不懂，官网有比我更详细的配置说明。

导航配置

导航配置文件在.vuepress/config.js中

在导航配置文件中nav是控制导航栏链接的，你可以把它改成自己的博客目录。

nav: [
 {
 text: 'Guide',
 link: '/guide/',
 },
 {
 text: 'Config Reference',
 link: '/config/'
 },
 {
 text: 'Default Theme Config',
 link: '/default-theme-config/'
 }
]

剩下的默认主题配置官方文档都有很详细的文档说明这里就不在啰嗦了。

更改默认主题色

你可以在.vuepress/目录下创建一个override.styl文件。

vuepress提供四个可更改的颜色：

$accentColor = #3eaf7c // 主题色
$textColor = #2c3e50 // 文字颜色
$borderColor = #eaecef // 边框颜色
$codeBgColor = #282c34 // 代码背景颜色

我把它改成了这样：

侧边栏的实现

由于评论区里问的人较多，所以在这里更新一下，其实我就算在这里写的再详细也不如大家去看官方文档。

侧边栏的配置也在.vuepress/config.js中：

sidebar: [
 {
 title: 'JavaScript', // 侧边栏名称
 collapsable: true, // 可折叠
 children: [
 '/blog/JavaScript/学会了ES6，就不会写出那样的代码', // 你的md文件地址
 ]
 },
 {
 title: 'CSS', 
 collapsable: true,
 children: [
 '/blog/CSS/搞懂Z-index的所有细节',
 ]
 },
 {
 title: 'HTTP',
 collapsable: true,
 children: [
 '/blog/HTTP/认识HTTP-Cookie和Session篇',
 ]
 },
]

对应的文档结构：

├─blog // docs目录下新建一个博客目录
│ ├─CSS
│ ├─HTTP
│ └─JavaScript

我的博客：brownhu

部署

在配置好你博客之后，命令行执行：

Vuepress build

2. 그런 다음 VuePress 저장소를 컴퓨터에 복제하세요🎜🎜git clone git@github.com:docschina /vuepress .git🎜🎜docs 파일에서 실행합니다(Node.js 버전이 8보다 큰지 확인하세요)🎜rrreee🎜이 줄이 보이면 성공했다는 의미입니다.🎜rrreee🎜http 아래에서 열어 보겠습니다. ://localhost:8080/🎜🎜 vuepress 문서가 실제로 열린 것을 발견했습니다: 🎜🎜