效果

~_~

前言

不得不说,handsome主题制作确实很精良,非常感谢原作者友人C的辛苦创作

个人在handsome主题基础上做了一些修改,仅以此文进行总结保存,也希望能帮到有需要的人~

开启GZIP压缩

为什么要开启GZIP

网站采用Gzip压缩,可以大大缩减网站加载时间,也可以减少流量的使用

更详细的请查看下面这篇文章

那如何查看自己的网站是否已经压缩过了呢?

查看是否开启gzip压缩

修改开启GZip压缩

  • 进入网站跟目录-打开index.php文件
  • 添加如下代码

<?php
/**
 * Typecho Blog Platform
 *
 * @copyright  Copyright (c) 2008 Typecho team (http://www.typecho.org)
 * @license    GNU General Public License 2.0
 * @version    $Id: index.php 1153 2009-07-02 10:53:22Z magike.net $
 */

/** 开启gzip压缩, add by yovisun */  
ob_start('ob_gzhandler');

/** 载入配置支持 */
if (!defined('__TYPECHO_ROOT_DIR__') && !@include_once 'config.inc.php') {
    file_exists('./install.php') ? header('Location: install.php') : print('Missing Config File');
    exit;
}

/** 初始化组件 */
Typecho_Widget::widget('Widget_Init');

/** 注册一个初始化插件 */
Typecho_Plugin::factory('index.php')->begin();

/** 开始路由分发 */
Typecho_Router::dispatch();

/** 注册一个结束插件 */
Typecho_Plugin::factory('index.php')->end();

保存退出,刷新网站即可,通过上面链接查询网站是否成功开启GZIP压缩

音乐播放失效问题

handsome主题音乐时有失效问题,可用以下方法解决

方法一

下载meting.php
上传到主题文件夹/libs/meting.php文件
覆盖要原文件

meting.php文件下载:

方法二

是因为CDN缓存的原因导致音乐API 无法正常解析
将使用的CDN 缓存时间设置为0就可以了

修改底部徽章

  • 添加css
/*底部页脚*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ff9f18
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #00c787
}

.github-badge .bg-purple {
  background-color: #ab34e9
}
  • 博客底部信息(左右侧)
copyright和驱动信息在主题目录-component-footer.php修改,代码同下,修改部分内容即可
<div class="github-badge">
<a href="http://www.beian.miit.gov.cn/" rel="nofollow" target="_blank">
<span class="badge-subject"><font color=ffffff>皖ICP备</span><span class="badge-value bg-blue">19008954号-2</span>
</a>
</div>

写github项目README文件的时候,发现徽章着实好看,就想着让网站底部信息以徽章形式展现

徽章.png

  • 使用Github官方徽章
点击跳转

选择一个选择徽章

徽章使用的svg,把徽章套在<img>标签下

  • 使用

复制下面代码


<img src="https://img.shields.io/static/v1?label=<LABEL>&message=<MESSAGE>&color=<COLOR>" >

修改内容即可。

  • 颜色修改

color=内填入下图颜色代码

color.png

  • 为Copyright添加徽章

同样也是在主题目录-component-footer.php

这是我写的,可以参考


        <span class="text-ellipsis"><img src="https://img.shields.io/static/v1?label=©Copyright
©Copyrigh&message=SWJ&color=informational">     <?php $this->options->BottomleftInfo(); ?></span>

删除网站底部驱动信息

进入服务器-主题目录-component-footer.php

找到如下内容并注释相应部分

<span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo(); ?>
      <!--Powered by <a target="blank" href="http://www.typecho.org">Typecho</a>&nbsp;|&nbsp;Theme by <a target="blank" href="https://www.ihewro.com/archives/489/">handsome</a>-->
      </span>

为支持作者,可以添加作者友链~

修改导航栏字体

  • 展示

展示

修改字体

  • 添加字体文件

进入/usr/themes/handsome/assets/fonts

新建一个文件夹,命名为myfont,可以随便设定,记住就行,将字体文件上传到里面。

  • 创建字体css

进入/usr/themes/handsome/assets/css

创建myfont.css文件,写入以下内容

/*下面修改为自己字体的位置名和字体名*/
@font-face{
    font-family: 'myfont';
    src : url('../fonts/myfont/***.TTF');
}
  • 修改header.php

进入/usr/themes/handsome/component

找到以下内容

 <!-- 本地css静态资源 -->
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/function.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />

在下方添加如下代码:


   <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/swj.css" type="text/css" />
      <style>
           .m-l-xs{
                  font-family: 'myfont';
            }
      </style>

以上部分就可以完成对标题栏字体的修改,如果需要修改字体吗,只需要修改/usr/themes/handsome/assets/fonts/myfont/文件夹内的字体文件即可(修改为之前字体一样的名字)`

删除首页中间博客名文字

效果看本博客首页

实现方法

  • 第一步

进入/usr/themes/handsome/component

找到以下内容

 <!-- 本地css静态资源 -->
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/function.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />

在下方添加如下代码:


   <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/swj.css" type="text/css" />
      <style>
           .m-l-xs{
                  font-family: 'myfont';
            }
<!-- 添加下面代码 -->
           .xiaoshi{
                display: none;
           }

      </style>
  • 第二步

进入/usr/themes/handsome

修改index.php
找到

 <!--/公告位置-->
          <?php endif; ?>
        <header class="bg-light lter b-b wrapper-md">
          <h1 class="m-n font-thin h3 text-black l-h"><?php $this->options->title(); ?></h1>
          <small class="text-muted letterspacing indexWords"><?php
              if (@!in_array('hitokoto',$this->options->featuresetup)) {
                  $this->options->Indexwords();

<h1 class="m-n font-thin h3 text-black l-h xiaoshi"><?php $this->options->title(); ?></h1>中添加xiaoshi类,让此处内容消失即可

  • 后来发现这种方法,也懒得尝试了,有需要的可以试一试

外观设置--开发者设置--自定义 JavaScript
document.querySelector("header.lter").remove();

复制成功提示框

复制下面内容至header.php中合适位置

      <!-- 加载复制成功 -->
      <script src="https://cdn.staticfile.org/layer/2.3/layer.js"></script>

如果是handsome主题,可以加在开发者设置中的自定义输出body 尾部的HTML代码中并且在自定义 JavaScript中添加如下代码


document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接!');};

保存即可

文章圆角化及放大动画

打开handsome后台外观设置,进入开发者设置-自定义CSS,输入以下内容

/*首页文章版式圆角化*/

.panel {
    border: none;
    border-radius: 8px;
}

.panel-small {
    border: none;
    border-radius: 8px;
}

.item-thumb {
    border-radius: 8px;
}


/*首页文章列表悬停上浮*/

.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}


/*头图超出*/

.index-post-img {
    overflow: hidden;
    border-radius: 8px;
}

.item-thumb,
.item-thumb-small {
    transition: all 0.3s;
    border-radius: 8px;
}


/*超出部分隐藏*/

.entry-thumbnail {
    overflow: hidden;
    border-radius: 8px;
}

#post-content img {
    border-radius: 8px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
    border-radius: 8px;
}

.item-thumb:hover,
.item-thumb-small:hover {
    transform: scale(1.1);
    border-radius: 8px;
}

网页阴影

打开handsome后台外观设置,进入开发者设置-自定义CSS,输入以下内容

/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}

鼠标停留头像旋转

打开handsome后台外观设置,进入开发者设置-自定义CSS,输入以下内容

/*首页头像自动旋转*/
.thumb-lg{
    width:130px;
}

.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}

.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}

#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

UserAgent评论标志插件

  • 效果

UA展示

  • 下载

  • 使用

    • 上传插件至Typecho的plugins目录下,且插件目录名应为UserAgent
    • 修改Handsome主题,component目录下的comments.php代码文件,大概第60~80行左右

找到如下内容


<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?>
</span>

修改为如下代码

<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</span>
  • 还需要注意的一点是,如果评论者开启CDN加速,那么将无法获取真实ip并获取其位置

获取真实ip:
在Typecho博客网站的根目录的config.inc.php插入下面的代码:


//** 防止CDN造成无法获取客户真实IP地址 */
if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) 
{
    $list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
    $_SERVER['REMOTE_ADDR'] = $list[0];
}

感谢松鼠大大的开发

彩色标签云

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

如果主题中启用了pjax,还需要将上面代码添加到pjax-pjax回调函数中。

鼠标评论框美化

typecho伪静态

挂载bilibili视频响应式代码

演示:

复制嵌入代码添加到文章。

然后在给iframe 这个标签添加class="iframe_video"

再然后就是在handsome后天css文件添加如下css:

/*bilibili视频挂载*/

.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1200px) {
    .iframe_video {
        height: 40em;
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

访客数量和网站响应耗时

  • 首先将以下代码加到themes/handsome/libs/Content.php中,放在class Content{}之前
    /**
     * 访问总量
     */
     function theAllViews(){
             $db = Typecho_Db::get();
             $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
                 echo number_format($row[0]['SUM(VIEWS)']);
     }

    /**
     * 响应时间
     */
    function timer_start() {
        global $timestart;
        $mtime = explode( ' ', microtime()  );
        $timestart = $mtime[1] + $mtime[0];
        return true; 
    }
    timer_start();
    function timer_stop( $display = 0, $precision = 3  ) {
        global $timestart, $timeend;
        $mtime = explode( ' ', microtime()  );
        $timeend = $mtime[1] + $mtime[0];
        $timetotal = number_format( $timeend - $timestart, $precision  );
        $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
        if ( $display  ) {
            echo $r;
        }
        return $r;
    }
  • slider.php添加代码
           <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="user"></i></span> <span 
                       class="badge
            pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
            
            <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="clock"></i></span> <span 
                       class="badge
            pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>

添加全站字数

  • component/sidebar.php的开头加入下面的代码:
<?php
//字数统计
function allOfCharacters() {
    $chars = 0;
    $db = Typecho_Db::get();
    $select = $db ->select('text')->from('table.contents');
    $rows = $db->fetchAll($select);
    foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
    $unit = '';
    if($chars >= 10000)     { $chars /= 10000; $unit = '万'; } 
    else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
    $out = sprintf('%.2lf %s',$chars, $unit);
    return $out;
}
?>
  • component/sidebar.php处,选择合适位置加入以下代码(位置大概在 90 多行)
           <li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-2"></i></span>
               <span class="badge 
           pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>

美化markdown

/*美化markdown标题*/
#post-content h1 {
font-size: 30px
}

#post-content h2 {
position: relative;
margin: 20px 0 32px!important;
font-size: 1.55em;
}

#post-content h3 {
font-size: 20px
}

#post-content h4 {
font-size: 15px
}

#post-content h2::after {
transition: all .35s;
content: "";
position: absolute;
background: linear- 
gradient(#3c67bd8c 30%,#3c67bd 70%);
width: 1em;
left: 0;
box-shadow: 0 3px 3px rgba(32,160,255,.4);
height: 3px;
bottom: -8px;
}

#post-content h2::before {
content: "";
width: 100%;
border-bottom: 1px solid #eee;
bottom: -7px;
position: absolute

}

#post-content h2:hover::after {
width: 2.5em;
}

 #post-content h1,#post-content 
 h2,#post-content h3,#post-content 
 h4,#post-content h5,#post-content .h6 {
color: #666;
line-height: 1.4;
font-weight: 700;
margin: 30px 0 10px 0
  }

自定义右键


效果
右键效果

  • 外观设置-开发者设置-自定义输出body 尾部的HTML代码,插入下面的代码
<!-- 自定义右键 -->
<style type="text/css">
    a {text-decoration: none;}
    div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9;border-radius: 8px;}
    div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
    div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
    div.usercm ul li a{color:#666;padding:0 15px;display:block}
    div.usercm ul li a:hover{color:#fff;background:rgba(249,129,234,0.88);border-radius: 8px}
    div.usercm ul li a i{margin-right:10px}
    a.disabled{color:#c8c8c8!important;cursor:not-allowed}
    a.disabled:hover{background-color:rgba(255,11,11,0)!important}
    div.usercm{background:#fff !important;}
    </style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="https://blog.zggsong.cn/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-file fa-fw"></i><span>复制</span></a></li>
        <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>百度</span></a></li>
        <li><a href="javascript:void(0);" onclick="googleSearch();"><i class="fa fa-google fa-fw"></i><span>谷歌</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>
        <li><a href="https://blog.zggsong.cn/friendlink.html"><i class="fa fa-user fa-fw"></i><span>和我当邻居</span></a></li>  
           <li><a href="https://blog.zggsong.cn/message.html"><i class="fa fa-pencil fa-fw"></i><span>给我留言吧</span></a></li>
    </ul>
</div>
<script type="text/javascript">
    (function(a) {
        a.extend({
            mouseMoveShow: function(b) {
                var d = 0,
                    c = 0,
                    h = 0,
                    k = 0,
                    e = 0,
                    f = 0;
                a(window).mousemove(function(g) {
                    d = a(window).width();
                    c = a(window).height();
                    h = g.clientX;
                    k = g.clientY;
                    e = g.pageX;
                    f = g.pageY;
                    h + a(b).width() >= d && (e = e - a(b).width() - 5);
                    k + a(b).height() >= c && (f = f - a(b).height() - 5);
                    a("html").on({
                        contextmenu: function(c) {
                            3 == c.which && a(b).css({
                                left: e,
                                top: f
                            }).show()
                        },
                        click: function() {
                            a(b).hide()
                        }
                    })
                })
            },
            disabledContextMenu: function() {
                window.oncontextmenu = function() {
                    return !1
                }
            }
        })
    })(jQuery);
     
    function getSelect() {
        "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请选择需要复制的内容!") : document.execCommand("Copy")
    }
    function baiduSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("请选择需要搜索的内容!") : window.open("https://www.baidu.com/s?wd=" + a)
    }
    function googleSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("请选择需要搜索的内容!") : window.open("https://www.google.com/search?q=" + a)
    }
    $(function() {
        for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
            d = !1;
            break
        }
        d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
    });
    </script>

全站友情链接带头像

在主题根目录/handsome/component/aside.php185行将下列代码

<!--友情链接-->
              <li>
                <a class="auto">
                  <span class="pull-right text-muted">
                    <i class="fontello icon-fw fontello-angle-right text"></i>
                    <i class="fontello icon-fw fontello-angle-down text-active"></i>
                  </span>
                    <span class="nav-icon"><i data-feather="user"></i></span>
                  <span><?php _me("友链") ?></span>
                </a>
                <ul class="nav nav-sub dk">
                  <li class="nav-sub-header">
                    <a data-no-instant>
                      <span><?php _me("友链") ?></span>
                    </a>
                  </li>
                  <!--使用links插件,输出全站友链-->
                 <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
data-placement=\"top\"><a href=\"{url}\" target=\"_blank\"><i><img width=\"18\" height=\"18\" src={image} /></i><span>{name}</span></a></li>";
                  Handsome_Plugin::output($mypattern1, 0, "ten");?>
                </ul>
              </li>

替换成

<!--带头像的友情链接-->
            <li>
                <a class="auto">
                  <span class="pull-right text-muted">
                    <i class="fontello icon-fw fontello-angle-right text"></i>
                    <i class="fontello icon-fw fontello-angle-down text-active"></i>
                  </span>
                    <span class="nav-icon"><i data-feather="user"></i></span>
                  <span><?php _me("友链") ?></span>
                </a>
                <ul class="nav nav-sub dk">
                  <li class="nav-sub-header">
                    <a data-no-instant>
                      <span><?php _me("友链") ?></span>
                    </a>
                  </li>
                  <!--使用links插件,输出全站友链-->
                 <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
data-placement=\"top\"><a href=\"{url}\" target=\"_blank\"><i><img width=\"18\" height=\"18\" src={image} alt=\"{title}\" /></i><span>{name}</span></a></li>";
                  Handsome_Plugin::output($mypattern1, 0, "ten");?>
                </ul>
              </li>

自用css

该部分仅登录用户可见

handsome文件

component/aside.php        左边导航栏
component/comments.php     评论区
component/footer.php       底部版权、音乐播放器之类
component/header.php       页面头,没啥要改的
component/headnav.php      顶部导航
component/say.php          时光机动态
component/sidebar.php      右侧栏目
component/third_party_comments.php    3.3.0新增,第三方评论
css/        博客CSS,一般不要改
fonts/      博客字体,一般不要改
img/        图像,一般不要改
js/         js文件,一般不要改
lang/       语言文件
libs/Content.php    文章内容
libs/...    一般不要改
usr/        另一个语言文件?
404.php     404界面
archive.php    整合
booklist.php   书单
cross.php      时光机
files.php      归档
functions.php  配置界面的东西
guestbook.php  留言板
index.php      首页
links.php      友链
page.php       文章页面整合
post.php       文章输出

color: 选填,不填默认为success(绿色),可选值:
light:白色
info:蓝色
dark:深色
success:绿色
black:黑色
warning:黄色
primary:紫色
danger:红色
最后修改:2020 年 05 月 12 日 12 : 08 PM
如果觉得我的文章对你有用,请随意赞赏~