предисловие
Недавно завершен перевод Hanbook, последнего официального документа TypeScript, в общей сложности 14 статей, который можно считать одним из лучших вводных руководств по TypeScript4 в Китае..Чтобы облегчить всем чтение, я использовал VuePress + Github Pages для создания блога, и эффект блога выглядит следующим образом:
Адрес блога следующий:
- Github В настоящее время существует Breeze.GitHub.IO/learn-types…
- Gitee В настоящее время существует breeze.git ee.IO/learn-types…
- персональный серверts.yayujs.com
0. VuePress
Излишне говорить, что VuePress — это генератор статических веб-сайтов на основе Vue с простым стилем и относительно простой конфигурацией. Почему бы не использоватьVitePress, поскольку вы хотите использовать существующую тему, а VitePress не совместим с текущей экосистемой VuePress, почему бы не выбратьVuePress@next, учитывая, что он все еще находится на стадии бета-тестирования, подождите, пока он не станет стабильным, прежде чем начинать миграцию.
1. Локальная сборка
быстрый стартТо же, что и официальный сайт VuePress:
- Создайте и войдите в новый каталог
// 文件名自定义
mkdir vuepress-starter && cd vuepress-starter
- Инициализируйте с помощью вашего любимого менеджера пакетов
yarn init # npm init
- Установите VuePress как локальную зависимость
yarn add -D vuepress # npm install -D vuepress
- Создайте свой первый документ, VuePress будет использовать docs в качестве корневого каталога документа, поэтому этот README.md эквивалентен домашней странице:
mkdir docs && echo '# Hello VuePress' > docs/README.md
- добавить несколько скриптов в package.json
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
- Запустите сервер локально
yarn docs:dev # npm run docs:dev
VuePress будет вhttp://localhost:8080(открывается в новом окне) Запускает сервер разработки с горячей перезагрузкой.
2. Базовая конфигурация
Создайте файл в каталоге документов.vuepressкаталог, где будут размещены все файлы, связанные с VuePress. На этом этапе структура вашего проекта может выглядеть так:
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
└─ package.json
существует.vuepressдобавить в папкуconfig.js, настройте заголовок и описание веб-сайта для удобного SEO:
module.exports = {
title: 'TypeScript4 文档',
description: 'TypeScript4 最新官方文档翻译'
}
На данный момент интерфейс похож на:
3. Добавьте панель навигации
Теперь добавим панель навигации в верхний правый угол шапки страницы, изменимconfig.js:
module.exports = {
title: '...',
description: '...',
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{
text: '冴羽的 JavaScript 博客',
items: [
{ text: 'Github', link: 'https://github.com/mqyqingfeng' },
{ text: '掘金', link: 'https://juejin.cn/user/712139234359182/posts' }
]
}
]
}
}
Эффект следующий:
Дополнительные ссылки по конфигурацииПанель навигации VuePress.
4. Добавьте боковую панель
Теперь мы добавляем несколько документов md, текущий каталог документов выглядит следующим образом:
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
| └─ handbook
| └─ ConditionalTypes.md
| └─ Generics.md
└─ package.json
мы вconfig.jsКонфигурация выглядит следующим образом:
module.exports = {
themeConfig: {
nav: [...],
sidebar: [
{
title: '欢迎学习',
path: '/',
collapsable: false, // 不折叠
children: [
{ title: "学前必读", path: "/" }
]
},
{
title: "基础学习",
path: '/handbook/ConditionalTypes',
collapsable: false, // 不折叠
children: [
{ title: "条件类型", path: "/handbook/ConditionalTypes" },
{ title: "泛型", path: "/handbook/Generics" }
],
}
]
}
}
Соответствующие эффекты следующие:
5. Измените тему
Теперь основные функции каталога и навигации реализованы, но если я также хочу загрузить загрузку, переключение анимации, переключение режима (темный режим), возврат наверх, комментирование и другие функции, то для упрощения стоимости разработки мы можем непосредственно используйте тему, здесь используйте темуvuepress-theme-rec:
Теперь устанавливаем vuepress-theme-reco:
npm install vuepress-theme-reco --save-dev
# or
yarn add vuepress-theme-reco
затем вconfig.jsЦитирую эту тему:
module.exports = {
// ...
theme: 'reco'
// ...
}
Обновите страницу, мы найдем некоторые изменения в деталях, таких как анимация загрузки при загрузке и поддержка переключения темного режима:
6. Добавить статью
Но мы также обнаружим, что, как и в этой статье об условных типах,条件类型（Conditional Types）Он появляется дважды, потому что эта тема автоматически извлекает первый большой заголовок в качестве заголовка этой статьи.Мы можем добавить некоторую информацию в файл md каждой статьи для изменения:
---
title: 条件类型
author: 冴羽
date: '2021-12-12'
---
На данный момент эффект статьи таков:
Но если вы не хотите информацию о названии, авторе, времени, мы можем скрыть это в стиле, который будет рассмотрен позже.
7. Установите язык
Обратите внимание, что время статьи на картинке выше мы пишем в формате2021-12-12, но показывает12/12/2021, это потому, что язык VuePress по умолчаниюen-US, изменим config.js:
module.exports = {
// ...
locales: {
'/': {
lang: 'zh-CN'
}
},
// ...
}
Можно обнаружить, что время отображается по-другому:
8. Откройте структуру каталогов
В исходной теме мы обнаружили, что структура каталогов каждой статьи отображается слева:
И vuepress-theme-reco удаляет многоуровневый заголовок в исходной боковой панели, создает вспомогательную боковую панель и помещает ее в правую часть страницы.Если вы хотите включить его глобально, вы можете настроить его, чтобы включить его в страница config.js:
module.exports = {
//...
themeConfig: {
subSidebar: 'auto'
}
//...
}
На данный момент эффект следующий:
9. Изменить цвет темы
VuePress основан на Vue, поэтому цвет темы — зеленый Vue, но официальный цвет TypeScript — синий, так как же изменить цвет темы VuePress?
вы можете создать.vuepress/styles/palette.stylфайл, код файла выглядит следующим образом:
$accentColor = #3178c6
На этом этапе вы можете обнаружить, что цвет темы изменился:
Для получения дополнительной информации о модификации цвета обратитесь к VuePress.palette.styl.
10. Настройте стиль модификации
Что делать, если вы хотите настроить стиль некоторых элементов DOM? Например, в темном режиме:
Мы обнаружили, что цвет текста, используемого для выделения, относительно тусклый и нечеткий в темном режиме. Я хочу изменить цвет и цвет фона этого текста?
А VuePress предоставляет простой способ добавления дополнительных стилей. вы можете создать.vuepress/styles/index.stylдокумент. Это файл Stylus, но вы также можете использовать обычный синтаксис CSS.
Мы создаем этот каталог в папке .vupress, а затем создаем файл index.styl со следующим кодом:
// 通过检查，查看元素样式声明
.dark .content__default code {
background-color: rgba(58,58,92,0.7);
color: #fff;
}
В этом месте текст становится более ясным:
Что касается сокрытия названия, автора и времени каждой статьи, о которой мы упоминали ранее, на самом деле аналогично:
.page .page-title {
display: none;
}
Окончательный эффект выглядит следующим образом:
11. Развертывание
Даже если наш блог будет официально готов, мы разместим его на бесплатных страницах Github. Создаем новый репозиторий на Github, здесь я получаю имя репозитория:learn-typescript.
Соответственно, нам нужноconfig.jsдобавить одинbaseКонфигурация пути:
module.exports = {
// 路径名为 "/<REPO>/"
base: '/learn-typescript/',
//...
}
окончательныйconfig.jsСодержимое файла:
module.exports = {
title: 'TypeScript4 文档',
description: 'TypeScript4 最新官方文档翻译',
base: '/learn-typescript/',
theme: 'reco',
locales: {
'/': {
lang: 'zh-CN'
}
},
themeConfig: {
// lastUpdated: '上次更新',
subSidebar: 'auto',
nav: [
{ text: '首页', link: '/' },
{
text: '冴羽的 JavaScript 博客',
items: [
{ text: 'Github', link: 'https://github.com/mqyqingfeng' },
{ text: '掘金', link: 'https://juejin.cn/user/712139234359182/posts' }
]
}
],
sidebar: [
{
title: '欢迎学习',
path: '/',
collapsable: false,
children: [
{ title: "学前必读", path: "/" }
]
},
{
title: "基础学习",
path: '/handbook/ConditionalTypes',
collapsable: false,
children: [
{ title: "条件类型", path: "/handbook/ConditionalTypes" },
{ title: "泛型", path: "/handbook/Generics" }
],
}
]
}
}
Тогда мы в проектеvuepress-starterСоздайте файл сценария в каталоге:deploy.sh, обратите внимание на изменение соответствующего имени пользователя и имени склада:
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:mqyqingfeng/learn-typescript.git master:gh-pages
cd -
Затем командная строка переключается наvuepress-starterкаталог, выполнитьsh deploy.sh, он начнет сборку, а затем отправит его на удаленный склад, обратите внимание, что он отправлен здесьgh-pagesФилиал, давайте проверим код, соответствующий филиалу склада:
мы можем иметь его на складеSettings -> PagesСмотрите последний адрес в:
Как и мой последний сгенерированный адресВ настоящее время существует Breeze.GitHub.IO/learn-types…
На данный момент мы завершили развертывание VuePress и Github Pages.
серия статей
Адрес каталога статей серии:GitHub.com/ в настоящее время имеет бриз…
WeChat: «mqyqingfeng», добавьте меня в единственную читательскую аудиторию Xianyu.
Если есть какие-либо ошибки или неточности, пожалуйста, поправьте меня, большое спасибо. Если вам это нравится или у вас есть вдохновение, вы можете стать звездой, что также является поощрением для автора.