Un article pour vous apprendre rapidement à créer un blog avec VuePress + Github Pages (pratique)

Cet article partagera avec vous une implémentation pratique de VuePress. À travers cet article, je vais vous apprendre à créer rapidement un blog en utilisant VuePress + Github Pages. J'espère que cela sera utile à tout le monde.

Récemment terminé la traduction de Hanbook, le dernier document officiel de TypeScript. Il y a quatorze articles au total, qui peuvent être considérés comme l'un des meilleurs tutoriels d'introduction à TypeScript4 en Chine. Afin de faciliter la lecture pour tout le monde, j'ai créé un blog en utilisant VuePress + Github Pages L'effet de blog est le suivant :

0. VuePress

VuePress Inutile de dire que c'est un statique. générateur de site Web basé sur Vue, avec un style et une configuration simples. C'est également relativement simple. La raison pour laquelle je n'utilise pas VitePress est parce que je souhaite utiliser un thème existant et que VitePress n'est pas compatible avec l'écosystème VuePress actuel. Quant à la raison pour laquelle je ne choisis pas VuePress@next, étant donné que c'est le cas. encore en phase bêta, je commencerai à migrer une fois qu'il sera stable. [Recommandations associées : "Tutoriel vue.js"]

1. Construction locale

Démarrage rapideIdentique au site officiel de VuePress :

1. Créez et entrez un nouveau répertoire

// 文件名自定义
mkdir vuepress-starter && cd vuepress-starter

2. gestion Initialisez le serveur

yarn init # npm init

3. Installez VuePress en tant que dépendance locale

yarn add -D vuepress # npm install -D vuepress

4 Créez votre premier document VuePress utilisera docs comme répertoire racine du document, donc ce README.md est équivalent à la page d'accueil :

mkdir docs && echo '# Hello VuePress' > docs/README.md

5. . Ajoutez quelques scripts à package.json

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

6. Démarrez le serveur localement

yarn docs:dev # npm run docs:dev

VuePress démarrera un serveur de développement rechargé à chaud sur http://localhost:8080 (ouvre une nouvelle fenêtre).

2. Configuration de base

Créez un répertoire .vuepress dans le répertoire des documents, où seront placés tous les fichiers liés à VuePress. À ce stade, la structure de votre projet peut ressembler à ceci : .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 导航栏：

https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F

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. 更换主题

现在基本的目录和导航功能已经实现，但如果我还想要加载 loading、切换动画、模式切换（暗黑模式）、返回顶部、评论等功能呢，为了简化开发成本，我们可以直接使用主题，这里使用的主题是 vuepress-theme-rec（https://vuepress-theme-reco.recoluan.com/）：

现在我们安装 vuepress-theme-reco：

npm install vuepress-theme-reco --save-dev
# or
yarn add vuepress-theme-reco

然后在 config.js 里引用该主题：

module.exports = {
  // ...
  theme: 'reco'
  // ...
}

刷新一下页面，我们会发现一些细节的改变，比如加载时的 loading 动画、以及支持切换暗黑模式：

6. 添加文章信息

但我们也会发现，像条件类型这一篇文章，条件类型（Conditional Types）

---
title: 条件类型
author: 冴羽
date: '2021-12-12'
---

Ajoutez config.js sous le dossier .vuepress pour configurer le titre et la description du site Web afin de faciliter le référencement. :

module.exports = {
  // ...
  locales: {
    '/': {
      lang: 'zh-CN'
    }
  },
  // ...
}

L'interface actuelle est similaire à : 🎜🎜🎜

3. Ajouter une barre de navigation🎜🎜Nous ajoutons maintenant une barre de navigation en haut. coin droit en haut de la page, modifiez config.js:🎜

module.exports = {
  //...
  themeConfig: {
    subSidebar: 'auto'
  }
  //...
}

🎜L'effet est le suivant :🎜🎜🎜

🎜Pour plus de configuration, veuillez vous référer au Barre de navigation VuePress : 🎜🎜https://vuepress.vuejs.org/zh/theme /default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F🎜

4. Ajouter une barre latérale 🎜🎜Maintenant, nous ajoutons quelques documents md. Le répertoire de documents actuel est le suivant : 🎜

$accentColor = #3178c6

🎜 Nous le configurons dans config.js</. code> comme suit : 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 通过检查，查看元素样式声明 .dark .content__default code { background-color: rgba(58,58,92,0.7); color: #fff; }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>🎜L'effet correspondant est le suivant : 🎜🎜<img src="https: //p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b53be542e6134a0c8637034cf4048618~tplv-k3u1fbpfcp-water marque. awebp" alt="" chargement="lazy" class="medium-zoom-image"/>🎜< h2 data-id="heading-6">5. Changez le thème🎜🎜Maintenant, le répertoire de base et les fonctions de navigation ont été implémenté, mais si je veux aussi charger, changer d'animation, changer de mode (mode sombre), revenir en haut, commenter Comme pour les autres fonctions, afin de simplifier les coûts de développement, on peut utiliser directement le thème Le thème utilisé ici est. vuepress-theme-rec (https://vuepress-theme-reco.recoluan.com/) : 🎜🎜Maintenant, nous installons vuepress-theme -reco : 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">.page .page-title { display: none; }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>🎜Puis référencez le thème dans <code>config.js</code > : 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">module.exports = { // 路径名为 &quot;/&lt;REPO&gt;/&quot; base: &amp;#39;/learn-typescript/&amp;#39;, //... }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>🎜Actualisez la page et nous trouverons quelques changements détaillés, comme l'animation de chargement pendant le chargement et la prise en charge du passage en mode sombre ：🎜🎜<img src="https://p3-juejin.byteimg.com/ tos-cn-i-k3u1fbpfcp/12ddf58858974638ae55d669238600da~tplv-k3u1fbpfcp-watermark.awebp" alt="" chargement="lazy" class=" medium-zoom-image"/>🎜<h2 data-id="heading-7" >6. Ajouter des informations sur l'article🎜🎜Mais nous constaterons également que, comme cet article sur les types conditionnels, <code>Types conditionnels ) apparaît deux fois. En effet, ce sujet extrait automatiquement le premier grand titre comme titre de. cet article. Nous pouvons ajouter quelques modifications d'informations au fichier md de chaque article : 🎜

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" }
              ],
            }
          ]
    }
}

🎜À ce moment l'article L'effet est le suivant : 🎜

但如果你不想要标题、作者、时间这些信息呢，我们可以在样式里隐藏，这个稍后会讲到。

7. 设置语言

注意，上图的文章时间，我们写入的格式为 2021-12-12 ，但是显示的是 12/12/2021，这是因为 VuePress 默认的 lang 为 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 Pages 上。我们在 Github 上新建一个仓库，这里我取得仓库名为：learn-typescript。

对应，我们需要在 config.js 添加一个 base 路径配置：

module.exports = {
  	// 路径名为 "/<REPO>/"
    base: &#39;/learn-typescript/&#39;,
  	//...
}

最终的 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 中看到最后的地址：

Comme la dernière adresse que j'ai générée est https://mqyqingfeng.github.io/learn-typescript/

À ce stade, nous avons terminé le déploiement des pages VuePress et Github.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!