Satu artikel untuk mengajar anda dengan cepat cara membina blog menggunakan VuePress Github Pages (Praktikal)

Artikel ini akan berkongsi dengan anda pelaksanaan praktikal VuePress Melalui artikel ini, saya akan mengajar anda cara cepat membina blog menggunakan VuePress Github Pages.

Baru-baru ini telah menyelesaikan terjemahan Hanbook, dokumen rasmi TypeScript yang terkini, terdapat empat belas artikel secara keseluruhan, yang boleh dipanggil sebagai salah satu tutorial pengenalan terbaik untuk TypeScript4 di China. . Untuk memudahkan semua orang membaca, saya menggunakan VuePress Github Pages untuk membina blog Kesan blog adalah seperti berikut:

<.>0. VuePress

VuePress Tidak perlu dikatakan, penjana laman web statik berdasarkan Vue mempunyai gaya yang ringkas dan konfigurasi yang agak mudah. Sebab mengapa saya tidak menggunakan

VitePress adalah kerana saya ingin menggunakan tema sedia ada, dan VitePress tidak serasi dengan ekosistem VuePress semasa Adapun mengapa saya tidak memilih VuePress@next , memandangkan ia masih dalam peringkat Beta, tunggu sehingga ia stabil sebelum memulakan penghijrahan. [Cadangan berkaitan: "Tutorial vue.js"]

1 Binaan setempat

Permulaan pantas

Sama seperti tapak web rasmi VuePress:

1. Buat dan masukkan direktori baharu

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

2 Gunakan pengurus pakej kegemaran anda untuk memulakan

yarn init # npm init

3 Pasang VuePress sebagai pergantungan setempat 🎜>

4. Buat dokumen pertama anda VuePress akan menggunakan dokumen sebagai direktori akar dokumen, jadi README.md ini bersamaan dengan halaman utama:

yarn add -D vuepress # npm install -D vuepress

5 skrip

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

6. Mulakan pelayan secara setempat

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

VuePress akan memulakan pelayan panas di

http://localhost:8080

yarn docs:dev # npm run docs:dev

(membuka tetingkap baharu) Pelayan pembangunan yang berlebihan.

2. Konfigurasi asas

Buat direktori

di bawah direktori dokumen, di mana semua fail berkaitan VuePress akan diletakkan. Pada masa ini, struktur projek anda mungkin kelihatan seperti ini:

.vuepressTambah

di bawah folder

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

untuk mengkonfigurasi tajuk dan penerangan tapak web untuk memudahkan SEO:

.vuepress config.js Pada masa ini, antara muka adalah serupa dengan:

module.exports = {
  title: 'TypeScript4 文档',
  description: 'TypeScript4 最新官方文档翻译'
}

3 Tambah bar navigasi

Kami kini menambah bar navigasi di penjuru kanan sebelah atas. daripada halaman utama, ubah suai

:

config.jsKesannya adalah seperti berikut:

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' }
                ]
            }
        ]
    }
}

Untuk konfigurasi lanjut, sila rujuk bar navigasi VuePress:

https://vuepress.org/zh/theme/default-theme-config.html#Navigation bar

Tambah bar sisi

Kini kami menambah beberapa dokumen md, direktori dokumen semasa Seperti berikut:

Kami mengkonfigurasi yang berikut dalam

:

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
|  └─ handbook
|  	  └─ ConditionalTypes.md
|	    └─ Generics.md
└─ package.json

config.jsKesan yang sepadan adalah seperti berikut:

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 Menukar tema

Kini direktori asas dan fungsi navigasi telah dilaksanakan, tetapi bagaimana jika saya juga mahukan fungsi seperti memuatkan, menukar animasi, menukar mod (mod gelap), kembali ke atas, komen, dll. Untuk memudahkan kos pembangunan, Kami boleh menggunakan tema secara langsung Tema yang digunakan di sini ialah vuepress-theme-rec (https://vuepress -theme-reco.recoluan.com/):

Sekarang kami memasang vuepress-theme-reco:

Kemudian rujuk topik dalam

:

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

config.jsMuat semula halaman dan kami akan menemui beberapa perubahan terperinci, seperti animasi pemuatan semasa pemuatan dan sokongan untuk beralih kepada mod gelap :

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

6. Tambahkan maklumat artikel.

Tetapi kami juga akan mendapati bahawa dalam artikel ini seperti jenis syarat,

sebenarnya muncul dua kali Ini kerana tema ini secara automatik mengeluarkan tajuk besar pertama sebagai tajuk artikel ini pengubahsuaian dalam fail md setiap artikel:

条件类型（Conditional Types）Kesan artikel pada masa ini adalah seperti berikut:

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

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

Seperti alamat terakhir yang saya hasilkan ialah https://mqyqingfeng.github.io/learn-typescript/

Pada ketika ini, kami telah selesai Penggunaan Halaman VuePress dan Github.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Satu artikel untuk mengajar anda dengan cepat cara membina blog menggunakan VuePress Github Pages (Praktikal). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!