Github+Hexo+Volantis个人主页个性化搭建（进阶版）

本篇文章为在第一篇搭建了基础的个人主页基础上，对主页进行个性化的修改和信息填充的过程记录。

参考教程：

Volantis主题配置(转载)

https://yaelcassini.github.io/2022/06/15/Volantis-Configuration/

前置教程：

Github+Hexo+Volantis个人主页搭建流程

https://yaelcassini.github.io/2022/06/08/Website-Building-Tutorials/

制作网站icon

可以在网上找一个自己喜欢的图案，最好简单一点，我用的是一个小狐狸头，然后可以直接搜索在线转换，把jpg或者png格式的图片转化成ico格式，就可以作为网站的icon了，也是先上传到图床，然后用链接调用。

制作自己的个人头像

可以在网上找一张图片，上传到图床，后面会作为在主页的个人头像出现在侧边栏。

配置个人主页Title

我给自己的主页起名叫不知岛，英文Unknown Island。

配置_config.yml，这部分代码包括title、subtitle、description、author、favicon的配置。

# Site
title: Unknown Island
subtitle: 'Cassini’s Blog'
description: '赛博垃圾分离企划'
keywords:
author: Cassini
language:
  - zh-CN
  - en
  - zh-HK
  - zh-TW
timezone: ''
# 网站图标，更多尺寸等图标请使用import方式批量导入
favicon: https://fastly.jsdelivr.net/gh/YaelCassini/MyGraphBed/blog/logo_64.ico

配置主页封面

在_config.volantis.yml文件中，这部分配置主要修改了title、subtitle以及features，features中是首页封面的跳转栏及其地址、icon配置。

############################### Cover ############################### > start
cover:
  height_scheme: full # full, half
  layout_scheme: dock # blank (留白), search (搜索), dock (坞), featured (精选), focus (焦点)
  display:
    home: true
    archive: true
    others: true # can be written in front-matter 'cover: true'
  background: # https://fastly.jsdelivr.net/gh/YaelCassini/MyGraphBed/blog/liuyao.jpg
  logo: # https://fastly.jsdelivr.net/gh/YaelCassini/MyGraphBed/blog/logo_128_2.png
  title: 'Unknown Island'
  subtitle: 'Cassini’s Blog'
  search: A Wonderful Theme for Hexo # search bar placeholder
  features:
    - name: 主页
      icon: #
      img: https://fastly.jsdelivr.net/gh/twitter/twemoji@13.0.0/assets/svg/1f3d5.svg # https://fastly.jsdelivr.net/gh/twitter/twemoji@13.0.2/assets/svg/1f3d8.svg #  https://fastly.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f389.svg
      url: /
    - name: 分类
      icon: #
      img: https://fastly.jsdelivr.net/gh/twitter/twemoji@13.0.2/assets/svg/1f4c2.svg #  https://fastly.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f516.svg
      url: categories/
    - name: 标签
      icon: #
      img: https://fastly.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f516.svg # volantis-static/media/twemoji/assets/svg/1f516.svg
      url: tags/
    - name: 归档
      icon: #
      img: https://fastly.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f5c3.svg # volantis-static/media/twemoji/assets/svg/1f5c3.svg
      url: /archives/
    - name: 友链
      icon: #
      img: https://fastly.jsdelivr.net/gh/twitter/twemoji@13.0.0/assets/svg/1f37b.svg # https://fastly.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1faf1-1f3fc-200d-1faf2-1f3fe.svg #  https://fastly.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f389.svg
      url: friends/
    - name: 关于
      icon: #
      img: https://fastly.jsdelivr.net/gh/twitter/twemoji@13.0.2/assets/svg/2139.svg # https://fastly.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f5c3.svg
      url: about/
    # - name: 源码
    #   icon: #
    #   img: volantis-static/media/twemoji/assets/svg/1f9ec.svg #  https://fastly.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f9ec.svg
    #   url: https://github.com/YaelCassini/YaelCassini.github.io
############################### Cover ############################### > end

配置侧边栏

在_config.volantis.yml文件中，配置包括：

position：侧边栏出现在页面左边还是右边
for_page：打开网页固有页面时（比如主页，关于页面）侧边栏显示类别，此处设置为显示博主卡片、分类卡片、标签卡片。
for_post：打开文章页面时侧边栏显示类别，此处设置为显示博主卡片、分类卡片、标签卡片。
avatar：侧边栏博主卡片的头像

social：侧边栏博主卡片下方的链接（邮箱、github等）

############################### Sidebar ############################### > start
sidebar:
  position: left # left right
  # 主页、分类、归档等独立页面
  for_page: [blogger, category, tagcloud]
  # layout: docs/post 这类文章页面
  for_post: [blogger, toc]
  # 侧边栏组件库
  widget_library:
    # ---------------------------------------
    # blogger info widget
    blogger:
      class: blogger
      display: [desktop, mobile] # [desktop, mobile]
      avatar: https://fastly.jsdelivr.net/gh/YaelCassini/MyGraphBed/blog/avatar_1024.jpg
      shape: rectangle # circle, rectangle
      url: about/
      title: Yael Cassini
      subtitle: 
      jinrishici: true # Poetry Today. You can set a string, and it will be displayed when loading fails.
      social:
        - icon: fa-solid fa-home
          url: /
        - icon: fa-solid fa-envelope
          url: mailto:3247365200@qq.com
        - icon: fab fa-github
          url: https://github.com/YaelCassini
        - icon: fa-solid fa-headphones-alt
          url: /

navbar是网页顶部的跳转栏，这里的配置主要有logo和menu，menu包括name、icon、url的配置，分别是显示文字，icon图标，和跳转链接。

navbar:
  visiable: auto # always, auto
  logo:  # choose [img] or [icon + title]
    img: https://fastly.jsdelivr.net/gh/YaelCassini/MyGraphBed/blog/logo_128.png
    # icon: https://fastly.jsdelivr.net/gh/YaelCassini/MyGraphBed/blog/logo_256.ico
    # title: 'Unknown Island'
  menu:
    - name: 主页
      icon: fa-solid 	fa-home
      url: /
    - name: 分类
      icon: fa-solid fa-folder-open
      url: categories/
    - name: 标签
      icon: fa-solid fa-tags
      url: tags/
    - name: 归档
      icon: fa-solid fa-archive
      url: archives/
    - name: 友链
      icon: fa-solid fa-users
      url: friends/
    - name: 关于
      icon: fa-solid fa-info-circle
      url: about/
    - name: 暗黑模式
      icon: fa-solid fa-moon
      toggle: darkmode

配置网站轮播背景

提前找好喜欢的背景图片上传到图床，在_config.volantis.yml文件中的parallax标签把enable设置为true，配置images链接，duration表示轮播间隔，这里我也忘记为什么使用webp格式以及png格式行不行了。

# 视差滚动效果 Slide Background
parallax:
  enable: true
  position: fixed       # cover: sticky on the cover.   fixed: Fixed as background for the site.
  shuffle: true         # shuffle playlist
  duration: 10000       # Duration (ms)
  fade: 1500            # fade duration (ms) (Not more than 1500)
  images:               # For personal use only. At your own risk if used for commercial purposes !!!
    - https://fastly.jsdelivr.net/gh/YaelCassini/MyGraphBed/blog/background/001.webp
    - https://fastly.jsdelivr.net/gh/YaelCassini/MyGraphBed/blog/background/002.webp
    - https://fastly.jsdelivr.net/gh/YaelCassini/MyGraphBed/blog/background/003.webp
    - ···

配置网站歌单

1. 创建歌单

在网易云或者qq音乐新建歌单，并在歌单的分享链接中摘取歌单的id编号，比如本站使用的是qq音乐，歌单编号为：8849727324。

2. 配置到volantis

在_config.volantis.yml文件中的aplayer标签下配置，以本站为例，需要：

把enable的值修改为true(这里我不记得默认是true还是false了)
把server的值修改为tencent
把type的值修改为playlist
把id修改为8849727324

但是该方法有一个问题是不能加入vip权限的音乐，并且由于图床是部署在github上面的，有时候需要外网访问，但是歌单都是内网，有时候会出现网络代理问题。

后面该歌单还是出现了问题，一直无法播放，报错信息为：”An auido error has occurred,player will skip forward in 2 seconds.”。最后无奈跟随一篇博客把原来的qq音乐歌单换成了网易云音乐歌单。

配置关于页面

这部分我没有做很多设计，只简单写了一下自己的教育经历，放了一些其他平台的账号链接，不过每个平台的icon需要自己提前找好。链接格式为：

1	{% link Github::https://github.com/YaelCassini::https://fastly.jsdelivr.net/gh/YaelCassini/MyGraphBed/icon/github_rgba.png %}

Github为链接标题
后面跟跳转链接
链接后::再跟icon链接。