這次給大家?guī)?lái)VuePress做出個(gè)人網(wǎng)頁(yè)，VuePress做個(gè)人網(wǎng)頁(yè)的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
VuePress
vuepress是尤大大4月12日發(fā)布的一個(gè)全新的基于vue的靜態(tài)網(wǎng)站生成器，實(shí)際上就是一個(gè)vue的spa應(yīng)用，內(nèi)置webpack，可以用來(lái)寫(xiě)文檔。
一個(gè)基于 Vue SSR 的靜態(tài)站生成器，本來(lái)的目的是爽爽的寫(xiě)文檔，但是我發(fā)現(xiàn)用來(lái)擼一個(gè)人博客也非常不錯(cuò)。
這是VuePress的官方文檔
上手搭建
你可以跟著文檔上的例子自己玩一玩，不過(guò)由于VuePress的文檔也是用VuePress來(lái)實(shí)現(xiàn)的，所以我取巧直接拿VuePress倉(cāng)庫(kù)中的docs目錄拿來(lái)玩耍。
1.首先安裝VuePress到全局
npm install -g vuepress
2.然后把VuePress倉(cāng)庫(kù)克隆到你的電腦
git clone git@github.com:docschina/vuepress.git
在docs文件中執(zhí)行（請(qǐng)確保你的 Node.js 版本 >= 8）
cd?vuepress cd?docs vuepress?dev
當(dāng)你看到這一行就說(shuō)明已經(jīng)成功了：
?VuePress?dev?server?listening?at?http://localhost:8080/
下面我們打開(kāi)http://localhost:8080/
發(fā)現(xiàn)真的打開(kāi)了vuepress文檔：
下面的工作就是數(shù)據(jù)的替換了，但我們應(yīng)該先看一下docs的目錄結(jié)構(gòu)：
├─.vuepress │?├─components │?└─public │?└─icons │?└─config.js?//?配置文件 ├─config?//?Vuepress文檔的配置參考內(nèi)容 ├─default-theme-config?//?Vuepress文檔的默認(rèn)主題配置內(nèi)容 ├─guide?//?Vuepress文檔的指南內(nèi)容 └─zh?//?中文文檔目錄 ?├─config ?├─default-theme-config ?└─guide └─README.md?//?首頁(yè)配置文件
文檔分成了兩部分，中文文檔在/zh/目錄下，英文文檔在根目錄下。
其實(shí)目錄里面的東西都挺好看懂的，首先guide 、default-theme-config、config 這三個(gè)目錄中的都是Vuepress文檔的主要內(nèi)容，從中文文檔里也可以看到只有這三個(gè)目錄被替換了。
首頁(yè)配置
默認(rèn)主題提供了一個(gè)主頁(yè)布局，要使用它，需要在你的根目錄?README.md?的?YAML front matter?中指定?home：true，并加上一些其他的元數(shù)據(jù)。
我們先看看根目錄下的README,md：
home:?true?//?是否使用Vuepress默認(rèn)主題 heroImage:?/hero.png?//?首頁(yè)的圖片 actionText:?Get?Started?→?//?按鈕的文字 actionLink:?/guide/?//?按鈕跳轉(zhuǎn)的目錄 features:?//?首頁(yè)三個(gè)特性 -?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?//?頁(yè)尾
實(shí)在看不懂，官網(wǎng)有比我更詳細(xì)的配置說(shuō)明。
導(dǎo)航配置
導(dǎo)航配置文件在.vuepress/config.js中
在導(dǎo)航配置文件中nav是控制導(dǎo)航欄鏈接的，你可以把它改成自己的博客目錄。
nav:?[
?{
?text:?'Guide',
?link:?'/guide/',
?},
?{
?text:?'Config?Reference',
?link:?'/config/'
?},
?{
?text:?'Default?Theme?Config',
?link:?'/default-theme-config/'
?}
]
剩下的默認(rèn)主題配置官方文檔都有很詳細(xì)的文檔說(shuō)明這里就不在啰嗦了。
更改默認(rèn)主題色
你可以在.vuepress/目錄下創(chuàng)建一個(gè)override.styl文件。
vuepress提供四個(gè)可更改的顏色：
$accentColor?=?#3eaf7c?//?主題色 $textColor?=?#2c3e50?//?文字顏色 $borderColor?=?#eaecef?//?邊框顏色 $codeBgColor?=?#282c34?//?代碼背景顏色
我把它改成了這樣：
側(cè)邊欄的實(shí)現(xiàn)
由于評(píng)論區(qū)里問(wèn)的人較多，所以在這里更新一下，其實(shí)我就算在這里寫(xiě)的再詳細(xì)也不如大家去看官方文檔。
側(cè)邊欄的配置也在.vuepress/config.js中：
sidebar:?[
?{
?title:?'JavaScript',?//?側(cè)邊欄名稱
?collapsable:?true,?//?可折疊
?children:?[
?'/blog/JavaScript/學(xué)會(huì)了ES6，就不會(huì)寫(xiě)出那樣的代碼',?//?你的md文件地址
?]
?},
?{
?title:?'CSS',?
?collapsable:?true,
?children:?[
?'/blog/CSS/搞懂Z-index的所有細(xì)節(jié)',
?]
?},
?{
?title:?'HTTP',
?collapsable:?true,
?children:?[
?'/blog/HTTP/認(rèn)識(shí)HTTP-Cookie和Session篇',
?]
?},
]
對(duì)應(yīng)的文檔結(jié)構(gòu)：
├─blog?//?docs目錄下新建一個(gè)博客目錄 │?├─CSS │?├─HTTP │?└─JavaScript
我的博客：brownhu
部署
在配置好你博客之后，命令行執(zhí)行：
Vuepress build
當(dāng)你看到這一行就說(shuō)明成功了：
Success! Generated static files in vuepress.
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
推薦閱讀：
做一個(gè)移動(dòng)端微信公眾號(hào)（附代碼）
Atas ialah kandungan terperinci VuePress做出個(gè)人網(wǎng)頁(yè). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Bagaimana untuk menghantar halaman web ke desktop sebagai pintasan dalam pelayar Edge?
Mar 14, 2024 pm 05:22 PM
Bagaimana untuk menghantar halaman web ke desktop sebagai pintasan dalam pelayar Edge? Ramai pengguna kami ingin memaparkan halaman web yang kerap digunakan pada desktop sebagai pintasan untuk kemudahan membuka terus halaman akses, tetapi mereka tidak tahu bagaimana untuk melakukannya Sebagai tindak balas kepada masalah ini, editor isu ini akan berkongsi penyelesaian dengan majoriti pengguna , mari kita lihat kandungan yang dikongsi dalam tutorial perisian hari ini. Kaedah pintasan menghantar halaman web ke desktop dalam pelayar Edge: 1. Buka perisian dan klik butang "..." pada halaman. 2. Pilih "Pasang tapak ini sebagai aplikasi" dalam "Aplikasi" dalam pilihan menu lungsur. 3. Akhir sekali, klik pada tetingkap pop timbul
Membangunkan sistem pengundian web menggunakan JavaScript
Aug 09, 2023 pm 01:30 PM
Menggunakan JavaScript untuk membangunkan sistem pengundian web Abstrak: Dengan perkembangan pesat Internet, pengundian dalam talian telah menjadi cara yang mudah dan pantas untuk mengumpul pendapat umum dan membuat keputusan. Artikel ini akan memperkenalkan penggunaan JavaScript untuk membangunkan sistem pengundian web yang mudah, yang membolehkan pengguna memilih pilihan dan menyerahkan undian. Pengenalan: Sistem pengundian web ialah program yang memaparkan berbilang pilihan pada halaman web dan membolehkan pengguna memilih. Ia boleh digunakan dalam banyak senario, seperti pengundian pilihan raya, tinjauan produk, pengumpulan pendapat, dsb. Artikel ini
Bagaimana untuk menyediakan muat semula automatik halaman web
Oct 26, 2023 am 10:52 AM
Untuk menetapkan muat semula automatik halaman web, anda boleh menggunakan teg "meta" HTML, fungsi "setTimeout" JavaScript, fungsi "setInterval" atau pengepala "Refresh" HTTP. Pengenalan terperinci: 1. Gunakan teg "meta" HTML Dalam teg "<head>" dokumen HTML, anda boleh menggunakan teg "meta" untuk menetapkan penyegaran automatik halaman web "fungsi JavaScript, dsb.
Apa yang perlu dilakukan jika halaman web tidak boleh diakses
Sep 06, 2023 am 09:36 AM
Penyelesaian kepada halaman web yang tidak boleh diakses termasuk menyemak sambungan rangkaian, mengosongkan cache penyemak imbas, menyemak alamat halaman web, cuba menggunakan penyemak imbas lain, menyemak status pelayan, menyemak resolusi nama domain, menyemak tembok api dan tetapan keselamatan, dan menghubungi tapak web pentadbir. Pengenalan terperinci: 1. Periksa sambungan rangkaian untuk memastikan bahawa sambungan rangkaian adalah normal Anda boleh cuba membuka halaman web lain atau menggunakan peranti lain untuk mengakses untuk menentukan sama ada ia adalah masalah sambungan rangkaian Jika halaman web lain boleh diakses secara normal , ia mungkin menjadi masalah dengan halaman web 2. Kosongkan cache penyemak imbas Cache penyemak imbas boleh menyebabkan halaman web gagal dimuatkan, dsb.
Bagaimana untuk membuka php pada halaman web
Mar 22, 2024 pm 03:20 PM
Melaksanakan kod PHP dalam halaman web memerlukan memastikan pelayan web menyokong PHP dan dikonfigurasikan dengan betul. PHP boleh dibuka dalam tiga cara: * **Persekitaran pelayan:** Letakkan fail PHP dalam direktori akar pelayan dan aksesnya melalui penyemak imbas. * **Persekitaran Pembangunan Bersepadu: **Letakkan fail PHP dalam direktori akar web yang ditentukan dan aksesnya melalui penyemak imbas. * **Pelayan Jauh:** Akses fail PHP yang dihoskan pada pelayan jauh melalui alamat URL yang disediakan oleh pelayan.
Apakah yang perlu saya lakukan jika imej pada halaman web tidak boleh dimuatkan? 6 penyelesaian
Mar 15, 2024 am 10:30 AM
Beberapa netizen mendapati bahawa apabila mereka membuka halaman web pelayar, gambar di halaman web itu tidak dapat dimuatkan untuk masa yang lama. Saya menyemak bahawa rangkaian adalah normal, jadi apakah masalahnya? Editor di bawah akan memperkenalkan kepada anda enam penyelesaian kepada masalah bahawa imej halaman web tidak boleh dimuatkan. Imej halaman web tidak boleh dimuatkan: 1. Masalah kelajuan Internet Halaman web tidak dapat memaparkan imej Ia mungkin kerana kelajuan Internet komputer agak perlahan dan terdapat lebih banyak perisian yang dibuka pada komputer Dan imej yang kami akses adalah agak besar mungkin disebabkan oleh tamat masa pemuatan Akibatnya, gambar tidak dapat dipaparkan Anda boleh mematikan perisian yang mengambil kelajuan rangkaian dan menyemaknya dalam pengurus tugas. 2. Terlalu ramai pelawat Jika halaman web tidak dapat memaparkan gambar, mungkin kerana halaman web yang kami lawati telah dilawati pada masa yang sama.
Kemungkinan sebab sambungan rangkaian adalah normal tetapi penyemak imbas tidak boleh mengakses halaman web
Feb 19, 2024 pm 03:45 PM
Penyemak imbas tidak boleh membuka halaman web tetapi rangkaian adalah normal Terdapat banyak sebab yang mungkin. Apabila masalah ini berlaku, kita perlu menyiasat langkah demi langkah untuk menentukan punca tertentu dan menyelesaikan masalah tersebut. Mula-mula, tentukan sama ada halaman web tidak boleh dibuka terhad kepada penyemak imbas tertentu atau sama ada semua penyemak imbas tidak boleh membuka halaman web. Jika hanya satu penyemak imbas tidak boleh membuka halaman web, anda boleh cuba menggunakan penyemak imbas lain, seperti Google Chrome, Firefox, dll., untuk ujian. Jika penyemak imbas lain dapat membuka halaman dengan betul, kemungkinan besar masalahnya adalah dengan penyemak imbas khusus itu, mungkin
Perkara yang perlu dilakukan jika halaman web tidak boleh dibuka
Feb 21, 2024 am 10:24 AM
Bagaimana untuk menyelesaikan masalah laman web tidak dibuka Dengan perkembangan pesat Internet, orang ramai semakin bergantung kepada Internet untuk mendapatkan maklumat, berkomunikasi dan berhibur. Walau bagaimanapun, kadangkala kami menghadapi masalah bahawa halaman web tidak boleh dibuka, yang membawa banyak masalah kepada kami. Artikel ini akan memperkenalkan anda kepada beberapa kaedah biasa untuk membantu menyelesaikan masalah halaman web tidak dibuka. Pertama, kita perlu menentukan mengapa halaman web tidak boleh dibuka. Sebab yang mungkin termasuk masalah rangkaian, masalah pelayan, masalah tetapan penyemak imbas, dsb. Berikut ialah beberapa penyelesaian: Semak sambungan rangkaian: Pertama, kita perlukan
