本站Handsoem主题的美化教程

Author： yfx
发布时间：August 26, 2021
1421 views
2 comments
4525 words
Categories：网站搭建 Typecho

<div class="tip share">请注意，本文编写于 1367 天前，最后修改于 1364 天前，其中某些信息可能已经过时。</div>

# 复制弹窗

提供两种弹窗样式：

## 样式一

### 效果展示

![复制弹窗-样式一](https://cdn.xuyifan.top/handsome-static/images/blog-image/copy_pop-up_window-style_1.gif)

### 配置方法

* 首先将下方代码复制添加至后台主题设置`自定义输出body 尾部的HTML代码`

```html

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
```

~~Tip：可以把这个js文件下载下来放到自己网站哦！~~

* 接着复制下方代码复制添加至后台主题设置`自定义JavaScript`

```javascript

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

## 样式二

### 效果展示

![复制弹窗-样式二](https://cdn.xuyifan.top/handsome-static/images/blog-image/copy_pop-up_window-style_2.gif)

### 配置方法

* 首先将下方代码复制添加至后台主题设置`自定义输出body 尾部的HTML代码`

```html

<script src="调用layer.js的地址"></script>
```

* 接着复制下方代码复制添加至后台主题设置`自定义JavaScript`

```javascript

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

<button class=" btn m-b-xs btn-dark  " onclick="">[阿里云盘](https://www.aliyundrive.com/s/KCCW7rKmLuc)</button>|<button class=" btn m-b-xs btn-info  " onclick="">[百度网盘](https://pan.baidu.com/s/1ZyI4fppusXHg-tlGzjuH1g)</button>提取码：`derr`

# 文本框打字机特效

## 效果展示

![打字机特效](https://cdn.xuyifan.top/handsome-static/images/blog-image/typewriter-special-effects.gif)

## 配置方法

* 复制下方代码复制添加至后台主题设置`自定义输出body 尾部的HTML代码`

```html

<script type="text/javascript" src="调用comment-typing.js的地址"></script>
```

<button class=" btn m-b-xs btn-dark  " onclick="">[阿里云盘](https://www.aliyundrive.com/s/N5osRWADshQ)</button>|<button class=" btn m-b-xs btn-info  " onclick="">[百度网盘](https://pan.baidu.com/s/1kJ8BgVkQ_R96gwhHTep0pg)</button>提取码：`derr`

# 底部页脚标签样式

## 效果展示

![页脚标签美化](https://cdn.xuyifan.top/handsome-static/images/blog-image/Snipaste_2021-08-29_22-29-19.png)

## 配置方法

* 首先将下方代码复制添加至后台主题设置`自定义 CSS`

```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: #ffa500
}

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

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}
```

* 接着将下方代码复制添加至后台主题设置`博客底部左侧信息`(bg-green是绿色背景)

```html
<div class="github-badge">
<a href="./" title="©2021 Derrick">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2021 xxxx</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="https://beian.miit.gov.cn/" target="_blank" title="粤ICP备 xxxxxxxxx号" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">苏ICP备</span><span class="badge-value bg-green">xxxxxxxxx号</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32132302010251" target="_blank" title="苏公网安备 xxxxxxxxxx号" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<img src="https://cdn.xuyifan.top/handsome-static/images/icon/record.png">
<span class="badge-subject">苏公网安备</span><span class="badge-value bg-purple">xxxxxxxxxx号</span>
</a>
</div>
```

* 到`usr/themes/handsome/component/footer.php`里修改部分代码(注释或删掉,`8.2.0`版本`117`行)

```html
<footer id="footer" class="app-footer" role="footer">







    <div class="wrapper bg-light">
      <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo();
      // 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解
      ?>
      
      
      </span>
      
        <span class="text-ellipsis"><?php
            $this->options->BottomleftInfo(); ?></span>
    </div>

</footer>
```

# 博主的介绍闪字特效

## 效果展示

![闪字特效](https://cdn.xuyifan.top/handsome-static/images/blog-image/flash-character-effects.gif)

## 配置方法

* 复制下方代码添加至后台主题设置`博主的介绍`

```html

<span class="text-muted text-xs block">
    <div id="chakhsu"></div>
    <script> var chakhsu = function (r) { function t() { return b[Math.floor(Math.random() * b.length)] } function e() { return String.fromCharCode(94 * Math.random() + 33) } function n(r) { for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n } function i() { var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } 
    var l = "", o = ["你的介绍"].map(function (r) { return r + "" }), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = { text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g }; i() }; chakhsu(document.getElementById('chakhsu'));</script>
</span> </span>
```

Last modification：August 29, 2021

看着给点？(●'◡'●)？

2 comments

pfimfgdoyp
September 27th, 2024 at 12:49 pm

怎么收藏这篇文章？

Reply
bcgxvosvfi
September 22nd, 2024 at 06:34 pm

博主真是太厉害了！！！

Reply

本站Handsoem主题的美化教程

yfx • 2021 年 08 月 26 日

<div class="tip share">请注意，本文编写于 1367 天前，最后修改于 1364 天前，其中某些信息可能已经过时。</div>

# 复制弹窗

提供两种弹窗样式：

## 样式一

### 效果展示

![复制弹窗-样式一](https://cdn.xuyifan.top/handsome-static/images/blog-image/copy_pop-up_window-style_1.gif)

### 配置方法

* 首先将下方代码复制添加至后台主题设置`自定义输出body 尾部的HTML代码`

```html

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
```

~~Tip：可以把这个js文件下载下来放到自己网站哦！~~

* 接着复制下方代码复制添加至后台主题设置`自定义JavaScript`

## 样式二

### 效果展示

![复制弹窗-样式二](https://cdn.xuyifan.top/handsome-static/images/blog-image/copy_pop-up_window-style_2.gif)

### 配置方法

* 首先将下方代码复制添加至后台主题设置`自定义输出body 尾部的HTML代码`

```html

<script src="调用layer.js的地址"></script>
```

* 接着复制下方代码复制添加至后台主题设置`自定义JavaScript`

```javascript

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

# 文本框打字机特效

## 效果展示

![打字机特效](https://cdn.xuyifan.top/handsome-static/images/blog-image/typewriter-special-effects.gif)

## 配置方法

* 复制下方代码复制添加至后台主题设置`自定义输出body 尾部的HTML代码`

```html

<script type="text/javascript" src="调用comment-typing.js的地址"></script>
```

# 底部页脚标签样式

## 效果展示

![页脚标签美化](https://cdn.xuyifan.top/handsome-static/images/blog-image/Snipaste_2021-08-29_22-29-19.png)

## 配置方法

* 首先将下方代码复制添加至后台主题设置`自定义 CSS`

.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: #ffa500
}

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

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}
```

* 接着将下方代码复制添加至后台主题设置`博客底部左侧信息`(bg-green是绿色背景)

* 到`usr/themes/handsome/component/footer.php`里修改部分代码(注释或删掉,`8.2.0`版本`117`行)

</footer>
```

# 博主的介绍闪字特效

## 效果展示

![闪字特效](https://cdn.xuyifan.top/handsome-static/images/blog-image/flash-character-effects.gif)

## 配置方法

* 复制下方代码添加至后台主题设置`博主的介绍`

本站Handsoem主题的美化教程

2 comments

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

本站Handsoem主题的美化教程

宝塔网站nginx反向代理避坑

纪元1800.DLC完全解锁补丁【正版适用】-2023.11.14

LeetCode-高效制胜-两数之和

LeetCode-高效制胜-两数之和 II - 输入有序数组

陈果语录——自信

Codeforces-Round #731 (Div. 3)

考研 · 励志手杖——音乐，温柔的陪伴

GitHub避坑

LeetCode-第251场周赛

本站Handsoem主题的美化教程

2 comments

Leave a Comment Cancel reply 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

本站Handsoem主题的美化教程

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款