• 簡介
• 預(yù)覽
• 主題安裝
• 主題配置
  • 側(cè)邊欄
  • 導(dǎo)航欄
  • 首頁
  • 頁腳
  • 音樂控件
  • 自定義圖標(biāo)
  • 自定義顏色
• MarkDown 擴展
  • 參考選項
  • 一級標(biāo)題
  • 元信息

簡介

• 一個偏文檔風(fēng)格的博客，靈感來自于 oneNote 筆記本
• 博客主題追求簡約文檔風(fēng)，拋去主流博客的元素，標(biāo)簽、歸檔等
• 這看起來更像是對默認(rèn)主題的一次改版，但也增加了主題的元素
• 主題地址：GitHub

預(yù)覽

?? Live Demo

主題預(yù)覽

主題安裝

oneN 主題基于 VuePress，首先你應(yīng)該新建一個 VuePress 項目文件。詳細(xì)請閱讀 VuePress 官方文檔 - 現(xiàn)有項目。

在現(xiàn)有的 VuePress 項目文件新建如下目錄結(jié)構(gòu)：

初始目錄結(jié)構(gòu)

接著安裝 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 為中心的項目結(jié)構(gòu)，以 SPA 為導(dǎo)航的博客布局。
- title: VuePress 驅(qū)動
  details: VuePress 為每個頁面預(yù)渲染生成靜態(tài)的 HTML。
- title: oneN 主題
  details: 自搭使用 Vue 開發(fā)的主題 oneN。
---

注意，actionLink 字段讀取的頁面基于 VuePress 默認(rèn)的頁面路由方案。詳細(xì)請閱讀 VuePress 官方文檔 - 目錄結(jié)構(gòu)。

文件的相對路徑	頁面路由地址
/README.md	/
/about/README.md	/about/
/config.md	/config.html

配置完的首頁效果如下：

首頁效果

側(cè)邊欄

側(cè)邊欄是 oneN 主題的核心組件，因為使用三級導(dǎo)航，配置內(nèi)容稍許復(fù)雜，需要配置一二級的路徑。通過 themeConfig.menu 字段進行配置：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    menu: [
      {
        text: '',
        link: '',
        children: [
          { text: '', link: '' },
          { text: '', link: '' },
          ...
        ]
      },
      ...
    ]
  }
}

可以看到 themeConfig.menu 數(shù)組中每個對象成員作為一級導(dǎo)航，應(yīng)包含 text、link、children 字段，其中 children 字段又嵌套著二級導(dǎo)航。

側(cè)邊欄目錄結(jié)構(gòu)

如上圖所示樹形結(jié)構(gòu)文件的側(cè)邊欄，配置內(nèi)容應(yīng)如下：

// .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' },
        ]
      },
    ]
  }
}

導(dǎo)航欄

導(dǎo)航欄包含頭像、搜索框和選項鏈接。可以通過 themeConfig 的相關(guān)字段進行配置：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    avatar: '/avatar.jpg',  // 頭像
    logo: '/logo.png',      // Logo
  }
}

注意，你應(yīng)該在項目 .vuepress/public 目錄下存放靜態(tài)公共文件資源，以使 /avatar.jpg、/logo.png 這樣的路徑能夠被正確讀取。

詳細(xì)請閱讀 VuePress 官方文檔 - 靜態(tài)資源。

選項鏈接通過 themeConfig.navbar 字段配置，每個選項應(yīng)該包括 type、title、href 三個屬性，分別表示圖標(biāo)、標(biāo)題、鏈接路徑。

// .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'
      }
    ],
  }
}

配置完的導(dǎo)航欄效果如下：

導(dǎo)航欄效果

音樂控件

在 [1.1.1] 版本中，我為博客添加了背景音樂功能。如果你想為博客添加背景音樂，只需要在配置文件 config.js 中添加 music 字段即可：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    music: // 鏈接
  }
}

音樂鏈接可以作為靜態(tài)資源存放在 .vuepress/public 目錄下，若如此做，對應(yīng)的屬性值應(yīng)該為 ‘/musicFile.mp3’。

（推薦） 你也可以通過引用音樂超鏈接，直接加載。這樣做可以緩解博客資源加載壓力，畢竟如果是將博客部署到 GitHub Pages 中的話，國內(nèi)無法保證穩(wěn)定訪問。

背景音樂的狀態(tài)通過頭像控制，當(dāng)鼠標(biāo)移入頭像組件時，背景音樂將暫停，移出則繼續(xù)播放。若單擊頭像組件，背景音樂將暫停，反之繼續(xù)播放。

頁腳

頁腳支持自定義名稱和圖標(biāo)，只需要在配置文件 config.js 中添加如下字段：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    name: 'yourName',
    footer: {
      spin: true,      // 是否旋轉(zhuǎn): 默認(rèn) false
      type: 'Chrome',  // 圖標(biāo)樣式: 默認(rèn) `Chrome`
      theme: 'filled'  // 圖標(biāo)主題: filled (實心, 默認(rèn)), outline (描線)
    }
  }
}

其中圖標(biāo)主題有兩個屬性可選：filled、outline，分別是實心和描線。

配置完的頁腳效果如下：

頁腳效果

自定義圖標(biāo)

oneN 使用 ant-design-vue 圖標(biāo)庫，因此你可以自定義圖標(biāo)樣式，如上面提到的導(dǎo)航欄 navbar 和頁腳 footer ，只需將其對應(yīng) title 屬性值換成圖標(biāo)庫中其他圖標(biāo)的 title 即可。

自定義顏色

如果要對主題默認(rèn)預(yù)設(shè)的樣式應(yīng)用簡單的顏色替換，或者定義一些顏色變量供以后使用，你可以創(chuàng)建一個 .vuepress/styles/palette.styl 文件。

你可以調(diào)整一些顏色變量：

// 默認(rèn)值
// 文本
$textColor = #2c3e50      // 主要
$varColor = #d63200       // 變量
$accentColor = #42b983    // 活動
$warningColor = #ffe564   // 提示
$dangerColor = #ff0000    // 警告

// 背景
$bgColor = #ffffff        // 主要
$viceBgColor = #f3f5f7    // 輔助
$codeBgColor = #282c34    // 代碼塊

// 漸變色
$gradientColor = linear-gradient(to bottom right, $accentColor, #2c3e50c7)

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

MarkDown 擴展

VuePress 提供了對 YAML front matter 開箱即用的支持，你可以在每個 .md 文件添加相應(yīng)的字段。

更多關(guān)于在 VuePress 使用 MarkDown 寫作的內(nèi)容請閱讀 VuePress 官方文檔 - MarkDown 擴展。

元信息

你應(yīng)該為每個 .md 文件添加如下字段，以致 oneN 主題在側(cè)邊欄的三級導(dǎo)航中正確渲染出序號和標(biāo)題。

---
index: 序號
title: 標(biāo)題
---

一級標(biāo)題

如果需要在內(nèi)容頁面中顯示文檔標(biāo)題，你可以通過在文檔中嵌入字段 {{ $frontmatter.title }}。

一般的做法是在文檔開頭作為一級標(biāo)題顯示：

# {{ $frontmatter.title }}

參考選項

如果你所創(chuàng)建的內(nèi)容想要標(biāo)記引用出處或轉(zhuǎn)載來源，你可以在每個 .md 文件添加如下字段：

---
references:
- author:
  title:
  link:
- author:
  title:
  link:
- ...
---

對應(yīng)幾個引用出處就添加幾個子字段。其中 link 可以省略，若省略標(biāo)題將不會被渲染為超鏈接。

如果你也喜歡這款主題，感激小小 Star 鼓勵，同時也歡迎參與貢獻。