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

Bigdataxy

已于 2022-11-03 23:40:38 修改

阅读量1.5k

点赞数 2

分类专栏：个人博客文章标签：前端 javascript html

于 2022-10-30 18:09:51 首次发布

本文链接：https://blog.csdn.net/qq_53271322/article/details/127602616

版权

个人博客专栏收录该内容

3 篇文章

订阅专栏

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

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

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 crc32
 	  rep: 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.jpg
  wechat: /img/custom/donate/WeChanQR.jpg
  wechatSQ: /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: 2660651585
  server: netease
  type: playlist
  fixed: true
  mini: false
  autoplay: false
  loop: all
  order: random
  preload: auto
  volume: 0.7
  mutex: 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.svg
      name: Google
      desc: Google 镜像
    - url: /
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
      name: Google
      desc: Google 镜像
  - group: 小伙伴们
    desc: 欢迎交换友链 ꉂ(ˊᗜˋ)
    items:
    - url: /
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
      name: Google
      desc: Google 镜像
    - url: /
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
      name: Google
      desc: Google 镜像

模块背景及布局

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

归档与清单的背景及描述

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

#category
技术:
    zh: 小肖要进步！~
    en: Geek – Only for Love
    img: https://cdn.jsdelivr.net/gh/Bigdata-xy/cdn@1.02/img/banner/coding.jpg
生活:
    zh: 生活的本质是当下
    en: life is the most important
    img: https://cdn.jsdelivr.net/gh/Bigdata-xy/cdn@1.02/img/banner/writing.jpg
转载:
    zh: 站在前辈的肩膀上
    en: Bai piao lalalaaa
    img: https://cdn.jsdelivr.net/gh/Bigdata-xy/cdn@1.02/img/banner/ziyuan.jpg
资源:
    zh: 快来，有好东西
    en: Bai piao lalalaaa again
    img: https://cdn.jsdelivr.net/gh/Bigdata-xy/cdn@1.02/img/banner/ziyuan.jpg
随想:
    zh: 一些小心思...
    en: ddd
    img: 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