VuePress主題——vuepress-theme-ting清新簡易主題的使用方法

vuepress-theme-ting

• 這是一個vuepress主題，主要功能有博客歸檔分類，以及留言，我的展現等；

主題追求極簡，根據 vuepress 的默認主題修改而成，官方的主題配置仍然適用；

預覽地址

ting主題預覽地址

install

cd ting-Blog
npm install vuepress-theme-ting

修改配置

// .vuepress/config.js
module.exports = {
 title: 'YATING',//網站名稱
    description: '用心寫代碼，不辜負程序員之名',//網站描述
    //head標籤
    head: [
        ['link', { rel: 'stylesheet', href: '/img/logo.ico' }],//注意"/"就是public資源目錄。標籤的logo
    ],
    themeConfig: {
        author:'tinger',
        headImg:'/img/yating.jpg',//頭像
        //導航欄
        nav: [
            { text: '主頁', link: '/' },
            { text: '目錄',link:'/config/catalog'},
            { text: '項目列表', link: '/config/about' },
            { text: 'Github',type:'url', link: 'https://github.com/Chenyating' },
        ],
        lastUpdated: 'Last Updated',
        smoothScroll: true,
        pageNum:5,//目錄每頁顯示條數
        //gitalk留言設置
        gitalk:{
            clientID: '5b8613cfe15e02db85b7',
            clientSecret: 'd4129094c33b8da73e873470fb89aea53dfaf396',
            githubName:'Chenyating'
        },
        footer:'粵ICP備案號：18150247號',
       theme:'ting'//使用vuepress-theme-ting 主題
    }
}

• config/catalog.md

// config/catalog.md
---
layout: catalog
---
# 你的內容

• config/README.md

// config/README.md
---
layout: config
showMessage: false
title: 聯繫方式
---
# 你的內容

• README.md

// /README.md
---
layout: index
showMessage: false
title: vuepress-theme-ting
---
# 你的內容

注意

在根目錄下新建config文件

docs
│ 
├─.vuepress
│    ├─── public
│    └─config.js
│ 
├─config
│     ├─── catalog.md
│     └─── README.md
│ 
├─README.md
└─words：您的文檔

README.md擡頭請寫如下格式：

---
layout: index
title: Home
showMessage: false;
---

layout：默認值爲layout

• catalog：表示當前頁爲catalog頁面；
• index：表示爲主頁；
• layout：默認文章內容（無需設置）

title：文章標題

showMessage：是否顯示留言欄，側邊欄；默認爲true

run

vuepress dev docs

build

vuepress build docs

主頁

目錄

內容

其餘

感謝使用ting主題，給我一個start

github主頁
github項目

若是你在使用該主題出現問題可與我聯繫解決。