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

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 문서가 실제로 열린 것을 발견했습니다:

다음 작업은 데이터를 바꾸는 작업이지만 먼저

문서의 디렉토리 구조

를 살펴보아야 합니다.

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

문서는 두 부분으로 나누어져 있는데, 중국어 문서는 /zh/ 디렉터리에 있고, 영어 문서는 루트 디렉터리에 있습니다.

사실 디렉토리에 있는 내용은 상당히 이해하기 쉽습니다. 우선, default-theme-config, config 세 디렉토리가 Vuepress 문서의 주요 내용입니다. 이 세 개의 디렉토리만 교체되었음을 확인하세요.

홈페이지 구성

기본 테마를 사용하려면 루트 디렉터리 README.md의 YAML 앞부분에 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 // 页尾

정말 이해가 안 되네요. 공식 웹사이트에 저보다 더 자세한 구성 지침이 나와 있습니다.

Navigation 구성

탐색 구성 파일은 .vuepress/config.js에 있습니다.

탐색 구성 파일에서 nav는 탐색 표시줄 링크를 자신의 블로그 디렉토리로 변경할 수 있습니다.

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

남은 기본 테마 구성 공식 문서에는 매우 상세한

문서 지침이 포함되어 있습니다. 여기서는 자세히 설명하지 않겠습니다.

기본 테마 색상 변경

override.styl 파일을 .vuepress/ 디렉터리에 만들 수 있습니다.

vuepress는 변경 가능한 4가지 색상을 제공합니다:

$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

Deployment

🎜🎜블로그를 구성한 후 명령줄 실행: 🎜

Vuepress build

다음 줄이 표시되면 성공을 의미합니다.

성공! vuepress에 정적 파일이 생성되었습니다.

패키지된 vuepress 디렉터리를 github 저장소에 업로드하고 github 페이지와 협력하여 블로그 사이트를 구성하세요.

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

추천 도서:

vue 모바일에서 WeChat 공개 계정을 구현하는 단계에 대한 자세한 설명

jQuery 제목 텍스트를 클릭하여 글꼴을 전환 구현 자세한 설명

위 내용은 VuePress를 사용하여 개인 블로그를 구축하는 단계에 대한 자세한 설명(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!