Handsome 8.0主题修改

所有修改基于 Handsome 8.0 主题

1、全站友情链接带头像

在主题根目录 /handsome/component/aside.php 将 193-214 行替换为下列代码

<!--友情链接-->
              <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>

2、开启复制弹窗

[scode type="blue"]实现原理就是引入一个弹窗脚本,在自定义尾部 body 输出[/scode]

<script src="https://public.ax127.fun/Popup.js"></script>

[scode type="blue"]在自定义 javascript 内写入[/scode]

<!--复制弹框-->
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};

3、头像呼吸光环

[scode type="blue"]在自定义 css 内写入[/scode]

/*头像呼吸光环*/
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

    25% {
        box-shadow: 0 0 16px #0f0;
    }

    50% {
        box-shadow: 0 0 4px #00f;
    }

    75% {
        box-shadow: 0 0 16px #0f0;
    }

    100% {
        box-shadow: 0 0 4px #f00;
    }
}

4、首页文章列表悬停上浮

[scode type="blue"]在自定义 css 内写入[/scode]

[scode type="red"]仅在大/小头图模式和交错模式生效[/scode]

/* 首页文章列表悬停上浮 */
.blog-post .panel-small:not(article),
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

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

5、修改全局字体

[font color="#009a61"] 在 Handsome 主题目录的 /assets/css/features/font.min.css 文件中添加如下代码，路径注意根据自己的修改。[/font]

@font-face {
  font-family: 'nexzhu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/nexzhu/blockdole.woff2') format('woff2'),
    url('../../fonts/nexzhu/blockdole.woff') format('woff'),
    url('../../fonts/nexzhu/blockdole.eot') format('embedded-opentype');
}

[scode type="yellow"]其中 blockdole.svg 是没有的，但是缺少这一行，又不会显示，所以必须写上，而且浏览器控制台不会报错。[/scode]

[font color="#009a61"]在后台设置外观-开发者设置-自定义 CSS 中添加以下语句[/font]

body {
font-family: nexzhu;
}

[font color="#009a61"]字体下载，点击右键选择链接另存为[/font]