(2)一些handsome主题美化教程

博主：萌萌熊
发布时间：2022 年 03 月 07 日
3155 次浏览
暂无评论
3571字数
分类：教程 TypeCho 美化

## 文章标题美化

复制以下代码到<CODE>**主题设置-开发者设置-自定义输出body 尾部的HTML代码**</CODE>

```html
<style>
#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}</style>
```

## 自定义博客字体

复制以下代码到<CODE>**主题设置-开发者设置-自定义输出body 尾部的HTML代码**</CODE>

```html
<style>
@font-face{font-family:FontStyle;src:url("https://www.xxx.cn/font.ttf");format("truetype");}*{font-family:FontStyle;}i{font-family:none;}@media only screen and (min-width:0px) and (max-width:767px){.index-banner{height:50vh!important;}}
</style>
```

其中<CODE>**src:url**</CODE>里面的链接请替换为自己的字体链接

## 添加滑稽表情包

解压 funny.zip ,你将会得到 funny 文件夹和 OwO.json 文件

<CODE>**操作前请做好相应备份工作**</CODE>
<CODE>**只适用于 Handsome 主题**</CODE>

funny 文件夹放于 handsome主题<CODE>**/assets/img/emotion/**</CODE>目录下<CODE>**OwO.json**</CODE> 替换原文件

此 OwO.json 文件位于主题<CODE>**usr/**</CODE>目录下

如果表情默认显示太大，那就加个css调整一下
<CODE>**将以下代码添加到主题设置的自定义CSS**</CODE>
<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7e640c87bbfe409058a8fbe55565fc3e27" aria-expanded="true"><div class="accordion-toggle"><span>代码如下 点击展开</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-7e640c87bbfe409058a8fbe55565fc3e27" class="collapse collapse-content"><p></p>

```css
/*滑稽小表情自定义大小*/
.emotion-funny {
    width: 30px;
}
.comment-content-true img.emotion-funny {
    max-width: 100%!important;
}
```

**文件下载地址：**

<button class="btn m-b-xs btn-success btn-rounded " onclick='window.open("https://blog.hawaite.cn/usr/uploads/2022/02/73827321.zip","_blank")'>funny.zip</button>

## handsome主题页脚美化

1. **将下面的代码复制到 <code>主题设置-开发者设置-自定义CSS</code>**

```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
}
```

##### 添加底部博客信息

2. 将以下内容添加至 <code>开发者设置-博客底部左侧信息</code>,将内容改成自己的

```html
<div class="github-badge">
<a href="./" title="©2019&nbsp;Alvin">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019&nbsp;Alvin</span>
</a>
</div>
&nbsp;|&nbsp;
<div class="github-badge">
<a href="http://www.miitbeian.gov.cn/" target="_blank" title="粤ICP备 xxx号" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">粤ICP备</span><span class="badge-value bg-green">xxx号</span>
</a>
</div>
```

3. **将以下内容添加至 <code>开发者设置-博客底部右侧信息</code>**

```html
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
&nbsp;|&nbsp; 
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>
```

##### 修改footer.php文件

记得备份原文件
</div>

4. **修改 <code>handsome\component\footer.php</code>文件
<code>删除以下代码，大约在119行</code>**

```php
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>
```

5. **继续删除以下代码**

```php
&copy;&nbsp;<?php echo date("Y");?> Copyright&nbsp;
```

最后修改：2022 年 03 月 29 日

如果觉得我的文章对你有用，请随意赞赏

此处评论已关闭

(2)一些handsome主题美化教程

萌萌熊 • 2022 年 03 月 07 日

## 文章标题美化

复制以下代码到<CODE>**主题设置-开发者设置-自定义输出body 尾部的HTML代码**</CODE>

## 自定义博客字体

复制以下代码到<CODE>**主题设置-开发者设置-自定义输出body 尾部的HTML代码**</CODE>

其中<CODE>**src:url**</CODE>里面的链接请替换为自己的字体链接

## 添加滑稽表情包

解压 funny.zip ,你将会得到 funny 文件夹和 OwO.json 文件

<CODE>**操作前请做好相应备份工作**</CODE>
<CODE>**只适用于 Handsome 主题**</CODE>

funny 文件夹放于 handsome主题<CODE>**/assets/img/emotion/**</CODE>目录下<CODE>**OwO.json**</CODE> 替换原文件

此 OwO.json 文件位于主题<CODE>**usr/**</CODE>目录下

如果表情默认显示太大，那就加个css调整一下
<CODE>**将以下代码添加到主题设置的自定义CSS**</CODE>
<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7d0a33c581d33e3689371f4c23b7385179" aria-expanded="true"><div class="accordion-toggle"><span>代码如下 点击展开</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-7d0a33c581d33e3689371f4c23b7385179" class="collapse collapse-content"><p></p>

```css
/*滑稽小表情自定义大小*/
.emotion-funny {
    width: 30px;
}
.comment-content-true img.emotion-funny {
    max-width: 100%!important;
}
```

**文件下载地址：**

<button class="btn m-b-xs btn-success btn-rounded " onclick='window.open("https://blog.hawaite.cn/usr/uploads/2022/02/73827321.zip","_blank")'>funny.zip</button>

## handsome主题页脚美化

1. **将下面的代码复制到 <code>主题设置-开发者设置-自定义CSS</code>**

```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
}
```

##### 添加底部博客信息

2. 将以下内容添加至 <code>开发者设置-博客底部左侧信息</code>,将内容改成自己的

3. **将以下内容添加至 <code>开发者设置-博客底部右侧信息</code>**

##### 修改footer.php文件

记得备份原文件
</div>

4. **修改 <code>handsome\component\footer.php</code>文件
<code>删除以下代码，大约在119行</code>**

```php
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>
```

5. **继续删除以下代码**

(2)一些handsome主题美化教程

(1)一些HandSome主题的美化教程

EPLAN修改封面表格公司标识

关于Vditor的使用

Handsome主题滑稽小表情

ST语言IEE754浮点数转十进制小数

记录一下群晖emby套件添加弹幕库的经历

博客创建成功！

简单Handsome自定义字体

PLC ST语言十六进制浮点数转十进制

群晖NAS搭建Dplayer 弹幕库API

(2)一些handsome主题美化教程