[Xiaomuxue フロントエンド] VuePress はオンライン電子書籍と技術文書を作成します (VuePress + Markdown + ノード)

「蛾が炎の中に飛び込むとき、きっととても幸せなんだろうなって思ってたんです。」
「呆然としないで、お蝶夫人、中に入って料理してください！」

1 はじめに

Vue 駆動の静的 Web サイト ジェネレーター。生成された Web ページ コンテンツは独自のサーバーで管理され、技術文書や個人のブログの作成に使用できます。

公式サイトアドレス： https:
//vuepress.vuejs.org/zh/

1.1 VuePress の概要

VuePress は 2 つの部分で構成されます。1 つは Vue を利用したテーマ システムとプラグイン API を含む最小限の静的サイト ジェネレーター (新しいウィンドウが開きます) で、もう 1 つは技術ドキュメントの作成に最適化されたデフォルトのテーマであり、その本来の目的はVue とそのサブプロジェクトのドキュメントのニーズをサポートします。

VuePress によって生成されるすべてのページには、事前にレンダリングされた HTML が付属しているため、非常に優れた読み込みパフォーマンスと検索エンジン最適化 (SEO) が実現されます。同時に、ページが読み込まれると、Vue は静的コンテンツを引き継いで完全なシングルページ アプリケーション (SPA) に変換し、他のページはユーザーがそのページを参照したときにのみオンデマンドで読み込まれます。

1.2 仕組みは?

実際、VuePress Web サイトは、Vue (新しいウィンドウが開きます)、Vue Router (新しいウィンドウが開きます)、および webpack (新しいウィンドウが開きます) を利用した単一ページのアプリケーションです。以前に Vue を使用したことがある場合は、カスタム テーマを開発するときに非常に馴染みのある開発エクスペリエンスを感じることができ、Vue DevTools を使用してカスタム テーマをデバッグすることもできます。

2. ノードのインストール

ダウンロード アドレス:
https://nodejs.org/zh-cn/download

インストールが成功したかどうかを確認します:
コマンド ウィンドウに「node -v および npm -v」と入力します。 インストールが成功すると、ソフトウェアのバージョンが表示されます。

node -v
npm -v

3.VuePressをインストールする

• ステップ 1: 新しいディレクトリを作成して入力します。

mkdir vuepress-starter
cd vuepress-starter

• ステップ 2: プロジェクトを初期化する

git init
npm init

• ステップ 3: VuePress をローカル依存関係としてインストールする

npm install -D vuepress@next

• ステップ 4: package.json にスクリプトを追加する

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

• ステップ 5: デフォルトの一時ディレクトリとキャッシュ ディレクトリを .gitignore ファイルに追加する

echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore

• ステップ 6: 最初のドキュメントを作成する

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

• ステップ 7: サーバーをローカルで起動してドキュメント サイトを開発する

npm run docs:dev

ブラウザのプレビューは次のとおりです。

http://localhost:8080/

README.md のテキスト コンテンツを変更します。

ブラウザ プレビューは次のとおりです。

VuePress は、ホットリロードされた開発サーバーを http://localhost:8080 で起動します。Markdown ファイルを変更すると、ブラウザ内のコンテンツが自動的に更新されます。

これで、シンプルで使いやすい VuePress ドキュメント サイトが完成したはずです。

4.VuePressの設定

プロジェクトの構造は次のようになります。

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

VuePress サイトの基本構成ファイルは .vuepress/config.js ですが、TypeScript 構成ファイルもサポートされています。.vuepress/config.ts を使用すると、より適切な型ヒントを取得できます。

新しい構成 config.js を作成します。内容は次のとおりです。

import {
    
     defineUserConfig } from 'vuepress'

export default defineUserConfig({
    
    
  lang: 'zh-CN',
  title: '你好， 爱看书的小沐 ！',
  description: '这是我的第一个 VuePress 站点',
})

ブラウザのプレビューは次のとおりです。

VuePress は Markdown 中心です。プロジェクト内の各 Markdown ファイルは個別のページです。

4.1 タイトルを変更する

 locales: {
    
    
    '/': {
    
    
      lang: 'en-US',
      title: '爱看书的小沐',
      description: 'Vue-powered Static Site Generator',
    },
    '/zh/': {
    
    
      lang: 'zh-CN',
      title: '爱看书的小沐',
      description: 'Vue 驱动的静态网站生成器',
    },
  },

4.2 ナビゲーションバーを変更する

import {
    
     defaultTheme } from 'vuepress'

export default {
    
    
 locales: {
    
    
    '/': {
    
    
      lang: 'en-US',
      title: '爱看书的小沐',
      description: 'Vue-powered Static Site Generator',
    },
    '/zh/': {
    
    
      lang: 'zh-CN',
      title: '爱看书的小沐',
      description: 'Vue 驱动的静态网站生成器',
    },
  },
  theme: defaultTheme({
    
    
	  // URL
    logo: 'https://vuejs.org/images/logo.png',
    navbar: [
      // NavbarItem
      {
    
    
        text: 'Foo',
        link: '/foo/',
      },
      // NavbarGroup
      {
    
    
        text: 'Group',
        children: ['/group/foo.md', '/group/bar.md'],
      },
      // 字符串 - 页面文件路径
      '/bar/README.md',
    ],
	
  }),
}

4.3 右側の列を変更する

import {
    
     defaultTheme } from 'vuepress'

export default {
    
    
 locales: {
    
    
    '/': {
    
    
      lang: 'en-US',
      title: '爱看书的小沐',
      description: 'Vue-powered Static Site Generator',
    },
    '/zh/': {
    
    
      lang: 'zh-CN',
      title: '爱看书的小沐',
      description: 'Vue 驱动的静态网站生成器',
    },
  },
  theme: defaultTheme({
    
    
	  // URL
    logo: 'https://vuejs.org/images/logo.png',
    navbar: [
      // NavbarItem
      {
    
    
        text: 'Foo',
        link: '/foo/',
      },
      // NavbarGroup
      {
    
    
        text: 'Group',
        children: ['/group/foo.md', '/group/bar.md'],
      },
      // 字符串 - 页面文件路径
      '/bar/README.md',
    ],
	// 侧边栏数组
    // 所有页面会使用相同的侧边栏
    sidebar: [
      // SidebarItem
      {
    
    
        text: 'Foo',
        link: '/foo/',
        children: [
          // SidebarItem
          {
    
    
            text: 'github',
            link: 'https://github.com',
            children: [],
          },
          // 字符串 - 页面文件路径
          '/foo/bar.md',
        ],
      },
      // 字符串 - 页面文件路径
      '/bar/README.md',
    ],
  }),
}

4.4 テキストの変更

'# Hello VuePress, 爱看书的小沐 2023' 

::: tip
这是一个提示
:::

::: warning
这是一个警告
:::

::: danger
这是一个危险警告
:::

::: details
这是一个 details 标签
:::

ファイルの変更:

ブラウザーのプレビューは次のとおりです。

エピローグ

如果您觉得该方法或代码有一点点用处，可以给作者点个赞，或打赏杯咖啡；╮(￣▽￣)╭
如果您感觉方法或代码不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡)
感谢各位大佬童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)っ！！！