Vuepress 快速搭建博客--一款你值得擁有的博客主題

速覽

• [x] 這是一款 Vuepress 主題，集成了博客所需的分類、TAG牆、分頁、評論等功能。
• [x] 主題追求極簡，配置上手簡單，適配移動端。
• [x] 預覽地址
• [x] GitHub地址
• [x] 博客效果展現：

主題使用

安裝主題

建立一個新的項目 my-blog：

mkdir my-blog
cd my-blog

初始化 yarn 或 npm ：

yarn init  或 npm init -y

安裝 vuepress 和 vuepress-theme-melodydl：

yarn add vuepress vuepress-theme-melodydl
或
npm install vuepress vuepress-theme-melodydl

建立 src/_posts 文件夾和 Vuepress 配置文件，項目結構大體爲：

my-blog
├── src # Blog 源文件目錄
│   ├── .vuepress # Vuepress 目錄
│   │   └── public # Vuepress 靜態資源文件
│   │   └── config.js # Vuepress 配置文件
│   └── about # About 頁面 文件夾
│   │   ├── index.md  # about 頁面內容文件
│   └── _posts # 博客文件夾
│       ├── xxx.md
│       ...
└── package.json

在 package.json 加入 script 字段：

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

配置主題

在 src/.vuepress/config.js 中配置 Vuepress 和主題：

module.exports = {
        // 網站 Title
          title: 'Top 的博客 ｜ Top Blog',
          
          // 網站描述
          description: '我的博客',
          
          // 網站 favicon 圖標設置等
          head: [
            ['link', { rel: 'icon', href: '/favicon.ico' }],
            ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }]
          ],
          
          // 使用的主題
          theme: 'melodydl',
          
          // 主題配置
          themeConfig: {
            title: 'Top Blog',

        // 我的信息（沒有或不想設置的，刪掉對應字段便可）
        personalInfo: {
        
        // 名稱
          name: 'melodydl',
          
          // 頭像 public文件夾下
          avatar: '/avatar-top.jpeg',
          
          // 頭部背景圖
          headerBackgroundImg: '/avatar-bg.jpeg',
          
          // 我的簡介 (支持 HTML)
          description: 'In me the tiger sniffs the rose<br/>心有猛虎，細嗅薔薇',
          
           // 電子郵箱
          email: 'facecode@foxmail.com',
          
          // 所在地
          location: 'Shanghai, China'
        },
        // 頂部導航欄內容
        nav: [ 
          {text: 'HOME', link: '/' },
          {text: 'ABOUT', link: '/about/'},
          {text: 'TAGS', link: '/tags/'}      
        ],
        
        // 首頁頭部標題背景圖設置，圖片直接放在 public 文件夾下
        header: {
          home: {
            title: 'Top Blog', 
            subtitle: '好好生活，慢慢相遇', 
            headerImage: '/home-bg.jpeg'
          },
          
          // tag頁面頭部標題背景圖設置，圖片直接放在 public 文件夾下
          tags: {
            title: 'Tags', 
            subtitle: '碰見你花光了我全部的運氣', 
            headerImage: '/tags-bg.jpg'
          },
          
          // 文章詳情頭部背景圖
          postHeaderImg: '/post-bg.jpeg',
        },
        
        // 社交平臺賬號信息 
        sns: {
          // 簡書帳號和連接
          "jianshu": { 
            account: "jianshu", 
            link: "https://www.jianshu.com/u/5dddaee8f351", 
          },
          
          // 新浪 帳號和連接
          "weibo": { 
            account: "",
            link: ""
          },
          
          // 知乎 賬號和連接
          "zhihu": { 
            account: "zhihu",
            link: "https://www.zhihu.com/people/sheng-tang-de-xing-kong"
          },
          
          // Github 賬號和連接
          "github": { 
            account: "github",
            link: "https://github.com/youdeliang"
          }
        },
        // 底部 footer 的相關設置 
        footer: {
          // gitbutton  配置
          gitbtn: {
            // 倉庫地址
            repository: "https://ghbtns.com/github-btn.html?user=youdeliang&repo=vuepress-theme-top&type=star&count=true",
            frameborder: 0,
            scrolling: 0,
            width: "80px",
            height: "20px"
          },
          
          // 添加自定義 footer
          custom: `Copyright &copy; Top Blog 2020 <br /> 
            Theme By <a href="https://www.vuepress.cn/" target="_blank">VuePress</a>
            | <a href="https://www.github.com/youdeliang/" target="_blank">youdeliang</a>`
        },
        
        // 分頁配置
        pagination: {
          // 每頁文章數量
          perPage: 5,
        },
        
        // vssue 評論配置, 若是不須要，能夠設置 comments: false
        comments: {    
          owner: 'youdeliang',
          repo: 'vuepress-theme-melodydl',
          clientId: 'dfba8ecad544784fec1f',
          clientSecret: '1358ac11bc8face24f598601991083e27372988d',
          autoCreateIssue: false,
        },
      }
    }

Vssue 評論插件

若是你知道 Gitment 和 Gitalk，那麼 Vssue 其實和它們實現的功能沒什麼區別 —— 在 Github 的 Issue 系統中存儲評論，在你的頁面上發表和展現評論，還能夠編輯和刪除評論，提供了 Vuepress 的插件（最初的動力就是給本身的 Vuepress 博客開啓評論）。

Vssue 評論插件使用能夠查看文檔手冊。傳送門。

about頁面配置

---
layout: about 
title: About
subtitle: 你能夠很好，但你無需完美
headerImage: /about-bg.jpg # public 文件夾下的圖片
---

下面爲我的信息等內容...

建立博文

在 src/_posts 下建立 md 文件

<!-- _posts/2019-04-01-JS異步編程方案總結.md -->
---
title: "JS異步編程方案總結"
date: 2019-04-01
tags:
  - Promise
  - JavaScript
---

本篇博客主要是對 Javcscript 異步編程方案總結

more 上面的內容是摘要，將顯示在目錄中。

<!-- more -->

more 下面的內容只有瀏覽這篇文章時纔會徹底展現，不會顯示在目錄中。

運行相應 script 生成你的博客網站

# 開發
npm run dev
# 構建
npm run build

使用 GitHub pages 部署

部署具體步驟能夠參考 Vuepress 官方文檔。 傳送門

最後

若是以爲主題好用的話，歡迎點贊和 Star，你的鼓勵是對我莫大的支持，謝謝🙏。