Hexo（sakura）主题Mashiro大佬同款LOGO修改方法

sakura主题Mishiro大佬的博客：樱花家的白猫
本文转载于雾时之森，稍加修改。

首先找到一款你想要的字体，我这里用的是 kitty原始猫咪中文智能手机字体。由于中文字体包都很大不利于WEB环境，这里我们需要使用 Fontmin 从字体包里提取出我们要使用的字体。

下载 Fontmin客户端和你要用的字体包
挑选出需要的字：（字体包提前重命名为logo）
生成简要型字体样式
在themes\sakura\source\fonts\下新建文件夹LOGO，文件复制到此处

在文件themes\sakura\layout\_partial\head.ejs合适位置添加：

  <!-- 自定义logo --><link rel="stylesheet" type="text/css" href="/css/logo.css"><link rel="stylesheet" type="text/css" href="/fonts/LOGO/logo.css">

修改文件themes\sakura\layout\_partial\header.ejs第4-11行：

修改后：

      <span class="site-title"><span class="logolink logo"><a href="/"><ruby><span class="sakuraso">姑</span><span class="no">の</span><span class="shironeko">小屋</span><rp></rp><rt class="logo"><%= theme.prefixName %></rt><rp></rp></ruby></a></span></span>

在css下新建动画效果：（注意这是两个不同的文件哦，之前在head都引入过了。）

.logo {font-family: 'logo', 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
}.logolink .sakuraso {background-color: rgba(255, 255, 255, .5);border-radius: 5px;color: #464646;height: auto;line-height: 25px;margin-right: 0;padding-bottom: 0px;padding-top: 1px;text-size-adjust: 100%;width: auto
}.logolink a:hover .sakuraso {background-color: orange;color: #fff;
}.logolink a:hover .shironeko,
.logolink a:hover rt {color: orange;
}.logolink.logo a {color: #464646;float: left;font-size: 25px;font-weight: 800;height: 56px;line-height: 56px;padding-left: 6px;padding-right: 15px;padding-top: 11px;text-decoration-line: none;
}
.logolink.logo .sakuraso,.logolink.logo .no {font-size: 25px;border-radius: 9px;padding-bottom: 2px;padding-top: 5px;
}
.logolink.logo .no {display: inline-block;margin-left: 5px;
}.logolink a:hover .no {-webkit-animation: spin 1.5s linear infinite;animation: spin 1.5s linear infinite;
}.logolink ruby {ruby-position: under;-webkit-ruby-position: after;
}.logolink ruby rt {font-size: 12px;transform: translateY(-15px);opacity: 0;transition-property: opacity;transition-duration: 0.5s, 0.5s;
}.logolink a:hover ruby rt {opacity: 1
}

运行效果：

欢迎访问我的博客：https://cungudafa.gitee.io

Hexo（sakura）主题Mashiro大佬同款LOGO修改方法相关推荐

Android开机logo修改方法
一体机平台开机logo修改方法 1:修改Kernel中的Logo: 若是要替换Kernel中的开机Logo,只需要把内核目录drivers/video/logo下的logo_android_1024_ ...
Android开机logo修改方法【转】
本文转载自:http://blog.csdn.net/qq258711519/article/details/7766303 一体机平台开机logo修改方法 1:修改Kernel中的Logo: 若是要 ...
hexo+sakura主题美化合集
文章目录一.简介二.主题基本修改三.添加通讯以及美化背景四.添加2D板娘 1.通过core-js安装 2.直接修改文件安装五.设置代码块高亮六.搜索功能无法使用七.总结一.简介我们搭 ...
迅为4412开发板驱动-linux 开机 logo 的修改方法
文档主要介绍 4412 开发板的内核启动 LOGO,请注意如果要修改的屏幕分辨率小于480x640,请参考另外的独立文档"iTOP-4412-内核-4.3 寸屏幕-logo 修改_V1.0& ...
Hexo部署+Sakura主题调教教程
CSDN不定期补充个人博客内会实时更新推送: https://flymc.cc/2020/03/28/Sakura/ 前言这个教程的重点在于调教Sakura主题,关于Hexo+GitHub搭建博客 ...
静态博客 Hexo material 主题安装
静态博客 Hexo material 主题安装注意,这里介绍的 Material 主题是 1.5.2 的版本如果你还没有安装 Hexo,并且对它有兴趣,请前往 EasyHexo 这里将提供 Hex ...
hexo next 主题安装 livere 评论插件
之前用gitalk评论插件,但是访问github登录授权感人,有时还要开代理,体验不佳,而且每次都要初始化评论,偶然访问别人的博客发现了一款比较好用的评论插件:livere , 我按照官网研究了一会, ...
Hexo+next主题配置踩的坑
Hexo+next主题配置踩的坑下载安装完next主题后才发现一堆的坑.由于next的版本不同.所以有的配置文件和网上的教程不大一样.自己踩了N多坑,于是打算记录一下.于是自己试了好几天才差不多配置 ...
采取HEXO+NexT主题+github.io的方式建立自己的个人主页
采取HEXO+NexT主题+github.io的方式建立自己的个人主页主要知识点注册github帐号,建立io仓库. 本地配置HEXO博客. 克隆NexT主题到本地仓库建立本地博客与github ...

Hexo（sakura）主题Mashiro大佬同款LOGO修改方法

Hexo（sakura）主题Mashiro大佬同款LOGO修改方法相关推荐

最新文章

热门文章