Hexo主题 —— Sakura 入门

3,149 阅读8分钟

Hexo主题 —— Sakura 入门

使用NexT主题有一段时间了,做了很多魔改,舍不得放弃。但是看别人的Sakura主题好香,又觉得眼馋

呵,男人o( ̄▽ ̄)o

所以我决定再白嫖一个.github.io的站点,这次使用Sakura主题:dragonbaby308.github.io/


(一)安装Hexohexo-theme-sakura

参考《静态博客Hexo搭建教程(本地、服务器两开花)》《唯美主题hexo-sakura使用教程》

mkdir HexoSakura
//默认你已经安装好了npm和hexo-cli
hexo init

根据作者的建议,直接访问github.com/honjun/hexo…获取压缩包,解压到博客根目录(注意,不是主题目录!),替换原有文件,然后运行npm i安装依赖。
到这一步,使用hexo clean && hexo g && hexo s就已经可以看到站点效果了,不过我们还需要进行一系列自定义的配置。


(二)配置

1.站点配置文件_config.yaml

(1)简介

# Site
# 主标题:这个是你鼠标放标签页显示的名称,主页的名称要在主题配置文件中设置
title: DragonBaby308
# 副标题:不展示
subtitle:
# 描述:不展示
description:
keywords:
# 作者名
author: DragonBaby308
# 语言
language: zh-CN       # 简体中文
timezone:

(2)部署

默认你已经配置好了GitHubSSH,并且本地Git也已经配置用户和邮箱。
参考《Pro Git》

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/DragonBaby308/DragonBaby308.github.io.git        #你的github.io的网址
  branch: master

(3)备份

首先需要在你远程GitHub仓库新建一个backup分支。

# backup
backup:
  type: git
  message: https://DragonBaby308.github.io/  备份
  repository:
    github: https://github.com/DragonBaby308/DragonBaby308.github.io.git,backup

配置完成后每次通过hexo clean && hexo b && hexo d -g就可以完成部署和备份。


2.主题配置文件theme/Sakura/_config.yaml

# site name
# 站点名前缀,可以省略
prefixName: 想进阿里の
# 站点名,显示为:前缀+站点名
siteName: DB3

# favicon and site master avatar
# 标签页小图标:
favicon: XXXXX
# 头像:
avatar: XXXXX

# 站点URL
url: https://DragonBaby308.github.io/

# 描述
description: 2019年只剩下尾巴了,希望2020年春招可以进ATM!

# 站点CDN,可以为空,图片需要填完整路径
cdn: https://cdn.jsdelivr.net/gh/DragonBaby308/cdn@1.0

# 开启pjax
pjax: 1

# 公告
notice: 我不玩游戏,我定规则。

# 懒加载的加载中图片
lazyloadImg: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg

# 站点菜单配置【暂时保持,以后慢慢改】
menus:
  首页: { path: /, fa: fa-fort-awesome faa-shake }
  归档: { path: /archives, fa: fa-archive faa-shake, submenus: {
    技术: {path: /categories/技术/, fa: fa-code },
    生活: {path: /categories/生活/, fa: fa-file-text-o },
    资源: {path: /categories/资源/, fa: fa-cloud-download },
    随想: {path: /categories/随想/, fa: fa-commenting-o },
    转载: {path: /categories/转载/, fa: fa-book }
  } }
  清单: { path: javascript:;, fa: fa-list-ul faa-vertical, submenus: {
    书单: {path: /tags/悦读/, fa: fa-th-list faa-bounce },
    番组: {path: /bangumi/, fa: fa-film faa-vertical },
    # 歌单: {path: /music/, fa: fa-headphones },
    图集: {path: /tags/图集/, fa: fa-photo }
  } }
  留言板: { path: /comment/, fa: fa-pencil-square-o faa-tada }
  友人帐: { path: /links/, fa: fa-link faa-shake }
  赞赏: { path: /donate/, fa: fa-heart faa-pulse }
  关于: { path: /, fa: fa-leaf faa-wrench , submenus: {
    我: {path: /about/, fa: fa-meetup},
    # 主题: {path: /theme-sakura/, fa: iconfont icon-sakura },
    # Lab: {path: /lab/, fa: fa-cogs },
  } }
  # 客户端: { path: /client/, fa: fa-android faa-vertical }
  RSS: { path: /atom.xml, fa: fa-rss faa-pulse }

# 背景图片
bg:
  - XXXXX
  - XXXXX
  - XXXXX
  - https://cdn.jsdelivr.net/gh/yremp/cdn@2.1.5/img/cover/(2).jpg.webp
  - https://cdn.jsdelivr.net/gh/yremp/cdn@2.1.5/img/cover/(3).jpg.webp
  - https://cdn.jsdelivr.net/gh/yremp/cdn@2.1.5/img/cover/(4).jpg.webp
  - https://cdn.jsdelivr.net/gh/yremp/cdn@2.1.5/img/cover/(5).jpg.webp
  - https://cdn.jsdelivr.net/gh/yremp/cdn@2.1.5/img/cover/(7).jpg.webp

# 背景图片样式:
# 空:原图
# filter-dim:阴影
# filter-grid:横条
# filter-dot:点点
bgclass: filter-dot

# 快速导航面板
# url:链接,如果是本站链接,可以简写
# title:大标题
# desc:描述
# img:背景图
startdash:
  # - {url: /theme-sakura/, title: Sakura, desc: 本站 hexo 主题, img: /img/startdash/sakura.md.png}
  - {url: https://space.bilibili.com/24837083, title: Bilibili, desc: 乾杯!!!, img: /img/startdash/bilibili.jpg}


# your site build time or founded date
# 建站时间
siteBuildingTime: 12/12/2019


# 社交按钮PC端
# url:链接
# qrcode:二维码
# img:图标
social:
  GitHub: {url: http://github.com/DragonBaby308, img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/social/github.png}
  掘金: {url: https://juejin.cn/user/4406498335663085, img: XXXXX}
  BiliBili: {url: https://space.bilibili.com/24837083, img: XXXXX}
  WeChat: {url: /#, qrcode: XXXXX, img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/social/wechat.png}
  QQ: {url: /#, qrcode: XXXXX, img: https://cdn.jsdelivr.net/gh/yremp/cdn@2.1.5/img/social/qq.png}

# 社交按钮移动端
# url:链接
# fontawesome:图标
# color:颜色
msocial:
  github: {url: http://github.com/DragonBaby308, fa: fa-github, color: 333}
  # weibo: {url: http://weibo.com/mashirozx?is_all=1, fa: fa-weibo, color: dd4b39}
  # qq: {url: https://wpa.qq.com/msgrd?v=3&uin=954655431&site=qq&menu=yes, fa: fa-qq, color: 25c6fe}

# 赞赏二维码
donate:
  alipay: XXXXX
  wechat: XXXXX

# 首页视频
movies:
  # url前缀
  url: https://cdn.jsdelivr.net/gh/DragonBaby308/cdn@1.0/movie/
  # 多个视频用逗号隔开,随机获取。支持的格式目前已知MP4,Flv
  name: fujiko.mp4

# 左下角aplayer播放器配置
# id:歌单ID   ——    在歌单的URL中会有体现,自己观察
# server:音乐服务器    ——  tencent:QQ音乐
# autoplay:是否自动播放
aplayer:
  id: 3090329008
  server: tecent
  type: playlist
  fixed: true
  mini: false
  autoplay: false
  loop: all
  order: random
  preload: auto
  volume: 0.7
  mutex: true

# Valine评论
valine: true
v_appId: XXXXX
v_appKey: XXXXX

3.分类/标签页配置theme/Sakura/languages/zh-cn.yaml

# category   
# 分类名称:需要和theme/Sakura/_config.yaml的menus属性对应
# 对应链接为:/categories
技术:
    #中文标题
    zh: 野生技术协会
    # 英文标题
    en: Geek  Only for Love
    # 封面图片
    img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/coding.jpg
算法:
    zh: 程序 = 数据结构 + 算法
    en: Algorithm
    img: https://cdn.jsdelivr.net/gh/DragonBaby308/cdn@1.0/img/categories/Algorithm.jpg
Java基础:
    zh: Java是世界上最好的语言!来战!
    en: Java
    img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/coding.jpg
Linux:
    zh: Talk is cheap, show me the code.
    en: Linux
    img: https://cdn.jsdelivr.net/gh/DragonBaby308/cdn@1.0/img/categories/Linux.jpg
随笔:
    zh: 我有一个埋在心里的梦想,就是成为一个畅销小说家,没有和几个人说过。
    en: Code & Poetry.
    img: https://cdn.jsdelivr.net/gh/DragonBaby308/cdn@1.0/img/categories/Novel.jpg
设计模式:
    zh: 设计模式
    en: Design Pattern
    img: https://cdn.jsdelivr.net/gh/DragonBaby308/cdn@1.0/img/categories/DesignPattern.jpg
分布式:
    zh: 分布式
    en: Distributed System
    img: https://cdn.jsdelivr.net/gh/DragonBaby308/cdn@1.0/img/categories/DistributedSystem.jpg
Docker:
    zh: 容器比虚拟机更加轻量级。	——	沃兹.基硕德
    en: Docker
    img: https://cdn.jsdelivr.net/gh/DragonBaby308/cdn@1.0/img/categories/Docker.jpg
Hexo:
    zh: Hexo是非常好用的静态博客。	——	海氏.沃兹.基硕德
    en: Hexo
    img: https://cdn.jsdelivr.net/gh/DragonBaby308/cdn@1.0/img/categories/Hexo.jpg
GitHub:
    zh: 全世界最大同性交友平台 ——
    en: GayHub
    img: https://cdn.jsdelivr.net/gh/DragonBaby308/cdn@1.0/img/categories/GitHub.jpg
Go:
    zh: Go语言设计得非常人性化,我愿意把它作为第二语言。
    en: GoLang
    img: https://cdn.jsdelivr.net/gh/DragonBaby308/cdn@1.0/img/categories/Go.jpg

# tag       
# 标签名称
# 对应链接为:/tags
悦读:
    # 封面图片
    img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/reading.jpg

4.单页面封面配置

比如“留言板”,修改/source/comment/index.md中的photos属性即可。


5.番组计划页source/bangumi/index.md

注释只是为了描述每个属性的作用,自己配置时需要将所有注释删除

---
layout: bangumi
title: bangumi
comments: false
date: 2019-02-10 21:32:48
keywords:
description:
bangumis:
  # 番组图片
  - img: https://lain.bgm.tv/pic/cover/l/0e/1e/218971_2y351.jpg
  # 番组名
    title: 朝花夕誓——于离别之朝束起约定之花
  # 追番状态 (追番ing/已追完)
    status: 已追完
  # 追番进度
    progress: 100
  # 番剧日文名称
    jp: さよならの朝に約束の花をかざろう
  # 放送时间
    time: 放送时间: 2018-02-24 SUN.
  # 番剧介绍
    desc:  住在远离尘嚣的土地,一边将每天的事情编织成名为希比欧的布,一边静静生活的伊欧夫人民。在15岁左右外表就停止成长,拥有数百年寿命的他们,被称为“离别的一族”,并被视为活着的传说。没有双亲的伊欧夫少女玛奇亚,过着被伙伴包围的平稳日子,却总感觉“孤身一人”。他们的这种日常,一瞬间就崩溃消失。追求伊欧夫的长寿之血,梅萨蒂军乘坐着名为雷纳特的古代兽发动了进攻。在绝望与混乱之中,伊欧夫的第一美女蕾莉亚被梅萨蒂带走,而玛奇亚暗恋的少年克里姆也失踪了。玛奇亚虽然总算逃脱了,却失去了伙伴和归去之地……。
  - img: http://lain.bgm.tv/pic/cover/l/e9/15/179949_c2j50.jpg
    title: 小林家的龙女仆
    status: 已追完
    progress: 100
    jp: 小林さんちのメイドラゴン
    desc: 在单身的辛苦OL小林身边突然出现的女仆装束的美少女托尔。长着角和尾巴的她的身姿正是所谓的龙娘。在醉酒的小林邀请下说要到家里去的托尔,鬼使神差地开始以小林家女仆的身份工作……!?“女仆”+“龙”=“女仆龙”有着笨手笨脚的可爱之处!龙娘与人类之间基本上很温暖、偶尔有些黑暗的异种族间交流喜剧!!
  - img: http://lain.bgm.tv/pic/cover/l/42/54/219164_TLkl2.jpg
    title: 鲁邦三世 PART5
    status: 已追完
    progress: 100
    jp: ルパン三世 PART5
    desc: 鲁邦三世与次元大介身处法国。故事在某处乡间小镇的公寓一室开始。包括毒品枪械等非法物资在内,任何物品都能购买的地下网站,“马可波罗”。为了盗取虚拟货币,鲁邦等人侵入了戒备森严的巨大服务器设施。他们在那里遇到了神秘的天才黑客少女,阿米。鲁邦和阿米一起正面应对马可波罗的陷阱,但由于敌人设置的“鲁邦游戏”,而落得被全世界监视的下场……阿米身上接连揭晓的谜团,以及知晓鲁邦三世过去的男人出现——鲁邦正陷入前所未有的绝境!
---

5.友链页source/links/index.md

注释只是为了描述每个属性的作用,自己配置时需要将所有注释删除

---
layout: links
title: links
# 创建日期,可以改下
date: 2018-12-19 23:11:06
# 图片上的标题,自定义修改
keywords: 友人帐
description:
# true/false 开启/关闭评论
comments: true
# 页面头部图片,自定义修改
photos: https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/links.jpg
# 友链配置
links:
  # 类型分组
  - group: 个人项目
    # 类型简介
    desc: 充分说明这家伙是条咸鱼 < ( ̄︶ ̄)>
    items:
    # 友链链接
    - url: https://shino.cc/fgvf
    # 友链头像
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
    # 友链站点名
      name: Google
    # 友链介绍
      desc: Google 镜像
  # 类型分组...
  - group: 小伙伴们
    desc: 欢迎交换友链 ꉂ(ˊᗜˋ)
    items:
    - url: https://shino.cc/fgvf
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
      name: Google
      desc: Google 镜像
---

(三)其他魔改

1.startdash名称更改

/themes/Sakura/layout/_partial/startdash.ejs中的<h1 ...>startdash</h1>改为<h1 ...>快速导航</h1>

2.Discovery名称更改

/themes/Sakura/layout/index.ejs中的<h1 ...>Discovery</h1>改为<h1 ...>正文</h1>

3.文章链接更改

_config.yaml中的permalink属性修改为permalink: :title/