效果
前言
不得不说,handsome
主题制作确实很精良,非常感谢原作者友人C的辛苦创作
开启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文件的时候,发现徽章着实好看,就想着让网站底部信息以徽章形式展现
- 使用Github官方徽章
点击跳转
选择一个选择徽章
徽章使用的svg,把徽章套在<img>
标签下
- 使用
复制下面代码
<img src="https://img.shields.io/static/v1?label=<LABEL>&message=<MESSAGE>&color=<COLOR>" >
修改内容即可。
- 颜色修改
color=
内填入下图颜色代码
- 为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> | 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
类,让此处内容消失即可
- 后来发现这种方法,也懒得尝试了,有需要的可以试一试
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评论标志插件
- 效果
- 下载
使用
- 上传插件至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;
});
鼠标评论框美化
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.php
185行将下列代码
<!--友情链接-->
<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:红色
版权属于:SWJ(除特别注明外)
本文链接:https://blog.zggsong.cn/archives/766.html
本站文章采用CC BY-NC-SA 4.0进行许可,请在转载时注明出处及本声明!
博主呀,能问一下您的评论框图片嘛,就那个一跳一跳的小电视
F12自取( ,,´・ω・)ノ"(´っω・`。)
整理的真不错
太花里胡哨了,已经不用了
看看
博主你好,handsome主题7.0之后好像自定义鼠标右键无效了,您用的哪个版本呢
我用的是6.0
你把代码复制出来放到vscode或者sublimeText里面可以识别颜色,然后修改即可
导航栏字体试了好几次没成功
不好意思,最近博客评论邮件回复坏掉了,才看到,这个替换的时候名字千万别命名错误,没成功很可能是名字还有文件位置的调用出问题。(../两点加斜杠是上级目录,知道的话就忽略)字体上传的位置可能制定错误,一步步排查吧,从字体的上传,css创建,调用。
copyright: