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

sakura主題Mishiro大佬的博客：櫻花家的白貓
本文轉載於霧時之森，稍加修改。

首先找到一款你想要的字體，我這裏用的是 kitty原始貓咪中文智能手機字體。由於中文字體包都很大不利於WEB環境，這裏我們需要使用 Fontmin 從字體包裏提取出我們要使用的字體。

1. 下載 Fontmin客戶端 和 你要用的字體包

2. 挑選出需要的字：（字體包提前重命名爲logo）
   

3. 生成簡要型字體樣式
   

4. 在themes\sakura\source\fonts\下新建文件夾LOGO，文件複製到此處

5. 在文件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">
   

6. 修改文件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>
   

7. 在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