Hexo-Sakura主题美化-超详细

个人博客 网站

目录和文件分析

分析下themes/Sakura目录结构和文件

首先分析下目录，主要包括以下几个

• languages 这个文件夹中存放的是语言文件，主要是博客中的一些字符以简体中文、繁体中文、英文显示的定义

• layout 这个是布局文件夹，所有的博客页面HTML和JavaScript以ejs模板存放在这

• • Search 这里存放的是页内搜索的ejs文件
  • _partial 这里的和下面的都是公共的页面，可以引入到HTML的任意位置
  • _widget

• source 这个文件夹和博客根目录下的source文件夹是一样的，但是为了存放主题相关的文件

• • css 这里存放css文件
  • fonts 字体文件
  • images 图片
  • js js文件

代码插入位置

再接着就是需要知道我们插入的文件和代码应该放到哪里

一般来说我们的js、css代码一般以文件形式存放到js、css文件夹中，接着再引入HTML代码中，引入位置一般在标签中，当然啦css、js位置也不是固定的，你也可以直接放到HTML页面结构的中央和结尾，也就是之间或者之后、之前

要是CSS或者JavaScript的代码很少的话，可以直接放到HTML中，不需要先存为文件再引入

具体参考：HTML中引入js、css的三种方式——行内样式、页面中样式、外部文件导入

就对应我们现在要修改的文件中的_partial目录下head.ejs——这个就在这个文件中

footer.ejs是底部元素，一般个人、企业版权写在这里，因为一般大部分文件都会引入，因此js代码也可以写在这

layout.ejs这个也是所有页面需要引入的，因为标签在这里

要是想将功能单独添加到某个页面，那你就找到那个ejs文件放到里面就醒了

博客原有功能的修改

博客原有功能修改主要指的是博客根目录配置文件和主题配置文件的修改

因为大部分的都已经在上次的博客搭建文章中写了

就不多说了吧

主要包括各种页面结构的修改：

• 首页轮播图
• 站点图标、头像、赞赏等图片的链接修改
• 个人化的站点标题、副标题、描述、关键词等
• 导航栏的修改、添加、删除等

• 通知的修改
• startdash的图片、链接修改
• 社交链接的修改等

这上面这些应该都是不需要再讲了的

导航栏中的关于

主要是关于>我？这个的修改

这个要修改的文件在Sakura/source/js目录下，名字为botui.js

主要修改content后面双引号里的内容，自行修改为自己的就行

导航栏中的客户端

这个可以使用Fusion App把你自己的博客封装成APP

然后放到蓝奏云上，生成二维码放上来

导航栏中的RSS

根目录下的配置文件中已经有了

#RSS
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

这些代码

因此我们只需要安装好插件就行了

npm install hexo-generator-feed

当然啦，如果本来就能显示内容，那么就不需要安装了

每个页面中的顶部图片

就比如关于>主题这个页面

我们进入根目录下，再进入source目录找到theme-sakura，进入该目录点击index.md，修改photos后面的内容，改为你想要的图片链接

---title: theme-sakura
comments: false
date: 2019-01-04 22:53:25
keywords: Hexo 主题 Sakura 
description:photos: https://static.2heng.xin/wp-content/uploads//2018/05/sakura2.jpeg
---Hexo主题Sakura修改自WordPress主题[Sakura](https://github.com/mashirozx/Sakura/)，感谢原作者[Mashiro](https://2heng.xin/)

文章上面和首页文章列表的图片

也是修改的你新建的文章中的photos后面的图片链接

这些都是这个主题支持的内容，在上篇文章中写过的文章模板

---
title: 文章标题
author: 作者名
avatar: 作者头像链接
authorLink: hojun.cn  #作者的域名
authorAbout: 一个好奇的人  #关于
authorDesc: 一个好奇的人  #作者描述
categories: 分类
date: 2018-12-12 22:16:01 #时间，这个一般都自动创建
comments: true  # 是否需要留言
tags:        # 下面可以写多个标签
 - web
 - 悦读
keywords: Sakura   # 文章关键词
description: hexo-sakura主题使用教程   #文章描述
photos: https://static.2heng.xin/wp-content/uploads//2019/02/wallhaven-672007-1-1024x576.png
---

清单下的番组

这个是在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: 朝花夕誓——于离别之朝束起约定之花  # 番的中文标题
    status: 已追完  # 追番状态
    progress: 100   # 追番进度
    jp: さよならの朝に約束の花をかざろう   # 日文标题
    time: 2018-02-24 SUN.  # 这个是出版的时间
    desc: 这里是你追的番的描述
---

清单下的歌单和左下角悬浮歌单

主要是修改你的id，歌单id的获取方式：

进入网易云网页版https://music.163.com/

登录账号，选择一个歌单打开

浏览器的链接将会显示id，就最后一个字段，把那些数字复制到下面就行

https://music.163.com/?from=infinity#/playlist?id=2162711186

清单下的歌单文件是source/music/index.md

---
title: music
date: 2018-12-20 23:14:28
keywords: 喜欢的音乐
description:
comments: false
photos: https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/banner/music.jpg
---
{% raw %}
修改这里就可以
{% endraw %}

悬浮音乐的代码在主题配置文件中

aplayer:
  id: 2660651585
  server: netease
  type: playlist
  fixed: true
  autoplay: false
  loop: all
  order: random
  preload: auto
  volume: 0.7
  mutex: true

友链添加

友链修改文件在source/links/index.md

---
layout: links
title: links
date: 2018-12-19 23:11:06
keywords: 友人帐
description:
comments: true
photos: https://cdn.jsdelivr.net/gh/honjun/[email protected]/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/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 镜像 # 博客描述
    - url: https://shino.cc/fgvf
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
      name: Google
      desc: Google 镜像
---

不需要修改layout目录下文件的应该就这些了

接下来就直接按点添加功能和美化了

添加标题恶搞

默认的是离开时候还是现实自己的文字标题

添加之后离开和回到这个页面时显示

为了达到上述效果,我们可以在head.ejs或者footer.ejs中加入代码

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/hititle.js"></script>

例如加入到head.ejs的该位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jym0JNsC-1584078269292)(https://s1.ax1x.com/2020/03/13/8n0PDe.png)]

加入之后刷新就能生效了

鼠标点击特效

单击特效有很多种，这里给出三个吧

现在我们把这个代码放到layout.ejs的``标签前

可以分别添加一种，也可以多种混合，但是三种一起使用感觉效果不太好

下面是前两者结合的效果：

最后一种：

这个有很多个，这里展示一个

把代码插入到layout.ejs中

效果如下：

背景显示飘动的彩带

在需要的页面添加，我们还是在所有页面都加上，layout.ejs中加入代码

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/piao.js"></script>

背景添加动态线条，随鼠标动

仍是layout.ejs中

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/canvas-nest.min.js"></script>

樱花飘落或雪花飘落

仍是layout.ejs中

樱花飘落：

雪花飘落：

或者

选择一个就行了

禁用一些按键

为了阻止某些使用F12、Ctrl+Alt+I调用开发者选项的用户

还有禁用了鼠标右键，可以开启禁用鼠标左键拖动选择文字

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/noSomeKey.js"></script>

添加画板娘

这次不用插件来添加，直接引入js代码

仓库链接在这：

live2d-widget https://github.com/stevenjoezhang/live2d-widget

添加前往GitHub的彩带

前往

GitHub Ribbons https://github.blog/2008-12-19-github-ribbons/

挑选样式之后，复制相应的代码，粘贴到合适的地方

加入预加载

sakura主题集成了图片懒加载，可是页面放到GitHub加载还是很慢，matery主题就加入了预加载，从那里得到灵感，因此我们加入预加载

还是在layout.ejs中添加

官网在这：预加载https://instant.page/

添加计数

主要使用的是不蒜子和LeanCloud

LeanCloud我使用起来并不理想，因此不讲，想要了解自己去官网看

不蒜子的：

再进入不蒜子官网查看访问量pv、用户访问量uv使用

添加一言API、诗词

今日诗词 https://www.jinrishici.com/#

提供了诗词的API

我们将这个诗词放到以前的描述那里，社交图标的上方

修改headertop.ejs，找到下面的代码

<div class="header-info">  
          把这句注释掉        <p id="jinrishici-sentence">正在加载今日诗词....p>
        <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8">script>
  
        <div class="top-social_v2">

一言API的可以前往这个网址查看使用：

一言开发者中心 https://developer.hitokoto.cn/sentence/

正好通知也没有啥用，把他换掉

进入index.ejs，查找<%= theme.notice%>，将其替换为下面的

       :D 获取中...
      

      
      
      

添加底部的网站运行时间

在footer.ejs选择合适位置添加代码

载入天数...载入时分秒...

添加底部动态滚动文字

加入天气插件

前往

中国天气 https://cj.weather.com.cn/plugin/pc

这个网址查看详情

可以选用小视图，添加到link.ejs中

顶部加载条

这个sakura有，但是想记录一下

head中加入

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js">script><link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet"><style>
  .pace .pace-progress {  background: #1E92FB; /*进度条颜色*/
  height: 3px;  }
  .pace .pace-progress-inner {  box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
  }
  .pace .pace-activity {  border-top-color: #1E92FB;    /*上边框颜色*/
  border-left-color: #1E92FB;    /*左边框颜色*/
  }style>

修改鼠标样式

在style.css中添加,sakura已有，可不管，当然啦，也可以去找一下其他好看的图标

// 鼠标样式
  * {
      cursor: url("https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/img/cursor/normal.cur"),auto!important
  }
  :active {
      cursor: url("https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/img/cursor/No_Disponible.cur"),auto!important
  }

评论系统

sakura自带的系统为valine，我们可以自行替换成其他的

就比如来必力，前往

来必力官网 https://www.livere.com/

注册登录后，点击菜单栏的【安装】，出现这个界面，直接点击【现在安装】

前往管理页，点击左边的【代码管理】

你将会看到这样的代码

data-uid后面的双引号中的内容剪切出来

然后到主题配置文件下修改，找到最下面的valine

将valine改成false，添加最后两行

# Valine
valine: false
v_appId: Cu2IPPUW8BnkmwzFa8WrS9VC-gzGzoHsz
v_appKey: kgcNfaHXq91mfCaAIcbjGChl
# livere
livere: true
  data_uid: 刚刚复制的uid

接着把下面的代码复制到comment.ejs中

<% if (theme.livere && post.comments) { %>

  
  
  
本文标题:<%= post.title %>
  
文章字数:<%=wordcount(post.content) %>
  
文章作者:<%=config.author%>
  
发布时间:<%= post.date.format("YYYY-MM-DD, HH:mm:ss") %>
  
最后更新:<%= post.updated.format("YYYY-MM-DD, HH:mm:ss") %>
  
原始链接:<%= post.permalink %>
    
  
  
许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

需要文章字数的，一定要先安装字数统计插件，上面列出了，不用就把那行注释掉

接着将下面的代码

        <% if (post.copyright) { %>
          <%- partial('../_partial/article_copyright') %>
        <% } %>

复制到common-article.ejs的这个位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qmxPnRc4-1584078269302)(https://s1.ax1x.com/2020/03/13/8nwlfx.png)]

将CSS代码复制到style.css中

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

添加404页面

在博客根目录的source目录下新建404.html

随便找个模板，在开头加入代码

---
layout: false
---

例如

---
layout: false
---
       
404页面
       返回主页

部署到GitHub之后，访问不存在的页面就会跳出来了

域名绑定

在博客根目录下的source目录下新建CNAME文件，如果主题source目录下有这个文件请删除

修改CNAME文件，内容为你的域名，例如我的

www.sakura521.cn

接着去GitHub pages更改域名，开启SSL

前往阿里云的的域名解析页面添加CANME解析

@ → 用户名.github.io

之后就可以以新的域名访问了 https://www.sakura521.cn

网站收录

主要是向各大搜索引擎提交链接

谷歌收录

360站长平台 http://zhanzhang.so.com/sitetool/site_manage

百度搜索资源平台 https://ziyuan.baidu.com/linksubmit/

百度的需要注意一下，由于GitHub将百度封了，因此你需要把博客双线部署到gitlab或coding才能收录

搜狗站长平台 http://zhanzhang.sogou.com/

网站分析

百度统计

前往百度统计官网

Baidu统计 https://tongji.baidu.com/web/welcome/login

以百度账号登录后，点击【管理】，在【网站列表】中新增网站

获取代码，将代码复制到标签前，进行代码检测

以后就可以查看访问情况了

cnzz

点击

友盟+ https://passport.umeng.com/login?appId=cnzz

前往，注册登录后，添加站点

根据自己喜好获取代码

粘贴到前

之后就可以点击查看信息了

小技巧

博客备份

有一个博客备份插件

hexo-git-backup https://github.com/coneycode/hexo-git-backup

能够传到backup分支

我们还可以把整个博客文件夹上传到GitHub私有仓库

本地预览

使用命令换个端口预览hexo s -p 5000

也可以添加下列代码到博客配置文件中,使用hexo s时将会以5000端口运行

server:
  port: 5000
  compress: true
  header: true

快捷命令

alias设置命令别名，将下面代码复制到***.bashrc***文件中

alias hs='hexo clean && hexo g && hexo s'
alias hd='hexo clean && hexo g && hexo d'
alias gp='git add . && git commit -m "update" && git push -f'

以后输入hs命令就可以本地预览、hd部署、gp上传到仓库

静态资源压缩

博客使用了图片懒加载和预加载虽然加快了一点速度，但访问还是有点慢

那么直接把html、css、js代码中的空格去掉，进行压缩

还有压缩一下图片，能够一定程度上缩小public文件夹的大小

参考这篇文章：

Hexo博客使用gulp压缩静态资源

安装全局gulp

npm install gulp -g

安装插件

npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp gulp-imagemin --save
# 解决【Gulp打包问题】 GulpUglifyError: unable to minify JavaScript
# 解决 gulp-uglify 压缩JavaScript 不兼容 es5 语法的问题
npm install [email protected] --save
npm install [email protected] --save
npm install [email protected] --save
# gulp-babel 取消严格模式方法("use strict")
npm install babel-plugin-transform-remove-strict-mode --save

问题：如果安装gulp-imagemin错误请执行以下语句
sudo npm i gulp-imagemin --unsafe-perms

博客根目录创建gulpfile.js

上面文章中有一句在这个版本会报错，已修改

var gulp = require('gulp');var minifycss = require('gulp-minify-css');var uglify = require('gulp-uglify');var htmlmin = require('gulp-htmlmin');var htmlclean = require('gulp-htmlclean');var imagemin = require('gulp-imagemin');var babel = require('gulp-babel');// 压缩css文件gulp.task('minify-css', function (done) {    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
    done();
});// 压缩html文件gulp.task('minify-html', function (done) {    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'));
    done();
});// 压缩js文件gulp.task('minify-js', function (done) {    return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
        .pipe(babel({            //将ES6代码转译为可执行的JS代码
            presets: ['es2015'] // es5检查机制
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
    done();
});// 压缩 public/images 目录内图片(Version<3)// gulp.task('minify-images', function () {//     gulp.src('./public/images/**/*.*')//         .pipe(imagemin({//             optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）//             progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片//             interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染//             multipass: false, //类型：Boolean 默认：false 多次优化svg直到完全优化//         }))//         .pipe(gulp.dest('./public/images'));// });// 压缩 public/images 目录内图片(Version>3)gulp.task('minify-images', function (done) {
    gulp.src('./public/images/**/*.*')
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),            // imagemin.jpegtran({progressive: true}), // 版本升级，改用下面这个
            imagemin.mozjpeg({progressive: true,}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]))
        .pipe(gulp.dest('./public/images'));
    done();
});//4.0以前的写法 //gulp.task('default', [//  'minify-html', 'minify-css', 'minify-js', 'minify-images'//]);//4.0以后的写法// 执行 gulp 命令时执行的任务gulp.task('default', gulp.series(gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-images')), function () {    console.log("----------gulp Finished----------");    // Do something after a, b, and c are finished.});

根目录下创建.babelrc

{
    'presets': ['es2015'],
    "plugins": ["transform-remove-strict-mode"]
}

转载源地址

https://mp.weixin.qq.com/s/OAyOA28-bTJLE6aKtzpoqg