Hexo-Theme-Sakura 实践记录
hexo-Github
- Mac下使用Hexo+Github搭建个人博客
- 使用Hexo搭建GitHub博客
- 在github中有哪些好的hexo博客模板?
- HEXO THE·ME
- Hexo Icarus Theme Settings |Icarus主题设置
- 使用hexo+icarus搭建个人博客
- hexo及icarus主题个性定制
- littleGreedy
Hexo Theme Sakura
- Hexo-Theme-Sakura LittleGreedy
hexo-theme-sakura主题 English document
基于WordPress主题Sakura修改成Hexo的主题。demo预览
1、主题下载安装
hexo-theme-sakura建议下载压缩包格式,因为除了主题内容还有些source的配置对新手来说比较太麻烦,直接下载解压就省去这些麻烦咯。
下载好后解压到博客根目录(不是主题目录哦,重复的选择替换)。接着在命令行(cmd、bash)运行npm i
安装依赖。
2、主题配置
博客根目录下的_config配置
站点
# Site
title: 你的站点名
subtitle:
description: 站点简介
keywords:
author: 作者名
language: zh-cn
timezone:
部署
deploy:type: gitrepo: github: 你的github仓库地址# coding: 你的coding仓库地址branch: master
备份 (使用hexo b发布备份到远程仓库)
backup:type: gitmessage: backup my blog of https://honjun.github.io/repository:# 你的github仓库地址,备份分支名 (建议新建backup分支)github: https://github.com/honjun/honjun.github.io.git,backup# coding: https://git.coding.net/hojun/hojun.git,backup
主题目录下的_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
# [使用jsDeliver+github搭建免费的cdn](https://www.jianshu.com/p/467290ea7e9f)
# [免费CDN:jsDeliver+Github 使用方法](https://zhuanlan.zhihu.com/p/76951130)
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端配置 【改】
# [QQ邮箱功能:给我写信!获取代码和连接地址的方法!](https://www.moyublog.com/notes/360.html)
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: true
v_appId: GyC3NzMvd0hT9Yyd2hYIC0MN-gzGzoHsz
v_appKey: mgOpfzbkHYqU92CV4IDlAUHQ
分类页和标签页配置
分类页
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fm0HBqCk-1648461156922)(https://ws3.sinaimg.cn/large/006bYVyvly1g07b0gucy9j31060jih76.jpg)]
标签页
配置项在\themes\Sakura\languages\zh-cn.yml里。新增一个分类或标签最好加下哦,当然嫌麻烦可以直接使用一张默认图片(可以改主题或者直接把404图片替换下,征求下意见要不要给这个在配置文件中加个开关,可以issue或群里提出来),现在是没设置的话会使用那种倒立小狗404哦。
#category
# 按分类名创建
技术:#中文标题zh: 野生技术协会 # 英文标题en: Geek – Only for Love# 封面图片img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/coding.jpg
生活:zh: 生活en: liveimg: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/writing.jpg#tag
# 标签名即是标题
悦读:# 封面图片img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/reading.jpg
单页面封面配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0KBjrDAI-1648461156923)(https://ws3.sinaimg.cn/large/006bYVyvly1g07b1pi619j31080jge4u.jpg)]
如留言板页面页面,位于source下的comment下,打开index.md如下:
---
title: comment
date: 2018-12-20 23:13:48
keywords: 留言板
description:
comments: true
# 在这里配置单页面头部图片,自定义替换哦~
photos: https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/comment.jpg
---
单页面配置
番组计划页 (请直接在下载后的文件中改,下面的添加了注释可能会有些影响)
---
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: https://lain.bgm.tv/pic/cover/l/0e/1e/218971_2y351.jpgtitle: 朝花夕誓——于离别之朝束起约定之花status: 已追完progress: 50jp: さよならの朝に約束の花をかざろうtime: 放送时间: 2018-02-24 SUN.desc: 住在远离尘嚣的土地,一边将每天的事情编织成名为希比欧的布,一边静静生活的伊欧夫人民。在15岁左右外表就停止成长,拥有数百年寿命的他们,被称为“离别的一族”,并被视为活着的传说。没有双亲的伊欧夫少女玛奇亚,过着被伙伴包围的平稳日子,却总感觉“孤身一人”。他们的这种日常,一瞬间就崩溃消失。追求伊欧夫的长寿之血,梅萨蒂军乘坐着名为雷纳特的古代兽发动了进攻。在绝望与混乱之中,伊欧夫的第一美女蕾莉亚被梅萨蒂带走,而玛奇亚暗恋的少年克里姆也失踪了。玛奇亚虽然总算逃脱了,却失去了伙伴和归去之地……。
---
友链页 (请直接在下载后的文件中改,下面的添加了注释可能会有些影响)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pSQTCfgZ-1648461156923)(https://ws3.sinaimg.cn/large/006bYVyvly1g07b39tleej31080jhjv1.jpg)]
---
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 镜像- url: https://shino.cc/fgvfimg: https://cloud.moezx.cc/Picture/svg/landscape/fields.svgname: Googledesc: Google 镜像# 类型分组...- group: 小伙伴们desc: 欢迎交换友链 ꉂ(ˊᗜˋ)items:- url: https://shino.cc/fgvfimg: https://cloud.moezx.cc/Picture/svg/landscape/fields.svgname: Googledesc: Google 镜像- url: https://shino.cc/fgvfimg: https://cloud.moezx.cc/Picture/svg/landscape/fields.svgname: Googledesc: Google 镜像
---
写文章配置
主题集成了个人插件hexo-tag-bili和hexo-tag-fancybox_img。其中hexo-tag-bili用来在文章或单页面中插入B站外链视频,使用语法如下:
{% bili video_id [page] %}
详细使用教程详见hexo-tag-bili。
hexo-tag-fancybox_img用来在文章或单页面中图片,使用语法如下:
{% fb_img src [caption] %}
详细使用教程详见hexo-tag-fancybox_img
DIY
修改页脚
themes/Sakura/layout/_partial/footer.ejs
<p style="color: #666666;">© 2018</p>
修改为
<p style="color: #666666;">© 20xx</p>
“运行时长” 显示
themes/Sakura/layout/_partial/footer.ejs
:
<footer><!-- ... --><p style="color: #666666;">© 2020 <i class="fa fa-bar-chart" aria-hidden="true"></i> 小站勉强存活中</p><p> 本站已侥幸存活 <span id="run_time"></span></p><!-- ... -->
</footer><!-- 网站显示已经运行多久时间 -->
<script>function runTime(){var d = new Date(),str = '';BirthDay=new Date("May 15, 2020");today=new Date();timeold=(today.getTime()-BirthDay.getTime());sectimeold=timeold/1000secondsold=Math.floor(sectimeold);msPerDay=24*60*60*1000msPerYear=365*24*60*60*1000e_daysold=timeold/msPerDaye_yearsold=timeold/msPerYeardaysold=Math.floor(e_daysold);yearsold=Math.floor(e_yearsold);str = daysold+" 天 ";str += d.getHours()+' 时 ';str += d.getMinutes()+' 分 ';str+= d.getSeconds()+' 秒 ';return str;}setInterval(function(){$('#run_time').html(runTime())},1000);
</script>
其中BirthDay是网站起始日期,是要自己改的。
str显示的是运行多少年多少天,根据自己实际情况更改。
- 参考:网站显示已经运行多久时间
Hexo-Theme-Sakura 实践记录相关推荐
- hexo(sakura)给博客增添侧边栏(回到顶部,跳转评论,深色模式,播放音乐)Valine-1.4.4新版本尝鲜+个性制定(表情包、qq头像、UI样式)
文章目录 hexo(sakura)给博客增添侧边栏(回到顶部,跳转评论,深色模式,播放音乐) 原理 直接使用 Valine-1.4.4新版本尝鲜+个性制定(表情包.qq头像.UI样式) 总结 本文全是 ...
- Hexo(sakura)文章增添字数统计和阅读时长功能
文章目录 一.文章增添字数统计和阅读时长功能 1. 安装hexo-wordcount 2. 文件配置(3步) 二.修复作者头像和链接显示问题 一.文章增添字数统计和阅读时长功能 1. 安装hexo-w ...
- [MySQL实践] 实践记录
[MySQL实践] 实践记录 版权2019.5.17更新 MySQL MySQL各版本区别 一.选择的版本1. MySQL Community Server 社区版本,开源免费,但不提供官方技术支持. ...
- Django使用supervisor管理celery和uwsgi实践记录 uwsgi BACKOFF Exited too quickly (process log may have details)
Django使用supervisor管理celery和uwsgi实践记录 安装下载supervisor不用多说. 直接上配置文件: vir_path标识虚拟环境路径 pro_path标识项目路径 全部 ...
- 2021-02-28 SQL server实践记录---3Select
SQL server实践记录---3Select 举例用相关表 各种Select语句 举例用相关表 CangKu[cangkuid, cangkuhao, chengshi, mianji, chua ...
- Java UT用例实践记录
Java UT用例实践记录 最近重构过程中在补充以前代码的用例,正好把UT用例的实践经验记录下来. Redis打桩 很多程序都会使用redis管理缓存,UT用例需要解除对远端redis server的 ...
- Hexo(sakura)自定义标签云
自定义标签云 一.效果 二.演示 1. 新建tags资源文件夹 2. 创建样式文件 3. 局部显示标签云 一.效果 之前引入的标签云插件,看似很炫酷,实则有点鸡肋,今天忍不住又开始魔改前端css了 H ...
- Spring Boot 2 实践记录之 MyBatis 集成的启动时警告信息问题
按笔者 Spring Boot 2 实践记录之 MySQL + MyBatis 配置 中的方式,如果想正确运行,需要在 Mapper 类上添加 @Mapper 注解. 但是加入此注解之后,启动时会出现 ...
- docker修练之windows与linux下实践记录
docker修练之windows与linux下实践记录 mysql 持久化 mkdir -p /var/own/mysqldata/ docker run --name mmsql -v /var/o ...
最新文章
- linux shell命令行及脚本编程实例详解_Linux高手必看的10本经典书籍
- 轻松python专题--文本
- 【python图像处理】直线和曲线的拟合与绘制(curve_fit()详解)
- gRPC-Web发布,REST又要被干掉了?
- 分享一个CSS3的网格系统架构 - ResponsiveAeon
- 最大子数组累加和(2种方法)
- 前端项目,css样式获取到了,没能渲染页面
- 华为云OBS Requests specifying Server Side Encryption with KMS managed keys require Signature Version 4.
- liunx下创建达梦数据库实例以及删除实例步骤
- python 开源cms内容管理系统_wagtail-基于Django构建的开源内容管理系统
- 计算机组成原理中各种校验码,计算机组成原理保姆级复习资料
- intel服务器芯片组历史,Intel单路服务器芯片组披露
- 作为开发者你必须要知道的五大浏览器,记得收藏
- Java学习中遇到的中文乱码问题的整理和解决方法
- 第1关:启动 MongoDB
- Flutter如何实现下拉刷新和上拉加载更多
- APPCAN 电子签名设置
- 机器人II_ny_371
- 【springboot】redisTemplate Redis key出现\xac\xed\x00\x05t\x00
- 生鲜配送系统有哪些功能?搭建生鲜配送系统有什么优势?
热门文章
- hexo(sakura)给博客增添侧边栏(回到顶部,跳转评论,深色模式,播放音乐)Valine-1.4.4新版本尝鲜+个性制定(表情包、qq头像、UI样式)