前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在Windows环境下使用Hexo Volantis主题搭建博客

在Windows环境下使用Hexo Volantis主题搭建博客

作者头像
繁华是客
发布2023-03-03 20:05:56
2960
发布2023-03-03 20:05:56
举报
文章被收录于专栏:鱼的爱情看不出泪水

Jekyll这个主题其实非常适合简单新手的,但是我看了几年有点厌倦,所以想试试Hexo。其中Volantis这个主题我比较喜欢,所以马上开工了。

Hexo前安装

1.1 安装Node.js for Windows

下载地址:https://nodejs.org 中国淘宝镜像node.js

1.2 安装Git for Windows

Windows:下载并安装 git 中国淘宝镜像Git

安装Hexo

首先新建一个文件夹用于放这个Hexo博客,在文件夹内右键Git Bash Here即可直接到该文件夹。 或者通过cd的方式切换到这个文件夹。

d:\example

Hexo官网

代码语言:javascript
复制
npm install -g hexo-cli

然后

代码语言:javascript
复制
npx hexo init exampleblog
cd exampleblog
npm install

博客位置:d:\example\exampleblog

配置主题Volantis

在 blog/_config.yml 文件中找到并修改:

theme: volantis

在Git Bash终端输入:

代码语言:javascript
复制
npm i hexo-theme-volantis

下载_config.volantis.yml配置文件到根目录 https://github.com/volantis-x/community/blob/master/_config.volantis.yml 或者从node_module主题文件夹复制_config.yml

基础配置已完成

安装本地搜索功能

volantis主题安装本地搜索:

代码语言:javascript
复制
npm i -S hexo-generator-json-content

之后在_config.volantis.yml里将enable改为true,而service为hexo即可(大约1114行):

代码语言:javascript
复制
############################### Search ############################### > start
# To use hexo search, you need to install the following plugins:
# npm i hexo-generator-json-content
search:
  enable: true
  service: hexo  # hexo
  js:
############################### Search ############################### > end

修改_config.volantis.yml

默认开头博客其实是链接到说明文档,我们将它改为指向主页:

代码语言:javascript
复制
menu:
  - name: 博客
    icon: fas fa-rss
    url: /

默认的分类与标签在v4版本指向是不对的,我们将它修改为blog/… 不过v5版本没有这个问题,不需要改。

代码语言:javascript
复制
- name: 分类
  icon: fas fa-folder-open
  url: categories/
- name: 标签
  icon: fas fa-tags
  url: tags/

添加文件

在source文件夹后面添加文件夹:

代码语言:javascript
复制
.
├── _config.volantis.yml
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _posts
|   └── about
|   └── blog
|   ├── categories
|   └── tags
|   └── friends  
└── themes

如你所见,blog文件夹后面添加两个文件夹(categories,tags),然后再添加index.md 具体可以参考 https://github.com/volantis-x/community/tree/master/source/blog 以及 https://volantis.js.org/v5/page-settings/

代码语言:javascript
复制
# 标签页面
Create file if not exists: source/tags/index.md
---
layout: tag
index: true
title: 所有标签
---

# 列表页面
Create file if not exists: source/mylist/index.md
---
layout: list
group: mylist
index: true
---

背景图设置

在_config.volantis.yml第548行,修改backstretch的enable参数为true

代码语言:javascript
复制
backstretch:
  enable: true

作者名字与头像设置

代码语言:javascript
复制
author:
  avatar: /images/cat_avt.jpg
  name: 繁华是客

侧边栏修改

参考来源: https://volantis.js.org/v4/theme-settings/ #目录7.6

博主侧边栏修改

添加content

代码语言:javascript
复制
blogger:
  class: blogger
  display: [desktop, mobile] # [desktop, mobile]
  avatar: #https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png
  shape: rectangle # circle, rectangle
  url: /about/
  title: 经国序民,正其制度。
  subtitle:
  content:
  我的信仰在空中飘扬:经国序民,正其制度。群之所为事无不成,众之所举业无不胜。

修改icon

普通小icon来源font awesome,大icon来源twemoji,twemoji查找需要先在github release下载再看图查找。 font awesome只需要fas fa-xxx设置即可。查看:

代码语言:javascript
复制
https://fontawesome.com/v5.15/icons

twemoji可以通过jsdelivr直接加载:

代码语言:javascript
复制
https://cdn.jsdelivr.net/gh/twitter/twemoji@13.1.0/assets/svg/xxxx.svg

公告栏修改

添加公告栏

代码语言:javascript
复制
# ---------------------------------------
post:
  class: text
  display: [desktop] # [desktop, mobile]
  header:
    icon: fas fa-plus
    title: 公告信息
    url: /contributors/
  content:
  - '唤醒原系统菜单: Ctrl+右键'
    #- '**如何让自己的文章收录到这里?**<br>官方网站是开源的,只要您的文章与 Hexo 博客搭建相关,就可以自助进行收录,详细的操作步骤请见:「[**发布与分享文章**](/contributors/#发布与分享文章)」。'    
# ---------------------------------------

启用部分文章加密

Hexo-blog-encrypt 运行

代码语言:javascript
复制
npm install --save hexo-blog-encrypt

然后在文章中加入password即可

代码语言:javascript
复制
---
title: Hello World
date: 2016-03-30 21:18:02
password: hello
---

本地运行Hexo命令及主题升级

本地运行hexo请到Hexo基础命令查看。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-05-15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Hexo前安装
    • 1.1 安装Node.js for Windows
      • 1.2 安装Git for Windows
      • 安装Hexo
      • 配置主题Volantis
      • 安装本地搜索功能
      • 修改_config.volantis.yml
      • 添加文件
      • 背景图设置
      • 作者名字与头像设置
      • 侧边栏修改
        • 博主侧边栏修改
        • 修改icon
        • 公告栏修改
        • 启用部分文章加密
        • 本地运行Hexo命令及主题升级
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档