hexo-theme-vitepress:一个简洁轻量的hexo博客主题

博客

前言

那天晚上vitepress和hexo都喝醉了
theme文件夹中的hexo-theme-vitepress是主题，最外层的是hexo-theme-vitepress文件夹是整个hexo，作为demo网站展示，如果单独需要主题请前往Releases
主题功能基本跟vitepress保持一致，后续应该会添加一些自定义功能，例如友链。有需要功能的小伙伴可以提一下issues，可以的话有空我会做的。

截屏

主题使用事项

• 主题自带的两个字体没有压缩处理，有需要请自己进行压缩处理。
• 如果启动显示no layout: index.html请检查自己的站点_config.yml中主题名配置是否正确。
• 本主题默认只有home和post两个页面，使用前记得执行hexo new page post并在hexo站点根目录/source/post/index.md的头部加入layout: post键值，否则post页面无法正常显示。
• 暂时没有国际化(i18n)的功能，由于一些不可抗力原因（懒）暂时没做。

功能介绍

大部分文本可以通过修改主题目录下的_config.yml实现。

菜单

如果不会添加自定义页面见我的hexo教程

menu:
  Home: /
  Post: /post
  在页面显示的名字: url后缀

社交链接

我内置了7个常用平台github、telegram、twitter、discord、bilibili、qq、wechat的图标。
如果需要添加其他平台请自己导入图标，页面大部分图标目录位于hexo-theme-vitepress/source/icon，我使用的是阿里的开源图标库，添加自定义图标时注意不要覆盖掉原来的图标，除非你想全部换掉。

link:
  -
    name: Github    # 这个值只起到一个标识的作用，并不会渲染在页面上
    url:            # 这是社交链接的url
    icon: github2   # 链接的图标名，如果你好奇是怎么实现的可以看看 hexo-theme-vitepress/layout/_partial/header.ejs 的48行

主页的介绍

直接对照修改即可。
需要修改右侧图片请替换hexo-theme-vitepress/source/img/logo.png,导航栏和标签的图标都是使用这个文件。

homeIntroduce:
  one: HEXO
  p1: 快速、简洁且高效的博客框架
  p2: 基于Node.js的静态网站生成器，简单易用支持多种主题插件，具有自动化生成、本地调试和方便部署等特点

主页按钮

homeButton:
  -
    name: Get Started       # 按钮显示文字
    url: /                  # url
    buttonType: brand       # 按钮类型，brand为蓝底白字
  -
    name: View on GitHub
    url: /
    buttonType: alt         # alt为白字黑字

主页容器

虽然这个名字听起来很奇怪，但是vitepress自己的命名就是container 容器。

homeContainer:
  -
    img: img/logo.png                                # 图片
    span: 使用Markdown                               # 标题
    p: 使用Markdown编写你的文章，快速生成HTML网站      # 正文

样式文件

主题使用的是styluscss预处理器。
99%的颜色都可以在hexo-theme-vitepress/source/css/theme.styl中配置，分为明亮两个外观。自定义名称都比较明显，看一眼就能理解这是设置哪的颜色（大概），如果是在看不懂每个部分我都有注释，实在不行就去F12研究一下就知道了。
还有1%的颜色都是不需要配置的。