【博客搭建2】Sakura主题的配置

提示：该文章适合纯新手，效果可进入我的博客bigdataxy.cc进行查看。

【博客搭建2】Sakura主题的配置

主题下载安装
- github下载安装包
- 相关文件介绍
CDN搭建
- 第一步：创建github仓库
- 第二步：克隆Github仓库到本地
- 第三步：上传需要的资源
- 第四步：发布仓库
- 第五步：通过jsDeliver引用资源
文件修改
- blog目录下的_config配置
- 主题目录下的_config配置
- 其他细节修改
- - 模块内容及背景
  - 模块背景及布局
  - 归档与清单的背景及描述
  - 底部内容修改
  - 关于“我？”对话修改

Hexo有许多的个性化主题可供选择，可通过Hexo官网Themes | Hexo进行查看，我的个人博客是使用的Sakura主题，github地址为honjun/hexo-theme-sakura (github.com)，下面按照我的修改内容进行记录。

主题下载安装

github下载安装包

进入上述github地址，点击 **Download ZIP ** 下载压缩包，压缩包里面就已经配置好了很多source内容，为后面省去很多麻烦。

下载好之后解压到博客根目录（此时会有提示有重复文件，点击替换文件）。接着在cmd中运行nmp i安装依赖。

CDN搭建

国内加载github的资源比较慢，需要使用CDN加速来优化网站打开速度，于是使用jsDeliver+github搭建免费的cdn。jsDelivr 是一个免费开源的 CDN 解决方案，用于帮助开发者和站长。包含 JavaScript 库、jQuery 插件、CSS 框架、字体等等 Web 上常用的静态资源。

这里可以理解为，在github创建一个素材库，可以存放图片，视频，音乐等资源，对存放的资源可以直接通过链接进行访问，这里借助jsDeliver加速素材的访问。之后站点各模块的头像、背景以及文章内容图片均会运用该方式进行访问及存储。

第一步：创建github仓库

第二步：克隆Github仓库到本地

在任意目录创建一个空文件，右键进入Git Bash Here，输入git clone + 仓库连接

之后对仓库会克隆到本地，对cdn进行相关操作，这里的操作为你想建立的一些列路径和加进去的图片。

我这里是这样的。

第三步：上传需要的资源

在进入cdn目录，右键Git Bash Here，对操作好的文件进行提交。

// 查看状态
git status
// 初始化
git init
// 添加到库中（点有空格）
git add .
// 提交更新（引号内 为自定义信息说明）
git commit -m '提交说明'
// 推送至远程仓库
git push origin main

第四步：发布仓库

点击Draft a new release建立发布版本

进行版本号自定义，版本号是为你最新一次的更新内容做个标签，若你之后再次更新，需要再次更新版本号，之前的版本号同样可以使用，只不过没有新更新的内容。

对于更新内容不多的情况下，可以直接在github进行操作。

第五步：通过jsDeliver引用资源

使用方法：

https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径

例如：

https://cdn.jsdelivr.net/gh/Bigdata-xy/cdn@1.01/img/custom/avatar.jpg

注意：版本号不是必需的，是为了区分新旧资源，如果不适用版本号，将会直接引用最新资源。

文件修改

blog目录下的_config配置

blog目录下的_config.yml文件，对该文件进行如下修改：

修改**title: ** 与 author:。
将 url的值修改为网站主URl（如：http://xxx.github.io）
建议修改permalink，可修改为短连接。安装插件 npm install hexo-abbrlink --save

主题配置文件修改和添加：

 #permalink: :year/:month/:day/:title/ #主题默认文章链接配置permalink: post/:abbrlink.html #修改## 启用算法生成不重复文件编号，添加abbrlink:alg: crc16   #算法： crc16(default) and crc32rep: hex   #进制： dec(default) and hex: dec #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制

主题目录下的_config配置

其中标明【改】的是需要修改部门，标明【选】是可改可不改（建议不用改），标明【非】是不用改的部分。

# site name
# 站点名，即网站的左上角的名称 【改】
prefixName: さくら荘その
siteName: hojun# favicon and site master avatar
# 站点的favicon和头像 输入图片路径（下面的配置是都是cdn的相对路径，没有cdn请填写完整路径，建议使用jsdeliver搭建一个cdn啦，先去下载我的cdn替换下图片就行了，简单方便~）【改】
favicon: /images/favicon.ico
avatar: /img/custom/avatar.jpg# 站点url 【改为自己的博客的网址】
url: https://sakura.hojun.cn# 站点介绍（或者说是个人签名）【改】
description: Live your life with passion! With some drive!# 站点cdn，没有就为空 【改】  若是cdn为空，一些图片地址就要填完整地址了，比如之前avatar就要填https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/custom/avatar.jpg
cdn: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6# 开启pjax 【选】
pjax: 1# 站点首页的公告信息 【改】
notice: hexo-Sakura主题已经开源，目前正在开发中...# 懒加载的加载中图片 【选】
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 }# Home page sort type: -1: newer first，1: older first. 【非】
homePageSortType: -1# Home page article shown number) 【非】
homeArticleShown: 10# 背景图片 【选】
bgn: 8# startdash面板 url, title, desc img 【改】
startdash: - {url: /theme-sakura/, title: Sakura, desc: 本站 hexo 主题, img: /img/startdash/sakura.md.png}- {url: http://space.bilibili.com/271849279, title: Bilibili, desc: 博主的b站视频, img: /img/startdash/bilibili.jpg}- {url: /, title: hojun的万事屋, desc: 技术服务, img: /img/startdash/wangshiwu.jpg}# your site build time or founded date
# 你的站点建立日期 【改】
siteBuildingTime: 07/17/2018# 社交按钮(social)  url, img PC端配置 【改】
social:github: {url: http://github.com/honjun, img: /img/social/github.png}sina: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/sina.png}wangyiyun: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/wangyiyun.png}zhihu: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/zhihu.png}email: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/email.svg}wechat: {url: /#, qrcode: /img/custom/wechat.jpg, img: /img/social/wechat.png}# 社交按钮(msocial)  url, img 移动端配置 【改】
msocial:github: {url: http://github.com/honjun, 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}# 赞赏二维码（其中wechatSQ是赞赏单页面的赞赏码图片）【改】
donate:alipay: /img/custom/donate/AliPayQR.jpgwechat: /img/custom/donate/WeChanQR.jpgwechatSQ: /img/custom/donate/WeChanSQ.jpg# 首页视频地址为https://cdn.jsdelivr.net/gh/honjun/hojun@1.2/Unbroken.mp4，配置如下 【选】
movies:url: https://cdn.jsdelivr.net/gh/honjun/hojun@1.2# 多个视频用逗号隔开，随机获取。支持的格式目前已知MP4,Flv。其他的可以试下，不保证有用name: Unbroken.mp4# 左下角aplayer播放器配置 主要改id和server这两项，修改详见[aplayer文档] 【选】
aplayer: id: 2660651585server: neteasetype: playlistfixed: truemini: falseautoplay: falseloop: allorder: randompreload: autovolume: 0.7mutex: true# Valine评论配置【选】
valine: flase
v_appId: GyC3NzMvd0hT9Yyd2hYIC0MN-gzGzoHsz
v_appKey: mgOpfzbkHYqU92CV4IDlAUHQ

其他细节修改

模块内容及背景

这里用友人帐举例，在/source/links/index.md进行修改内容及背景图片。其他模块内容及背景图片可在该目录下对应的md文件中修改。

layout: links
title: links
date: 2018-12-19 23:11:06
keywords: 友人帐
description:
comments: true
photos: https://cdn.jsdelivr.net/gh/Bigdata-xy/cdn@1.02/img/banner/links.jpg
links:- group: 个人项目desc: 充分说明这家伙是条咸鱼 < (￣︶￣)>items:- url: /img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svgname: Googledesc: Google 镜像- url: /img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svgname: Googledesc: Google 镜像- group: 小伙伴们desc: 欢迎交换友链 ꉂ(ˊᗜˋ)items:- url: /img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svgname: Googledesc: Google 镜像- url: /img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svgname: Googledesc: Google 镜像

模块背景及布局

友人帐的布局主要在/themes/sakura/layout/links.ejs，其他模块的布局在该目录下的ejs文件中修改。

归档与清单的背景及描述

在 /themes/sakura/language/zh-cn.yml修改：

#category
技术:zh: 小肖要进步！~en: Geek – Only for Loveimg: https://cdn.jsdelivr.net/gh/Bigdata-xy/cdn@1.02/img/banner/coding.jpg
生活:zh: 生活的本质是当下en: life is the most importantimg: https://cdn.jsdelivr.net/gh/Bigdata-xy/cdn@1.02/img/banner/writing.jpg
转载:zh: 站在前辈的肩膀上en: Bai piao lalalaaaimg: https://cdn.jsdelivr.net/gh/Bigdata-xy/cdn@1.02/img/banner/ziyuan.jpg
资源:zh: 快来，有好东西en: Bai piao lalalaaa againimg: https://cdn.jsdelivr.net/gh/Bigdata-xy/cdn@1.02/img/banner/ziyuan.jpg
随想:zh: 一些小心思...en: dddimg: https://cdn.jsdelivr.net/gh/Bigdata-xy/cdn@1.02/img/banner/think.jpg#tag
悦读:img: https://cdn.jsdelivr.net/gh/Bigdata-xy/cdn@1.02/img/banner/reading.jpg图集:img: https://cdn.jsdelivr.net/gh/Bigdata-xy/cdn@1.02/img/banner/photo.jpg

底部内容修改

在/themes/Sakura/layout_partial中可修改底部显示内容。

关于“我？”对话修改

在/themes/Sakura/source/js中的botui.js进行修改即可。

——上面配置过程中若遇到问题，可查看官方文档，csdn，也可在平台进行私信，看到会及时回复

注：在配置过程中可将要修改的对应文件备份后，进行修改查看各种修改后的效果，若改乱了可使用备份文件还原