簡介
- 一個偏文檔風格的博客，靈感來自於 oneNote 筆記本
- 博客主題追求簡約文檔風，拋去主流博客的元素，標籤、歸檔等
- 這看起來更像是對默認主題的一次改版，但也增加了主題的元素
預覽
主題安裝
oneN 主題基於 VuePress，首先你應該新建一個 VuePress 項目文件。詳細請閱讀 VuePress 官方文檔 - 現有項目。
在現有的 VuePress 項目文件新建如下目錄結構：
接着安裝 oneN 主題：
yarn add -D vuepress-theme-onen
# or npm install -D vuepress-theme-onen主題配置
首先在配置文件 config.js 中添加如下字段：
// .vuepress/config.js
module.exports = {
theme: 'onen' // or 'vuepress-theme-onen'
}首頁
主題提供了一個首頁 (Homepage) 的佈局。想要使用它，需要在根級 README.md 的 YAML front matter 指定 home: true。
以下是一個如何使用的例子：
# /README.md
---
home: true
message: Welcome to my Blog
actionText: Start →
actionLink: /about
features:
- title: 簡潔至上
details: 以 Markdown 爲中心的項目結構，以 SPA 爲導航的博客佈局。
- title: VuePress 驅動
details: VuePress 爲每個頁面預渲染生成靜態的 HTML。
- title: oneN 主題
details: 自搭使用 Vue 開發的主題 oneN。
---注意，
actionLink字段讀取的頁面基於 VuePress 默認的頁面路由方案。詳細請閱讀 VuePress 官方文檔 - 目錄結構。
文件的相對路徑 頁面路由地址 /README.md / /about/README.md /about/ /config.md /config.html
配置完的首頁效果如下：
側邊欄
側邊欄是 oneN 主題的核心組件，因爲使用三級導航，配置內容稍許複雜，需要配置一二級的路徑。通過 themeConfig.menu 字段進行配置：
// .vuepress/config.js
module.exports = {
themeConfig: {
menu: [
{
text: '',
link: '',
children: [
{ text: '', link: '' },
{ text: '', link: '' },
...
]
},
...
]
}
}可以看到 themeConfig.menu 數組中每個對象成員作爲一級導航，應包含 text、link、children 字段，其中 children 字段又嵌套着二級導航。
如上圖所示樹形結構文件的側邊欄，配置內容應如下：
// .vuepress/config.js
module.exports = {
themeConfig: {
menu: [
{
text: 'postA',
link: '/post/postA',
children: [
{ text: 'postA1', link: '/postA-1' },
{ text: 'postA2', link: '/postA-2' },
]
},
{
text: 'postB',
link: '/post/postB',
children: [
{ text: 'postB1', link: '/postB-1' },
]
},
]
}
}導航欄
導航欄包含頭像、搜索框和選項鍊接。可以通過 themeConfig 的相關字段進行配置：
// .vuepress/config.js
module.exports = {
themeConfig: {
avatar: '/avatar.jpg', // 頭像
logo: '/logo.png', // Logo
}
}注意，你應該在項目.vuepress/public目錄下存放靜態公共文件資源，以使/avatar.jpg、/logo.png這樣的路徑能夠被正確讀取。詳細請閱讀 VuePress 官方文檔 - 靜態資源。
選項鍊接通過 themeConfig.navbar 字段配置，每個選項應該包括 type、title、href 三個屬性，分別表示圖標、標題、鏈接路徑。
// .vuepress/config.js
module.exports = {
themeConfig: {
navbar: [
{
type: 'home',
title: 'Home',
href: '/'
},
{
type: 'user',
title: 'About',
href: '/about'
},
{
type: 'github',
title: 'GitHub',
href: 'https://github.com/Veminem'
}
],
}
}配置完的導航欄效果如下：
音樂控件
在 [[1.1.1]](https://github.com/Veminem/vu... 版本中，我爲博客添加了背景音樂功能。如果你想爲博客添加背景音樂，只需要在配置文件 config.js 中添加 music 字段即可：
// .vuepress/config.js
module.exports = {
themeConfig: {
music: // 鏈接
}
}音樂鏈接可以作爲靜態資源存放在 .vuepress/public 目錄下，若如此做，對應的屬性值應該爲 ‘/musicFile.mp3’。
（推薦） 你也可以通過引用音樂超鏈接，直接加載。這樣做可以緩解博客資源加載壓力，畢竟如果是將博客部署到 GitHub Pages 中的話，國內無法保證穩定訪問。
背景音樂的狀態通過頭像控制，當鼠標移入頭像組件時，背景音樂將暫停，移出則繼續播放。若單擊頭像組件，背景音樂將暫停，反之繼續播放。
頁腳
頁腳支持自定義名稱和圖標，只需要在配置文件 config.js 中添加如下字段：
// .vuepress/config.js
module.exports = {
themeConfig: {
name: 'yourName',
footer: {
spin: true, // 是否旋轉: 默認 false
type: 'Chrome', // 圖標樣式: 默認 `Chrome`
theme: 'filled' // 圖標主題: filled (實心, 默認), outline (描線)
}
}
}其中圖標主題有兩個屬性可選：filled、outline，分別是實心和描線。
配置完的頁腳效果如下：
自定義圖標
oneN 使用 ant-design-vue 圖標庫，因此你可以自定義圖標樣式，如上面提到的導航欄 navbar 和頁腳 footer ，只需將其對應 title 屬性值換成圖標庫中其他圖標的 title 即可。
自定義顏色
如果要對主題默認預設的樣式應用簡單的顏色替換，或者定義一些顏色變量供以後使用，你可以創建一個 .vuepress/styles/palette.styl 文件。
你可以調整一些顏色變量：
// 默認值
// 文本
$textColor = #2c3e50 // 主要
$varColor = #d63200 // 變量
$accentColor = #42b983 // 活動
$warningColor = #ffe564 // 提示
$dangerColor = #ff0000 // 警告
// 背景
$bgColor = #ffffff // 主要
$viceBgColor = #f3f5f7 // 輔助
$codeBgColor = #282c34 // 代碼塊
// 漸變色
$gradientColor = linear-gradient(to bottom right, $accentColor, #2c3e50c7)注意，你應該只在這個文件中寫入顏色變量。因爲 palette.styl 將在根的 stylus 配置文件的末尾引入，作爲配置，它將被多個文件使用，所以一旦你在這裏寫了樣式，你的樣式就會被多次複製。
MarkDown 擴展
VuePress 提供了對 YAML front matter 開箱即用的支持，你可以在每個 .md 文件添加相應的字段。
更多關於在 VuePress 使用 MarkDown 寫作的內容請閱讀 VuePress 官方文檔 - MarkDown 擴展。
元信息
你應該爲每個 .md 文件添加如下字段，以致 oneN 主題在側邊欄的三級導航中正確渲染出序號和標題。
---
index: 序號
title: 標題
---一級標題
如果需要在內容頁面中顯示文檔標題，你可以通過在文檔中嵌入字段 {{ $frontmatter.title }}。
一般的做法是在文檔開頭作爲一級標題顯示：
# {{ $frontmatter.title }}參考選項
如果你所創建的內容想要標記引用出處或轉載來源，你可以在每個 .md 文件添加如下字段：
---
references:
- author:
title:
link:
- author:
title:
link:
- ...
---對應幾個引用出處就添加幾個子字段。其中 link 可以省略，若省略標題將不會被渲染爲超鏈接。
如果你也喜歡這款主題，感激小小 Star 鼓勵，同時也歡迎參與貢獻。