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

最新推荐文章于 2024-08-15 09:23:36 发布

置顶

Vincent-Hy

最新推荐文章于 2024-08-15 09:23:36 发布

阅读量2.6k

点赞数 3

分类专栏： oneN 文章标签： vuepress vuepress 主题 vuepress theme oneN vuepress-theme-onen

本文链接：https://blog.csdn.net/Veminem/article/details/102634564

版权

本文介绍了如何使用VuePress的oneN主题搭建博客，包括主题的简介、预览、安装和配置方法，如首页、侧边栏、导航栏、音乐控件等个性化设置。

摘要由CSDN通过智能技术生成

vuepress-theme-onen

?A VuePress Theme for 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.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 主题