Créer une page Web personnelle avec VuePress-Développement WeChat-php.cn

Créer une page Web personnelle avec VuePress

php中世界最好的语言

Libérer： 2018-06-04 15:49:26

original

3498 Les gens l'ont consulté

Cette fois, je vais vous proposer VuePress pour créer une page Web personnelle. Quelles sont les précautions pour que VuePress crée une page Web personnelle. Voici un cas pratique, jetons un coup d'oeil.

VuePress

vuepress a été publié par Youda le 12 avril Une marque Le nouveau générateur de sites Web statiques basé sur Vue est en fait une application spa Vue avec un webpack intégré, qui peut être utilisé pour rédiger des documents.

Un générateur de site statique basé sur Vue SSR Son but initial est d'écrire des documents avec plaisir, mais j'ai trouvé qu'il est également très bon pour bloguer.

Ceci est le document officiel de VuePress

Commencez à le configurer

Vous pouvez suivre les exemples dans le document et jouez avec vous-même. Cependant, comme la documentation de VuePress est également implémentée à l'aide de VuePress, j'ai pris une astuce et j'ai directement utilisé le répertoire docs de l'entrepôt de VuePress pour jouer avec.

1. Installez d'abord VuePress globalement

npm install -g vuepress

2. Ensuite, clonez le référentiel VuePress sur votre ordinateur

git clone git@github.com:docschina/vuepress.git

<.>Exécuter dans le fichier docs (veuillez vous assurer que votre version de Node.js >= 8)

cd vuepress
cd docs
vuepress dev

Copier après la connexion

Quand vous voyez cette ligne, cela signifie que l'opération a réussi :

 VuePress dev server listening at http://localhost:8080/

Copier après la connexion

Ensuite, nous ouvrons http://localhost:8080/

et constatons que le document vuepress est réellement ouvert :

Le travail suivant consiste à remplacer le data , mais il faut d'abord jeter un œil à la

structure du répertoire des docs :

├─.vuepress
│ ├─components
│ └─public
│ └─icons
│ └─config.js // 配置文件
├─config // Vuepress文档的配置参考内容
├─default-theme-config // Vuepress文档的默认主题配置内容
├─guide // Vuepress文档的指南内容
└─zh // 中文文档目录
 ├─config
 ├─default-theme-config
 └─guide
└─README.md // 首页配置文件

Copier après la connexion

Le document est divisé en deux parties, le document chinois est dans le répertoire /zh/, et le document anglais se trouve dans le répertoire racine.

En fait, les éléments du répertoire sont assez faciles à comprendre. Tout d'abord, les trois répertoires guide, default-theme-config et config sont le contenu principal du document Vuepress. , vous pouvez également voir que seuls ces trois répertoires ont été remplacés.

Configuration de la page d'accueil

Le thème par défaut fournit une mise en page de page d'accueil Pour l'utiliser, vous devez définir le front YAML du README. md dans votre répertoire racine Spécifiez home: true dans Matter et ajoutez d'autres métadonnées.

Jetons d'abord un coup d'œil au README dans le répertoire racine, md :

home: true // 是否使用Vuepress默认主题
heroImage: /hero.png // 首页的图片
actionText: Get Started → // 按钮的文字
actionLink: /guide/ // 按钮跳转的目录
features: // 首页三个特性
- title: Simplicity First
 details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
 details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
 details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2018-present Evan You // 页尾

Copier après la connexion

Je n'arrive vraiment pas à le comprendre, le site officiel a des instructions de configuration plus détaillées que le mien.

Configuration de la navigation

Le fichier de configuration de la navigation est en .vuepress/config.js

Dans le fichier de configuration de la navigation nav est Pour contrôler le lien de la barre de navigation, vous pouvez le remplacer par votre propre répertoire de blog.

nav: [
 {
 text: 'Guide',
 link: '/guide/',
 },
 {
 text: 'Config Reference',
 link: '/config/'
 },
 {
 text: 'Default Theme Config',
 link: '/default-theme-config/'
 }
]

Copier après la connexion

Les autres documents officiels de configuration du thème par défaut contiennent des

instructions de documentationJe n'entrerai pas dans les détails ici.

Changer la couleur du thème par défaut

Vous pouvez créer un fichier override.styl dans le répertoire .vuepress/.

vuepress propose quatre couleurs modifiables :

$accentColor = #3eaf7c // 主题色
$textColor = #2c3e50 // 文字颜色
$borderColor = #eaecef // 边框颜色
$codeBgColor = #282c34 // 代码背景颜色

Copier après la connexion

Je l'ai changé en ceci :

Mise en œuvre de barre latérale

Comme de nombreuses personnes le demandent dans la zone de commentaires, je le mettrai à jour ici. En fait, peu importe à quel point j'écris ici, ce n'est pas aussi détaillé que tout le monde peut le lire. .Documents officiels.

La configuration de la sidebar est également dans .vuepress/config.js :

sidebar: [
 {
 title: 'JavaScript', // 侧边栏名称
 collapsable: true, // 可折叠
 children: [
 '/blog/JavaScript/学会了ES6，就不会写出那样的代码', // 你的md文件地址
 ]
 },
 {
 title: 'CSS', 
 collapsable: true,
 children: [
 '/blog/CSS/搞懂Z-index的所有细节',
 ]
 },
 {
 title: 'HTTP',
 collapsable: true,
 children: [
 '/blog/HTTP/认识HTTP-Cookie和Session篇',
 ]
 },
]

Copier après la connexion

La structure du document correspondante :

├─blog // docs目录下新建一个博客目录
│ ├─CSS
│ ├─HTTP
│ └─JavaScript

Copier après la connexion

Mon blog : brownhu

Déploiement

Après avoir configuré votre blog, exécutez la ligne de commande :

Vuepress build

Quand vous voyez cette ligne, cela signifie succès :

Succès ! Généré des fichiers statiques dans vuepress.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article Veuillez payer. attention pour des choses plus excitantes. Autres articles connexes sur le site Web chinois php !

Lecture recommandée :

Créer un compte public WeChat mobile (avec code)

Utiliser la longueur et la taille() Comparer

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!