vuepress-theme-onen

🎈A VuePress Theme for oneN

Introduction to the

  • A document-style blog inspired by the oneNote notebook
  • The theme of the blog seeks to simplify the document style, discarding the elements of the mainstream blog, tags, archiving, etc
  • This looks more like a redesign of the default theme, but also adds theme elements

preview

💨 Live Demo

Theme installation

The oneN theme is based on VuePress. First you should create a new VuePress project file. Please read the official VuePress documentation – existing projects for details.

Create the following directory structure in the existing VuePress project file:

Next, install the oneN theme:

yarn add -D vuepress-theme-onen
# or npm install -D vuepress-theme-onen
Copy the code

The topic configuration

First add the following fields to the config file config.js:

// .vuepress/config.js
module.exports = {
  theme: 'onen'  // or 'vuepress-theme-onen'
}
Copy the code

Home page

The theme provides a layout for a Homepage. To use it, specify home: true in YAML Front Matter of the root readme. md.

Here’s an example of how to use it:

# /README.md
---
home: true
message: Welcome to my Blog
actionText: Start -
actionLink: /about
features:
- title: Simple is the highest
  details: In order to Markdown As the center of the project structure to SPA Blog layout for navigation.
- title: VuePress drive
  details: VuePress Generate static pre-renders for each page HTML.
- title: oneN The theme
  details: Since by using Vue Theme of development OneN.
---
Copy the code

Note that the page read by the actionLink field is based on the default page routing scheme of VuePress. For details, please read the official VuePress documentation – Directory Structure.

The relative path of the file Page routing address
/README.md /
/about/README.md /about/
/config.md /config.html

The home page is as follows:

The sidebar

The sidebar is a core component of the oneN theme, and because of the use of tertiary navigation, the configuration is a little more complex, requiring one or two paths to be configured. Configuration via the themeconfig. menu field:

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

As you can see, each object member in the themeConfig. Menu array serves as a first-level navigation, and should contain text, link, and children fields, among which children fields are nested with second-level navigation.

As shown in the sidebar of the tree structure file, the configuration should be as follows:

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

The navigation bar

The navigation bar contains an avatar, a search box, and options links. This can be configured using the related fields of themeConfig:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    avatar: '/avatar.jpg'./ / avatar
    logo: '/logo.png'.// Logo}}Copy the code

Note that you should store static public file resources in the project.vuepress/public directory so that paths like /avatar.jpg and /logo.png can be read correctly.

For details, see VuePress official documentation – Static Resources.

Option links are configured using the themeConfig. Navbar field. Each option should contain the type, title and href attributes, representing the icon, title and link path respectively.

// .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'}].}}Copy the code

The configuration of the navigation bar is as follows:

Music control

In [1.1.1], I added background music to my blog. If you want to add background music to your blog, just add the music field to the config file config.js:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    music: / / links}}Copy the code

Music links can be stored as static resources in.vuepress/public. If so, the corresponding property value should be ‘/ musicfile.mp3’.

You can also load it directly by referring to the music hyperlink. This will ease the load of blog resources, after all, if the blog is deployed to GitHub Pages, the country cannot guarantee stable access.

The state of background music is controlled by the avatar. When the mouse moves into the avatar component, the background music will pause and continue to play when the mouse moves out. If you click the profile picture component, the background music will pause, otherwise continue to play.

The footer

The footer supports custom names and ICONS. You only need to add the following fields to the config.js configuration file:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    name: 'yourName'.footer: {
      spin: true.// Rotate or not: the default is false
      type: 'Chrome'.// Icon style: default 'Chrome'
      theme: 'filled'  // Icon theme: Filled (solid, default), outline (outline)}}}Copy the code

The icon subject has two optional properties: Filled and Outline, which are solid and stroke respectively.

The footer configuration is as follows:

Custom ICONS

OneN uses the Ant-Design-Vue icon library, so you can customize icon styles, such as the navbar and footer mentioned above, by changing the corresponding title property value to the title of other ICONS in the icon library.

Custom colors

If you want to the style of the default default application of the subject matter of simple color replacement, or some color variables for later use, you can create a. Vuepress/styles/palette. Styl file.

You can adjust some color variables:

/ / the default value
/ / text
$textColor = #2c3e50      / / the main
$varColor = #d63200       / / variable
$accentColor = #42b983    / / activity
$warningColor = #ffe564   / / hint
$dangerColor = #ff0000    / / warning

/ / the background
$bgColor = #ffffff        / / the main
$viceBgColor = #f3f5f7    / / auxiliary
$codeBgColor = #282c34    / / code block

/ / gradients
$gradientColor = linear-gradient(to bottom right, $accentColor.#2c3e50c7)
Copy the code

Note that you should only write color variables in this file. Because palette. Styl will be introduced at the end of the stylus configuration file at root, it will be used by multiple files as a configuration, so once you write your style here, your style will be copied multiple times.

MarkDown extension

VuePress provides support for YAML Front Matter out of the box, and you can add fields to each.md file.

For more information on writing with MarkDown in VuePress please read the official VuePress documentation – MarkDown Extension.

Meta information

You should add the following fields to each.md file so that the oneN topic correctly renders the serial number and title in the three-level navigation in the sidebar.

---
index: The serial number
title: The title
---
Copy the code

Primary title

If you need to display the document title in the content page, you can do this by embedding the field {{$frontmatter. Title}} in the document.

The general practice is to display it as a level 1 heading at the beginning of the document:

# {{ $frontmatter.title }}
Copy the code

Refer to option

If you create content that you want to mark as a citation or reprint source, you can add the following fields to each.md file:

---
references:
- author:
  title:
  link:
- author:
  title:
  link:
- .
---
Copy the code

Add several subfields for each reference source. The link can be omitted, and the title will not be rendered as a hyperlink if omitted.