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 문서가 실제로 열린 것을 발견했습니다: 🎜🎜🎜🎜다음 작업은 데이터를 교체하는 작업인데 먼저 문서 디렉토리 구조🎜: 🎜rrreee🎜문서는 두 부분으로 나누어져 있으며 중국어 문서는 /zh/ 디렉터리에 있고 영어 문서는 루트 디렉터리에 있습니다. 🎜🎜사실 디렉토리에 있는 내용은 상당히 이해하기 쉽습니다. 우선, default-theme-config, config 세 디렉토리가 Vuepress 문서의 주요 내용입니다. 이 세 개의 디렉토리만 교체되었음을 확인하세요. 🎜🎜🎜🎜홈페이지 구성🎜🎜🎜🎜기본 테마를 사용하려면 루트 디렉터리 README.md의 YAML 앞부분에 home: true를 지정하고 다른 메타데이터를 추가해야 합니다. 🎜🎜먼저 루트 디렉터리에 있는 README를 살펴보겠습니다. md: 🎜rrreee🎜정말 이해가 안 되네요. 공식 웹사이트에 저보다 더 자세한 구성 지침이 나와 있습니다. 🎜🎜🎜🎜Navigation 구성🎜🎜🎜🎜탐색 구성 파일은 .vuepress/config.js에 있습니다.🎜🎜탐색 구성 파일에서 nav는 탐색 표시줄 링크를 자신의 블로그 디렉토리로 변경할 수 있습니다. 🎜rrreee🎜나머지 기본 테마 구성 공식 문서에는 문서 설명🎜이 매우 자세하게 설명되어 있습니다. 여기. 🎜🎜🎜🎜기본 테마 색상 변경🎜🎜🎜🎜override.styl 파일을 .vuepress/ 디렉터리에 만들 수 있습니다. 🎜🎜vuepress는 네 가지 변경 가능한 색상을 제공합니다: 🎜rrreee🎜저는 이것을 다음으로 변경했습니다: 🎜🎜🎜🎜🎜🎜사이드바 구현🎜🎜🎜🎜댓글로 문의주시는 분들이 많아서 여기에 업데이트하겠습니다. 사실 여기에 아무리 자세히 적어도 더 좋습니다. 모두가 공식 문서를 읽도록 하세요. 🎜🎜사이드바의 구성은 .vuepress/config.js에도 있습니다: 🎜rrreee🎜해당 문서 구조: 🎜rrreee🎜내 블로그: brownhu🎜🎜🎜🎜Deployment🎜🎜🎜🎜블로그를 구성한 후 명령줄 실행: 🎜 🎜Vuepress 빌드🎜

이 줄은 성공을 의미합니다.

성공! vuepress에서 정적 파일을 생성했습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트에서!

추천 도서:

모바일 WeChat 공개 계정 만들기(코드 포함)

길이와 크기 사용 비교()

위 내용은 VuePress로 개인 웹페이지 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!