Create by jsliang on 2018-10-20 10:34:39
Recently revised in 2018-10-24 13:54:52
Привет друзья, если вы считаете, что эта статья неплохая, не забудьте датьstar, ВашstarЭто моя мотивация учиться!Адрес GitHub
【2019-08-16】Привет друзья, потому чтоjsliangБиблиотека документации подверглась рефакторингу, некоторые ссылки на эту статью могут быть битыми, иjsliangУ меня нет сил поддерживать старые статьи на стороне Nuggets, извините за это. Для тех, кому нужно получать последние статьи, щелкните адрес GitHub выше и перейдите в библиотеку документов, чтобы просмотреть скорректированные статьи.
В этой статье рассказывается, как использовать платформу GitHub для создания собственного блога/библиотеки документов.
Если ваша цель просто понять, как настроить. Тогда вы должны читать第三章 基础配置После этого вы можете написать свой собственный блог / библиотеку документов.Если вы столкнетесь с проблемами, которые вы не понимаете, вы можете самостоятельно прочитать документацию VuePress, чтобы решить проблемы, которые вам нужно решить.
Если ваша цель — найти определенный компонент: например, панель навигации, например, конфигурацию боковой панели. Затем вы можете напрямую выполнить поиск в оглавлении и перейти к соответствующей главе для чтения.
Справочная документация:
-
Справочный адрес:GitHub Pages
-
Справочный адрес:Китайская сеть VuePress
Текущий эффект:
каталог
2 Предисловие
Общий веб-сайт состоит из трех частей: доменное имя, среда развертывания сервера и код развертывания.
- Страницы GitHub, обслуживаемые веб-сайтом GitHub, предоставляют многим пользователям GitHub хорошую среду развертывания сервера и хороший инструмент для доменных имен.【Официальный сайт Github Pages】
- VuePress — это простой инструмент для создания статических веб-сайтов с системой тем на основе Vue... Это инструмент, созданный великим богом Ю Юйси.Первоначальная цель — помочь ему использовать синтаксис Markdown для написания документов, а затем генерировать HTML код, разверните на сервере. Под модификацией многих пользователей сети его можно использовать для написания статических веб-сайтов, то есть его можно использовать для публикации написанных нами сообщений в блогах.【Официальный сайт VuePress】
Сказав это, мои друзья, наверное, поняли, о чём мы будем говорить~
Однако, если это просто документ о том, как начать работу с GitHub Pages и VuePress, я бы счел его бессмысленным. так,jsliangЯ надеюсь, что эта статья может интегрировать информацию GitHub Pages и VuePress в Интернете и стать немного богаче их, присоединяйтесьjsliangИспользуя полученный опыт, вы сможете быстро создать свою личную библиотеку документов/блог без необходимости читать много статей после ее прочтения. Таким образом, я буду удовлетворен. так как……
Какая разница между передком без заброса и соленой рыбой!
Технические моменты, затронутые в этой статье:
- GitHub
- Git
- Markdown
Если вы не очень хорошо знакомы с описанными выше техниками,jsliangРекомендуется зайти на Baidu, чтобы загрузить информацию, сначала изучить эти технологии, а затем вернуться, чтобы продолжить обучение. Где GitHub и статьи GitjsliangС этим не разобрались, и друзья могут зайти только на Baidu за информацией.Здесь я привожу статью в Markdown, написанную мной:адрес.
Если вы знакомы с вышеперечисленными приемами и понимаете их, то давайте продолжим счастливо подбрасывать!
Три базовые конфигурации
3.1 Создание страниц GitHub
- Создайте новый репозиторий (Новый репозиторий), введите имя репозитория (Имя репозитория)
用户名.github.io, например мой:LiangJunrong.github.io, затем нажмите «Создать репозиторий», чтобы создать развернутую среду.
- Склонируйте проект на компьютер и добавьте
README.mdиindex.html:
README.md
Hello Github Pages
===
 这是我的 GitHub Pages 初始目录
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Github Pages</title>
<style>
.container {
margin-top: 300px;
text-align: center;
}
</style>
</head>
<body>
<h1 class="container">Hello Github Pages</h1>
</body>
</html>
- Загрузить на GitHub:
git add .
git commit -m "Github Pages"
git push
- Открытым
用户名.github.io:
Как и выше, построение GitHub Pages завершено, и теперь у нас есть платформа для бесплатного развертывания статических страниц. Итак, ниже мы объясним, как вести блог с помощью Markdown + VuePress.
3.2 Создание VuePress
- Установить ВьюПресс
В каталоге, где вам нужно его сохранить, установите VuePress через командную строку терминала:npm i vuepress -D
- Создать каталог и развернуть код
редактироватьpackage.json:
package.json
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
},
"devDependencies": {
"vuepress": "^0.14.4"
}
}
Примечание:
-
npm run devдля запуска режима редактирования в реальном времени -
npm run buildКод можно сжать и запаковать, а упакованная папка находится в.vuepress/distначальство.
Затем создайте папку docs и создайте файл README.md в папке docs.
README.md
Hello VuePress
===
Наконец выполните команду в терминалеnpm run dev, и открытьhttp://localhost:8080, интерфейс начальной настройки выглядит следующим образом:
Стоит отметить. Здесь мы прошлиnpm run devПолучите мгновенный доступ к нашему модифицированному отображению страницы.
Тогда мы можем пройтиnpm run buildЧтобы упаковать наш код, вы можете найти его в.vuepressнашел один вdistпапка, а затемdistПапки в загрузке用户名.github.ioдля завершения развертывания VuePress.
3.2.1 Описание каталога
Ранее мы объяснили, как настроить VuePress и запустить Теперь давайте перейдем к каталогу основных компонентов и объясним:
- docs - VuePress 存放目录
- .vuepress - VuePress 配置目录
- public - 共用文件存储目录
- img - 共用图片目录
- banner.png - 图片-首页 banner
- logo.ico - 图片-网站右上角小图标
- config.js - VuePress 的 js 配置文件
- listOne - 侧边栏项目组1
- pageOne.md - 项目组1页面1
- README.md - 项目组1默认页面
- listTwo - 侧边栏项目组2
- pageThree.md - 项目组2页面3
- pageTwo.md - 项目组2页面2
- README.md - 项目组2默认页面
- README.md - 网站默认首页
+ node_modules - node 依赖包
- package.json - webpack 配置文件
в,.vuepressКаталог конфигурации, в котором хранится VuePress,publicобщие файлы хранятся вconfig.jsфайл конфигурации для VuePress,listOne,listTwoэто группа боковой панели, которая классифицирует страницы.
3.2.2 Панель навигации
Здесь мы начинаем настраивать верхнюю панель навигации.
Сначала заполнимconfig.jsКод конфигурации в:
config.js
module.exports = {
// 左上角标题
title: 'jsliang 的文档库',
// 描述
description: '前端工程师 jsliang 的文档库',
// 头部部署，右上角小图标
head: [
// ico 配置
['link', {
rel: 'icon',
href: '/img/logo.ico'
}]
],
// 主题部署
themeConfig: {
/**
* 右侧导航条
* text - 显示字段
* link - 链接：注意前后带 / 符号
*/
nav: [
{
text: '主页',
link: '/'
},
/**
* 多级菜单
* 开头 text 为一级标题
* 数组内 text 为二级标题
* link 为链接，注意带 /
*/
{
text: '博文',
items: [
{
text: '微信小程序 bug 集中营',
link: 'https://github.com/LiangJunrong/document-library/blob/master/other-library/WeChatApplet/WeChatAppletBug.md'
},
{
text: '使用 GitHub Pages 和 VuePress 搭建网站',
link: 'https://github.com/LiangJunrong/document-library/blob/master/other-library/GithubPages/GithubPages.md'
}
]
},
{
text: '关于',
link: '/about/'
},
// 链接到网站
{
text: 'Github',
link: 'https://www.github.com/LiangJunrong'
},
]
}
}
Затем начнитеnpm run dev,Открытымhttp://localhost:8080, вы можете видеть, что панель навигации развернута.
3.2.3 Боковая панель
Есть три способа настроить боковую панель в VuePress: простая конфигурация, групповая конфигурация, настройка пейджинга, заинтересованные друзья могут перейти к:адресПосмотрите прямо, здесь мы просто говорим о конфигурации подкачки, которую мы используем для развертывания нашей библиотеки документов.
Каталог выглядит следующим образом:
Затем изменяемconfig.js:
config.js
module.exports = {
title: 'jsliang 的文档库',
description: '前端工程师 jsliang 的文档库',
head: [
// ...省略，配置代码同 3.2.2
],
themeConfig: {
nav: [
// ...省略，配置代码同 3.2.2
],
/**
* 侧边栏配置：侧边栏组
*/
sidebar: {
// 侧边栏在 /index/ 目录上
'/index/': [
['', 'README'],
['indexTwo', '导航第二页']
],
// 侧边栏在 /about/ 目录上
'/about/': [
['', 'README'],
['GithubPages', 'GithubPages'],
['VuePress', 'VuePress']
]
}
}
}
Наконец, мы бежимnpm run dev,Проверятьhttp://localhost:8080Это выглядит так:
Видно, что мы успешно настроили боковую панель в виде пагинации.
3.2.4 Домашняя страница по умолчанию
VuePress установил для нас домашнюю страницу по умолчанию, давайте воспользуемся ею и посмотрим, как она выглядит!
Сначала находим изображение banner.png и помещаем его вpublic/img/banner.pngначальство.
Затем изменяемdocs/README.mdдокумент:
docs/README.md
---
home: true
heroImage: ./img/banner.png
actionText: 皮皮虾 我们走 →
actionLink: /index/
features:
- title: 装逼
details: 在这里，你可以看到 jsliang 在这里无限装逼，所以你可以尽情打脸。就算你懂，没关系，打了脸再说~
- title: 搞笑
details: 在这里，你可以获得各种学习欢乐，轻松进击前端编程。点滴进步，成就不一样的你。
- title: 深沉
details: 在这里，你可以收获一个广州自身漂泊的人的情怀，感受在这个烦躁的社会 jsliang 如何安身立命。
footer: jsliang 的文档库 | Copyright © 2018 不折腾的前端，和咸鱼有什么区别
---
Хорошо, так как мы повторно изменили домашнюю страницу (т.е. docs/README.md), мы перезапустили,Ctrl+C -> y -> npm run dev, открыть сноваhttp://localhost:8080:
Идеально! Таким образом, мы завершили базовую настройку! ! !
Четыре продвинутых уровня VuePress
4.1 Изменить стиль
Постепенно улучшается.
Если вы найдете эту статью полезной, дайте мне ее в репозитории документации на GitHub.star, твойstarЭто движущая сила, которая заставляет меня метаться~【Адрес на гитхабе】
jsliangбиблиотека документацииЗависит отЛян ЦзюньронгиспользоватьCreative Commons Attribution-NonCommercial-ShareAlike 4.0 Международная лицензияЛицензия.
на основеGitHub.com/l ian Jun Ron…Создание работ выше.
Права на использование, отличные от разрешенных в настоящем Лицензионном соглашении, могут быть получены отCreative Commons.org/licenses/не…получено в.