「工具」使用 VuePress 快速搭建好看的個人博

「工具」使用 VuePress 快速搭建好看的個人博客

什么選擇vuepress

博客地址程序員成長指北(http://www.inode.club/) 可以先體驗下。

之前使用docsify部署過個人博客, 在此之前也使用過gitbook, 這次使用vuepress來改版, 根據自己的體驗, 將這三者做一個對比

從閱讀體驗來說(個人感覺): gitbook > docsify=vuepress
從配置上來說, docsify相比于vuepress和gitbook都要簡單一些.
從性能上來說: vuepress > docsify雖然docsify也是基于vue的, docsify是運行時解析, vuepress是預先渲染HTML
靈活性上, vuepress也是相當占優勢的, 對vue熟悉的朋友可以編寫vue組件實現你想要的功能樣式

vuepress特性

為技術文檔而優化的內置Markdown拓展
在Markdown文件中使用Vue組件的能力
Vue驅動的自定義主題系統
自動生成Service Worker(支持PWA)
Google Analytics集成
基于Git的"最后更新時間
多語言支持
響應式布局
支持PWA模式

總的來說, 使用vuepress優勢有挺多的, 特別是我之前使用docsify搭建的網站, 是一點也沒有被瀏覽器收錄啊, 怎么都搜不到,受到一萬點打擊,所以決心改一改

其實vuepress的官網已經寫的挺好的了, 但是我這篇文章也有優勢啊,是一步步的教你搭建, 這樣就不用來回在文檔中去找什么配置.(當然如果你想直接通過官網來學習, 可以直接看官網,點擊鏈接就可以喔)

項目搭建

安裝vuepress

第一步就是進行vuepress進行安裝: 如果使用npm來安裝, Node.js版本需要 >=8 才可以

yarn global add vuepress # 或者：npm install -g vuepress

注意
如果你的現有項目依賴了 webpack 3.x，推薦使用 Yarn而不是 npm 來安裝 VuePress。因為在這種情形下，npm 會生成錯誤的依賴樹。

初始化項目

創建項目目錄blog

mkdir blog  
cd blog

初始化

yarn init -y # 或者 npm init -y

初始化完成后, 會創建一個package.json

{  
  "name":"blog",    
  "version": "1.0.0",  
  "main": "index.js",  
  "license": "MIT"  
  "scripts": {  
     "test": "echo \"Error: no test specified\" && exit 1"  
  }  
}

在package.json中, 配置啟動命令

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

啟動項目: npm run docs:dev這條命令就等于vuepress dev docs

打包項目: npm run build 這條命令就等于 vuepress build docs

創建docs目錄, 主要用于放置我們寫的.md類型的文章以及.vuepress相關的配置

mkdir docs

接著在docs文件夾中創建.vuepress文件夾

cd docs  
mkdir .vuepress

這個文件主要就是放vuepress相關的配置

到這一步, 我們的項目大體架子已經搭建出來了,接下來進行配置.

頁面具體內容配置

基本配置

接下來要讓頁面顯示內容, 就需要進行配置, 新建一個總的配置文件config.js, 這個文件的名字是固定的.

cd .vuepress  
touch config.js

config.js最基礎的配置文件內容如下:

module.exports={  
    title: 'koala的博客',  
    description: '專注 Node.js 技術棧分享，從前端到Node.js再到數據庫',  
}

如果這時運行npm run docs:dev或者yarn docs:dev, 會出現頁面404頁面,vuepress默認打開的是docs下的readme.md文件, 由于你沒有創建,所以找到的是vuepress默認提供的404頁面, 關于這有點,我們借助vue-devtools工具來查看一下vue的結構

在docs目錄下創建README.md文件, 再運行,就可以看到運行起來的效果, 如下圖所示:

blog001.jpg

設置封面頁

此時README文件中沒有內容,封面頁是空的, 我們可以通過在這個markdown文件中寫一些內容, 同時官方也給我們提供了封面頁的模板(個人覺得還是比較實用的):

---  
home: true  
heroImage: /home.png  
actionText: Get Started →  
actionLink: /node/  
features:  
- title: day day up  
  details: 記錄每一天的進步, 一分耕耘，一分收獲.  
- title: 程序員成長指北  
  details: 專注 Node.js 技術棧分享，從 前端 到 Node.js 再到 后端數據庫，祝您成為優秀的高級 Node.js 全棧工程師  
- title: koala  
  details: 一個有趣的且樂于分享的人。座右銘：今天未完成的，明天更不會完成。  
footer: MIT Licensed | Copyright ? 2018-present Evan You  
  
---

效果圖如下:

配置導航欄nav

在config.js中添加:

themeConfig:{  
  nav: [{text: "主頁", link: "/"      },  
      { text: "node", link: "/node/" },  
      { text: "前端", link: "/webframe/"},  
      { text: "數據庫", link: "/database/"   },  
      { text: "android", link: "/android/"   },  
      { text: "面試問題", link: "/interview/" }  
    ],  
}

效果如下圖:

如果想要展示二級導航, 可以這樣配置:

themeConfig:{  
  nav: [{text: "主頁", link: "/"      },  
      { text: "node", link: "/node/" },  
      { text: "前端",   
        items: [   
          { text: "html", link:"/web/html/"},  
          { text: "css", link:"/web/css/"},  
          ]  
      },  
      { text: "數據庫", link: "/database/"   },  
      { text: "android", link: "/android/"   },  
      { text: "面試問題", link: "/interview/" }  
    ],  
}

效果如圖所示:

當你使用上面的方式配置nav時, 目錄結構最好和我創建的一樣項目目錄結構如下:

導航欄創建好了, 接下來就是配置頁面內容中的側邊欄slider

配置側邊欄slider

1.自動獲取側邊欄內容

如果你希望自動生成當前頁面標題的側邊欄, 可以在config.js中配置來啟用

// .vuepress/config.js  
module.exports={  
  themeConfig:{  
    sidebar: 'auto',  
    // sidebarDepth: 1   
  }  
}

2.展示每個頁面的側邊欄

如果你希望為不同的頁面組顯示不同的側邊欄, 就和官網一樣, 點擊指南顯示的是對應的側邊欄,目前目錄有node \ database \ web等, 這些目錄下都存放著多個md文件:

module.exports={  
  themeConfig:{  
    sidebar:{  
      "/node/":[  
        ["", "node目錄"],  
        ["path", "作為前端也需要知道的路徑知識"],  
        ["stream", "node核心模塊-stream"]  
      ],  
      "/web/":[  
        ["", "前端"],  
        {  
          title: "css",  
          name: "css",  
          collabsable: false,  
          children: [  
            ["css/", "目錄"],  
            ['css/1', "css常考面試題"]  
          ]  
        }  
      ]  
    }  
  }  
}

設置的效果圖如下: 在node導航下:

在前端導航下的效果:

上面采用了兩個方式配置側邊欄, 一個側邊欄是node目錄下直接是寫的markdown文章, 而在web下又有多個分類, 所有有進行了分欄配置, 其實這兩種方式在我們博客中都是比較常見的

自定義布局內容

網站的導航和側邊欄都已經配置好之后, 如果你覺得頁面不是很符合你的預期, 你也可以自定修改成你想要的效果。比如就像我的博客中左側固定的內容, 就是自定義的全局組件. 這里使用vuepress提供的插件機制來實現

在.vuepress文件夾下創建components文件夾, 在components下再創建fixed.vue文件

<template>  
  <div class="fixed_container">  
    <div class="tencent_code">  
      <h4>關注作者公眾</h4>  
      <p>和萬千小伙伴一起學習</p>  
      <img src="/ggh.jpg" alt="">  
    </div>  
    <div class="group_code">  
      <h4>加入技術交流群</h4>  
      <p>掃描二維碼 備注  
        <span> 加群</span>  
      </p>  
      <img src="/wechat.jpg" alt="">  
    </div>  
  </div>  
</template>  
<script>  
export default {  
  name: 'fixed'  
}  
</script>  
 ....  
 // 這里省略了部分樣式代碼, 想看全部的小伙伴點開github地址就可以了

然后在配置文件中以插件的形式配置即可:

 // 插件  
  plugins:[  
    {  
      name:"page-plugin",  
      globalUIComponents:["fixed"],   
    }  
  ]

globalUIComponents是用于注入全局的UI, 它以數組的形式接收參數名字, 這里的名字必須與components文件夾下的.vue文件同名, 全局UI就是一個Vue組件; 其實vuepress也提供了一些內置的全局UI組件, 例如:back-to-top, popup, nprogress等.

配置插件

UI插件

配置內置的全局UI,首先需要插件:

yarn add -D @vuepress/plugin-back-to-top @vuepress/plugin-nprogress  
# OR npm install -D @vuepress/plugin-back-to-top  @vuepress/plugin-nprogress

在config.js中配置:

 plugins:[  
   ["@vuepress/back-to-top"], // 返回頂部  
   ["@vuepress/nprogress"],   // 加載進度條  
  ]

這里需要注意一點就是看你項目中是否安裝了vuepress, 由于我之前是全局安裝的, 在項目下還沒有安裝, 插件是依賴于vuepress的, 所有沒有安裝的需要安裝上, 插件才有效.

支持PWA

vuepress還有一個我比較看重的優勢, 就是支持PWA, 當用戶沒有網的情況下,一樣能繼續的訪問我們的網站

在0.x 版本中我們只要配置serviceWorker: true 即可, 但是我們現在使用的是1.2.0版本, 這個版本中已經將這個功能抽離出來作為插件的方式使用, 下面就看一下具體如何使用的:

首先需要安裝插件:

yarn add -D @vuepress/plugin-pwa  
# 或者 npm install -D @vuepress/plugin-pwa

在config.js中配置:

module.exports={  
  plugins: ['@vuepress/pwa', {  
    serviceWorker: true,  
    updatePopup: true  
  }]  
}

注意點:

為了讓你的網站完全地兼容 PWA，你需要:
在 .vuepress/public 提供 Manifest 和 icons
在 .vuepress/config.js 添加正確的 head links

// 配置  
module.exports={  
  head: [  
    ['link', { rel: 'icon', href: `/favicon.ico` }],  
    //增加manifest.json  
    ['link', { rel: 'manifest', href: '/manifest.json' }],  
  ],  
}

manifest.json 文件

{  
  "name": "koala_blog",  
  "short_name": "blog",  
  "version": "1.0.0",  
  "description": "程序員成長指北博主, koala的博客",  
  "manifest_version": 2  
}

配置評論

由于之前有小伙伴說過,『程序員成長指北』公眾號上不能評論，所有這次我在博客中增加了評論功能，剛開始本來打算使用gitTalk, 但是我的博客采用的是部署到自己的服務器, 并沒有部署成 GitHub Pages, 所有我使用的是valine, 它除了評論功能還可以統計閱讀量, 請大家看:

但是我后面也會將gitTalk配置方式寫出來, 方便使用gitTalk的小伙伴

valine 使用

點擊進入 Valine官網，需要先注冊才能使用.

然后創建應用, 獲取APP ID 和APP KEY

應用創建好以后，進入剛剛創建的應用，選擇左下角的設置 > 應用Key，然后就能看到你的APP ID 和APP Key了

安裝:

yarn add vuepress-plugin-comment -D

快速使用

在.vuepress下的config.js插件配置中:

module.exports={  
  plugins: [  
    [  
      'vuepress-plugin-comment',  
      {  
        choosen: 'valine',   
        // options選項中的所有參數，會傳給Valine的配置  
        options: {  
          el: '#valine-vuepress-comment',  
          appId: 'Your own appId',  
          appKey: 'Your own appKey'  
        }  
      }  
    ]  
  ]  
}

appid和appkey為你創建的應用的APP ID 和APP Key

gitTalk 使用

主題樣式修改

vuepress默認是主題顏色是綠色, 如果你不喜歡可以對其進行更改. 如果要對默認設置的樣式進行簡單顏色替換, 或者自定義一些顏色變量供以后使用, 可以在.vuepress/styles下創建palette.styl文件.

你可以調整的顏色變量:

// 顏色  
$textColor ?=#2c3e50  
$accentColor ?=#1e90ff  
$grayTextColor ?=#666  
$lightTextColor ?=#999  
$borderColor ?=#eaecef  
$codeBgColor ?=#282c34  
$arrowBgColor ?=#ccc  
$navbarColor ?=#fff  
$headerColor ?=#fff  
$headerTitleColor ?=#fff  
$nprogressColor ?=$accentColor  
  
// 布局  
$navbarHeight ?=3.6rem  
$bannerHeight ?=12rem  
  
// 響應式 breakpoints  
$MQWide ?=1440px  
$MQNarrow ?=1024px  
$MQMobile ?=768px  
$MQMobileNarrow ?=480px

注意點:
你應該只在這個文件中寫入顏色變量。因為 palette.styl 將在根的 stylus 配置文件的末尾引入，作為配置，它將被多個文件使用，所以一旦你在這里寫了樣式，你的樣式就會被多次復制

如果要添加額外的樣式, vuepress也是提供了簡便方法的, 只要在.vuepress/styles文件下創建一個 index.styl, 在里面寫css樣式即可, 注意文件命名是固定的.

部署

nginx部署

我的博客采用的是靜態文件部署, 感覺方便又便捷, 之前部署在Github Pages上, 訪問速度不是很理想.

第一步: 確保你滿足下面幾個條件

你有一臺服務器
已經安裝好nginx, 如果不會的小伙伴請看如何安裝nginx
解析了一個可用的域名

第二步: 打包你的項目

運行npm run docs:build將項目打包, 默認打包文件在docs/.vuepress/dist目錄下

第三步: 配置nginx

進入到nginx 配置目錄, 找到conf.d文件, 添加下面的配置:

server {  
    listen       80;  
    server_name  www.inode.club;  
  
    root     /usr/web/inode/dist;  
  
    error_log   /var/log/nginx/inode-error.log;  
    access_log  /var/log/nginx/inode-access.log;  
  
    #        deny all;  
    index  index.php index.html index.htm;  
}

server_name 是你解析的域名地址
root 配置文件將訪問的靜態資源文件的路徑

**第四步: 上傳靜態資源文件 **

將靜態資源文件放置到服務器上, 路徑為配置的/usr/web/inode/dist, 可以借助xftp工具上傳也可以通過git克隆, 選擇適合自己的方式就可以

**第五步: 重啟nginx **

# 重啟之前務必檢查配置是否正確  
sudo nginx -t  // 檢查配置  
sudo nginx -s reload  // 重啟

然后你就可以通過域名來訪問你的網站啦!

github部署

將代碼部署到 Github Pages, 你可以看vuepress文檔: vuepress部署, 也參照我這里寫的的步驟來部署

第一步: 首先確保你的項目滿足以下幾個條件:

文檔放置在docs目錄中
使用的是默認的構建輸出位置
vuepress以本地依賴的形式被安裝到你的項目中, 在根目錄package.json文件中包含如下代碼:

// 配置npm scripts  
"scripts": {  
    "docs:dev": "vuepress dev docs",  
    "docs:build": "vuepress build docs"  
 }  
  
// VuePress 以本地依賴的形式被安裝  
"devDependencies": {  
  "vuepress": "^1.2.0"  
}

第二步: 創建github倉庫

在github上創建一個名為blog的倉庫, 并將代碼提交到github上

第三步: 配置倉庫名稱

配置docs/.vuepress/config.js文件中的base, 如果打算發布到https://<USERNAME>.github.io/<REPO>/(也就是說你的倉庫在: https://github.com/<USERNAME>/<REPO> ), 此處我的倉庫為: blog, 則將base按照如下配置即可:

module.exports={  
  base: "/blog/"  
}

第四步: 在項目根目錄中,創建一個如下的腳本文件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:<USERNAME>/<REPO>.git master:gh-pages  
# 例如 git push -f git@github.com:koala-coding/blog.git master:gh-pages   
cd -

第五步: 雙擊 deploy.sh 運行腳本

會自動在我們的 GitHub 倉庫中，創建一個名為 gh-pages 的分支，而我們要部署到 GitHub Pages 的正是這個分支

第六步: setting Github Pages這是最后一步了，在 GitHub 項目點擊 Setting 按鈕，找到 GitHub Pages - Source，選擇 gh-pages 分支，點擊 Save 按鈕后，靜靜地等待它部署完成即可。

紹

介紹

前面我們以及學會了Bootstrap框架和jQuery庫的基本使用方法，并且已經把這兩個軟件包整合到了我們的TFPHP框架里面，接下來我們就可以使用它們去制作用戶管理系統的視圖模板了。

用戶管理系統包含幾個主頁模板：

1）用戶信息表

2）用戶登錄頁面

3）用戶注冊頁面

4）個人資料修改

5）登錄密碼重置

6）用戶頭像上傳

7）安全問題設置

8）綁定郵箱設置

9）忘記密碼頁面

頁面比較多，我們一點點地設計。萬事開頭難，福哥今天下帶著大家完成先完成第一個表單頁面——用戶登錄頁面。

用戶登錄頁面

HTML

登錄頁面的html部分包括一個頁頭和一個表單。

<div class="wrapper">

    <div class="wrapper-header">

        <!-- top bar begin -->
        <div class="row topbar">
            <div class="navbar navbar-text">
                TFUMS v1.0 - TONGFU.net
            </div>
            <ul class="nav ml-md-auto">
                <li class="nav-item"><a href="" class="nav-link">首頁</a></li>
                <li class="nav-item"><a href="" class="nav-link">登錄</a></li>
                <li class="nav-item"><a href="" class="nav-link">注冊</a></li>
            </ul>
        </div>
        <!-- top bar end -->

    </div>

    <div class="wrapper-content">

        <!-- login form begin -->
        <div class="row login-form">
            <div class="col-sm-12">
                <h3 class="text-center">登錄</h3>
                <p>請輸入正確的用戶名和密碼登錄用戶管理系統</p>
                <form>
                    <div class="form-group">
                        <label>用戶名</label>
                        <input class="form-control" type="text" name="user" />
                    </div>
                    <div class="form-group">
                        <label>密碼</label>
                        <input class="form-control" type="password" name="pass" />
                    </div>
                    <div class="form-group overflow-hidden">
                        <label class="float-left">
                            <input type="checkbox" name="remember" value="Y" />
                            保存登錄狀態
                        </label>
                        <a href="" class="float-right">忘記密碼</a>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-sm form-control">登錄</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- login form end -->

    </div>

    <div class="wrapper-footer">

    </div>

</div>

CSS

用戶登錄頁面的CSS也是一個top bar和一個login form兩個部分。

/**
 * top bar
 */
.topbar{
    padding: 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.topbar a{
    color: #333;
}
.topbar a:hover{
    color: #007bff;
}

/**
 * login form
 */
.login-form{
    margin: 0 auto;
    width: 350px;
}

講解

用戶登錄頁面

首先，因為這是TFUMS系統的第一個模板，所以福哥先設計了頁頭的樣式。這個頁頭也會作為其他頁面的共用的頁頭。頁頭使用了bs的nav樣式組的樣式，簡化了自己寫CSS的工作。

其次，表單部分使用了bs的form-group樣式作為每一行表單項的容器樣式，加上label和form-control簡簡單單就把一個漂亮的表單做出來了。

還有福哥使用浮動加清除實現了“保存登錄狀態”和“忘記密碼”的左右布局設計。

最后，福哥給button增加了form-control樣式，使按鈕撐滿了整個容器，看起來比較工整了。

總結

今天我們完成了第一個表單頁面的模板，包括：HTML和CSS部分。有了這個基礎之后，再去制作其他表單頁面就容易多了。

下一課我們將嘗試完成用戶注冊頁面、忘記密碼頁面、登錄密碼重置三個頁面的模板的制作。

https://m.tongfu.net/home/35/blog/512901.html

者：明明如月

審校：藍色漂流瓶

本文講的是啥？

本文為你提供一篇HTML5基本布局模板示例。你可以直接拷貝，粘貼到你的HTML文件中并對其進行修改。

好，說實話，這個本是為我自己準備的html5布局模板，但是你可以拿來用。

譯者注：由于無法直接粘貼代碼，需要的親直接進入尾部提供的鏈接，拷貝下來即可。

雖然本文比較簡單（噴子止步），但是還是一個不錯的模板，可以存起來，或者參考一下人家的結構。

基本的HTML5 模板布局模板：

代碼如下：

圖片格式

帶頭部、尾部和導航的基本的HTML5布局模板

圖片格式

英文源：http://www.codeshare.co.uk/blog/basic-html5-template-layout-example/

在線咨詢

上一篇：改變默認html元素的外觀之 appearance
下一篇：terraform providers 國內不容易那

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「工具」使用 VuePress 快速搭建好看的個人博

什么選擇vuepress

vuepress特性

項目搭建

安裝vuepress

初始化項目

頁面具體內容配置

基本配置

設置封面頁

配置導航欄nav

配置側邊欄slider

1.自動獲取側邊欄內容

2.展示每個頁面的側邊欄

自定義布局內容

配置插件

UI插件

支持PWA

配置評論

valine 使用

gitTalk 使用

主題樣式修改

部署

nginx部署

github部署

紹

用戶登錄頁面

講解

總結

本文講的是啥？

譯者注：由于無法直接粘貼代碼，需要的親直接進入尾部提供的鏈接，拷貝下來即可。

基本的HTML5 模板布局模板：

帶頭部、尾部和導航的基本的HTML5布局模板

您的項目需求