首页 技术·教程

用到の软件

用到の字体

如果博主字体好看,点击下载即可拥有。

此处内容需要评论回复后方可阅读

PC 端

开始

首先找到一款你想要的字体,我这里用的萝莉小猫咪体。由于中文字体包都很大不利于WEB环境,这里我们需要使用 Fontmin,从字体包里提取出我们要使用的字体。
下载 Fontmin客户端 和你要用的字体包

生成完成后会有个文件夹,将文件夹复制到 /usr/themes/Cuteen/static/font 目录下,文件夹重命名为你自己想要的名字,这里我用的是 LOGO

打开后台-外观-设置外观-自定义设置-复制代码粘贴至 头部自定义内容

# 你还可以放在oss里直接引用也可以。
<link rel="stylesheet" type="text/css" href="/usr/themes/Cuteen/static/font/LOGO/logo.css">

在/usr/themes/Cuteen/base中,打开navbar.php文件
将第13行的代码删除掉,并添加以下代码

        <span class="logolink miao">
            <a href="https://blog.fddmao.com/">
            <span class="sakuraso">乔治</span>
            <span class="no">の</span>
            <span class="shironeko">小窝</span>
            <i class="up-new" style="display:inline-block;vertical-align: middle;height: 35px;"></i></a>
        </span>
    </li>

打开后台-外观-设置外观-自定义设置-复制代码粘贴至自定义Css样式

/*自定义logo*/
.up-new { 
    padding-right: 30px; 
    padding-bottom: 5px; 
    background: url(https://xxx.png) no-repeat; //logo后边小图标(复制时请删掉此行)
}
 
.miao {
    font-family: 'miao', 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif; //里边把你的字体名称加进去,不然引用了也无法看到字体变化。(复制时请删掉此行)
}
 
.mvboli {
    font-family: 'mvboli', '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 {
   color: orange;
}
 
.logolink.miao a {
    color: #464646;
    float: left;
    font-size: 25px;
    font-weight: 800;
    line-height: 56px;
    padding-left: 6px;
    padding-right: 15px;
    text-decoration-line: none;
}
 
.logolink.miao .sakuraso,.logolink.miao .no {
    font-size: 25px;
    border-radius: 9px;
    padding-bottom: 2px;
    padding-top: 5px;
}
 
.logolink.miao .no {
    display: inline-block;
    margin-left: 5px;
}
 
.logolink a:hover .no {
    color: orange;
    -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: 10px;
    letter-spacing:2px;
    transform: translateY(-15px);
    opacity: 0;
    transiton-property: opacity;
    transition-duration: 0.5s, 0.5s;
}
 
.logolink a:hover ruby rt {
    opacity: 1
}

在自定义头部引用字体,记得在css里加上字体名称,否则引用后没效果

移动端

开始

其它操作同理,这里写不同得地方。
navbar.php里找到移动端注释,删除以下代码:

<a class="navbar-brand mr-0" href="<?= $this->options->siteUrl ?>" ><?= Ctx::EchoLogo() ?></a>

在删除处添加以下代码:

    <li class="navbar-nav">
        <span class="logolink miao">
            <a href="https://blog.fddmao.com">
                <ruby>
                    <span class="sakuraso">乔治</span>
                    <span class="no">の</span>
                    <span class="shironeko">小窝</span>
                </ruby>
            </a>
        </span>
    </li>

具体位置:

修改位置




文章评论

    皮皮苏 访客ChromeWindows
    9天 前   回复

    小鹿 访客ChromeWindows
    29天 前   回复

    来看看~

      乔治 站长ChromeWindows
      29天 前   回复

      看看就看看

    MeerOst 访客ChromeWindows
    2021-04-2 9:03   回复

    请问你网站标题的Emoji是怎么添加的呀,我在typecho和主题设置中添加都显示数据库错误。

      乔治 站长ChromeWindows
      2021-04-3 5:57   回复

      你数据库不支持表情,需要改下编码,你可以看下之前得文章有写,改完在进行尝试!

    MeerOst 访客ChromeWindows
    2021-03-31 11:04   回复

    膜拜大佬

    MeerOst 访客ChromeWindows
    2021-03-31 11:03   回复

    膜拜

    成都 访客ChromeWindows
    2021-03-19 11:25   回复

    不错

      乔治 站长ChromeWindows
      2021-03-20 3:57   回复

    邓阳 访客ChromeWindows
    2021-03-18 15:36   回复

    挺好看

      乔治 站长ChromeWindows
      2021-03-20 3:58   回复

    刘泽奇 访客ChromeMac
    2021-03-6 3:22   回复

    牛啊牛啊

      乔治 站长ChromeWindows
      2021-03-6 3:31   回复

    康康 访客ChromeWindows
    2021-03-5 15:00   回复

    前来康康

      乔治 站长ChromeWindows
      2021-03-6 3:32   回复

    iodwad 访客ChromeWindows
    2021-02-28 13:50   回复

    学习一下

    冷轩 访客ChromeWindows
    2021-02-23 10:03   回复

    学习一下

    妃妃 访客ChromeWindows
    2021-02-18 14:46   回复

    来了

    小李 访客ChromeWindows
    2021-02-18 6:22   回复

    试试

    BeiCuei 访客ChromeWindows
    2021-02-14 15:38   回复

    真棒,谢谢博主

    BeiCuei 访客ChromeWindows
    2021-02-14 15:37   回复

    真棒,谢谢博主

    陈风 访客ChromeWindows
    2021-02-13 11:18   回复

    支持支持

      乔治 站长ChromeWindows
      2021-02-13 11:19   回复

      谢谢咯!

    小白 访客ChromeWindows
    2021-02-7 0:25   回复

    支持支持

    小白 访客ChromeWindows
    2021-02-7 0:25   回复

    支持支持

      乔治 站长SafariMac
      2021-02-7 1:58   回复

      谢谢

    ender-zzm 访客ChromeLinux
    2021-01-28 12:12   回复

    学习

      乔治 站长ChromeWindows
      2021-01-28 14:05   回复

    ZKSET 访客ChromeAndroid
    2021-01-27 8:40   回复

    拿走了

      乔治 站长ChromeWindows
      2021-01-27 9:13   回复

目录