一、篇首
这是使用typecho的第一篇文章。
作为一个青少年时热衷于泡网吧、成年后天天电脑面前坐，还不喜欢不打游戏的人儿，对于互联网上形形色色的内容，那可是十分感兴趣的，也慢慢在网上学了不少东西，同样也认识了很多新朋友。
在众多的互联网技术中，wap/web是我从来没有放弃过的“执念”。由“柯林”建站系统创建的Skybl，认识了站长狐狸、海盗、零点、小魔头、苍雪、小柒、神尾xx等，到后来的Zblog做的个人博客，除了学习&工作就是在各种网站、论坛、贴吧等瞎折腾。
我们作为时间的过客，必然是要在生活中留下点什么的，那么这个博客将是我分享、成长的“媒介”。
二、为什么要记录这些改动
1、博客本来就是迎来记录的一个媒介，在这上面发生的一切都值得去记录与分析。
2、网站程序更新后，会导致部分“功能”失效，为了快速恢复，记录这些就显得非常必要了。
3、也是为了感谢以下好用功能、方法的分享者。
三、代码高亮
1、安装方法
1)、将CodePrettify插件上传至网站/usr/plugins文件下
2)、文件夹名改为 CodePrettify
3)、登录管理后台，激活插件 （请勿与其它同类插件同时启用，以免互相影响）
4)、设置：选择主题风格，是否显示行号等。
5)、handsome主题：最新版本handsome主题内置的高亮与该插件冲突，请进入后台 -> 设置外观 -> 主题增强功能里关闭主题内置高亮
6)、自定义CSS：外观设置 -> 开发者选项 -> 自定义CSS
添加以下css代码即可
#post-content pre code {
display:block;
overflow-x:auto;
position:relative;
margin:0;
padding-left:50px;
}
pre code {
position:relative;
display:block;
overflow-x:auto;
margin:4.4px 0.px .4px 1px;
padding:0;
max-height:500px;
padding-left:3.5em
}2、用法
\```php(语言类型选填)
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\3、Pjax
如果你的网站有开启Pjax
请把以下代码添加到回调函数的地方，在你使用的主题设置里看看
if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
for (var i = 0; i < pres.length; i++){
if (pres[i].getElementsByTagName('code').length > 0)
pres[i].className = 'line-numbers';}
Prism.highlightAll(true,null);}4、可设置项
选择高亮主题风格 (官方提供的 8 种风格切换，插件作者新增了三种（Mac风格）)
- coy.css
- dark.css
- BlackMac.css（黑色Mac风格）
- GrayMac.css （默认选中：Mac风格（灰色））
- WhiteMac.css（白色Mac风格）
- twilight.css
- tomorrow-night.css
- 是否在代码左侧显示行号 （默认开启）
5、插件相关信息
插件名称：Code Prettify
作者：[Xcnte]
官网：Code Prettif
下载地址：Code Prettif-github
备用下载地址：天翼云盘 (访问码:njq3)
6、效果异常
1)、开启了vditor.js ：在handsome插件中将vditor.js 关闭即可
四、页面底部徽标
1、将以下代码加入主题后台的开发者选项中的自定义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、将以下代码添加至后台主题设置博客 底部左侧信息，信息修改成自己的：
<!--版权信息-->
<div class="github-badge">
<a title="米修修博客©2017-2023 ">
<span class="badge-subject">©</span><span class="badge-value bg-green">2017-2023 </span>
</a>
</div>
|
<!--sitemap-->
<div class="github-badge">
<a href="https://mixiuxiu.com/sitemap.xml" target="_blank" title="SiteMap">
<span class="badge-subject">站点地图</span><span class="badge-value bg-info">SiteMap </span>
</a>
</div>
<!--CDN-->
<div class="github-badge">
<a href="hhttps://www.qcloud.com/" target="_blank" title="由腾讯云提供CDN服务">
<span class="badge-subject">CDN</span><span class="badge-value bg-green">腾讯云</span>
</a>
</div>
<!--对象存储-->
<div class="github-badge">
<a href="https://www.qcloud.com/" target="_blank" title="由 腾讯云 提供 对象存储 服务">
<span class="badge-subject">对象存储</span><span class="badge-value bg-info">腾讯云</span>
</a>
</div>3、将以下代码添加至后台主题设置博客 底部右侧信息：
<!--ICP备案-->
<div class="github-badge">
<a href="https://beian.miit.gov.cn/" target="_blank" title="ICP备案">
<span class="badge-subject">鄂ICP备</span><span class="badge-value bg-blue">2023000832号 </span>
</a>
</div>
<!--公安备案-->
<div class="github-badge">
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42011302000115" target="_blank" title="公安备案">
<span class="badge-subject"><img src="https://cos.mixiuxiu.com/2023/05/24/1684920526.png" width="16" height="16"> 鄂公网安备</span><span class="badge-value bg-orange">42011302000115号 </span>
</a>
</div>
<!--源代码-->
<div class="github-badge">
<a href="https://typecho.org/" target="_blank" title="由 Typecho 强力驱动">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
<!--主题-->
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>4、添加完成后，需要去 handsome/component/footer.php删除原有底部代码，需要删除的代码如下：
<footer id="footer" class="app-footer" role="footer">
<!-- <div class="wrapper bg-light">-->
<!-- <a class="pull-right hidden-xs text-ellipsis">-->
<!-- <span class="label badge" style="margin-right: 10px;">Powered by typecho</span>-->
<!-- <a href="https://www.ihewro.com/archives/489/" class="label badge">Theme by handsome</a>-->
<!-- </a>-->
<!-- <a href="" target="_blank" rel="noopener noreferrer" class="label badge" data-toggle="tooltip" data-original-title="">Copyright ©2021</a>-->
<!-- </div>-->
<div class="wrapper bg-light">
<span class="pull-right hidden-xs text-ellipsis">
<?php $this->options->BottomInfo();
// 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解
?>
Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank"
href="https://www.ihewro.com/archives/489/">handsome</a>
</span>
<span class="text-ellipsis">© <?php echo date("Y"); ?> All rights reserved. <?php
$this->options->BottomleftInfo(); ?></span>
</div>
</footer>5、方法转载信息
转载地址：Handsome美化
五、给网站添加加载耗时显示
1、在/usr/themes/handsome/functions.php末尾添加如下代码
//加载耗时
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;
}2、然后在/usr/themes/handsome/component/sidebar.php下添加显示代码
<li class="list-group-item"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>3、方法转载信息
转载地址：Handsome美化
六、手机适配中不显示热门及标签云
1、使用方法
将以下代码添加至后台-开发者设置-自定义CSS
@media (max-width:767px) {
#tabs-4,#tag_cloud-2 {
display: none;
}
}2、方法转载信息
转载地址：Handsome美化
1 条评论
欢迎加入 Typecho 大家族