VuePress oneN 博客主题搭建 —— vuepress-theme-onen

简介

  • 一个偏文档风格的博客,灵感来自于 oneNote 笔记本
  • 博客主题追求简约文档风,抛去主流博客的元素,标签、归档等
  • 这看起来更像是对默认主题的一次改版,但也增加了主题的元素

预览

💨 Live Demo

主题安装

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.mdYAML 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数组中每个对象成员作为一级导航,应包含 textlinkchildren字段,其中 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字段配置,每个选项应该包括 typetitlehref三个属性,分别表示图标、标题、链接路径。

// .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]版本中,我为博客添加了背景音乐功能。如果你想为博客添加背景音乐,只需要在配置文件 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 (描线)
    }
  }
}

其中图标主题有两个属性可选:filledoutline,分别是实心和描线。

配置完的页脚效果如下:

自定义图标

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 鼓励,同时也欢迎参与贡献。

原文链接:segmentfault.com

上一篇:记一次Mac下java环境配置
下一篇:30 道 Vue 前端面试题,内含详细讲解,助你前端vue学习起飞

相关推荐

  • 配置节点表示为静态bower_components?

    Amol M KulkarniConnor Leech(https://stackoverflow.com/users/1933917/amolmkulkarni)提出了一个问题:configure ...

    2 年前
  • 让 Vuepress 支持图片放大功能

    前两天接触到了 ,颜值很高,界面简洁,容易上手。于是打算把博客从 迁移过去。 但是发现图片是不能点击的。 在渲染的时候连 标签都没有添加,不仅不能直接点,也不能放大。

    2 年前
  • 解读 vue-class-component 源码实现原理

    导读 使用过一段时间 class 来定义组件,要用 vuepropertydecorator 提供定义好的装饰器,辅助完成所需功能,对这个过程好奇,就研究了源码。内部主要依靠 vueclasscomp...

    1 个月前
  • 解决vue报错Failed to mount component

    Vue warn: Failed to mount component: template or render function not defined. 今天上班运行vue项目,当我进入昨天写的一个...

    2 年前
  • 解决react:Warning: componentWillMount has been renamed问题

    1. 问题描述 当我新克隆一个react项目,然后安装好依赖包后,启动服务,发现浏览器控制台报如下warning: QQ20191101004128.png(https://img.java...

    7 个月前
  • 给 Vuepress 添加暗色夜间模式

    1. 前言 随着各个系统都加入了「亮色/暗色模式」切换,Chrome 和 Edge 浏览器也支持了根据系统切换主题,作为互联网前沿的弄潮儿(没错,说你呢),咱们也要追上潮流不是,所以通过这篇文章你可以...

    11 天前
  • 精读《Function Component 入门》

    1. 引言 如果你在使用 React 16,可以尝试 Function Component 风格,享受更大的灵活性。但在尝试之前,最好先阅读本文,对 Function Component 的思维模...

    1 年前
  • 白话速述 styled-components 4.x 的使用

    废话不多话,来上车! 安装: 简述使用: 1、 创建全局的样式: 首先创建一个JS文件,例如style.js ①:import { createGlobalStyle } from 'st...

    1 年前
  • 用slot和component实现表单共用

    业务需求 在oa开发中,有许多流程,每个流程里都会有很多字段,比如流程标题、拉下选择,附件等等,有些是每个流程都会有的,有些是特有的,按常规的方法开发,就为为一个流程写一个表单,校验,提交。

    1 年前
  • 浅谈 TypeScript - PureComponent

    我们都知道 的刷新机制,因此如果每一次的变动都要刷新一下界面,这对于应用程序的性能来说是一个非常不科学的事情,因此在没有 之前,我们都需要手动使用 来确认到底要不要刷新界面,如: 如果返回...

    2 年前

官方社区

扫码加入 JavaScript 社区