底部版权信息修改
去除内置的底部版权信息
- 文件路径：/handsome/component/footer.php
- 源代码
<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"); ?> Copyright <?php $this->options->BottomleftInfo(); ?></span> </div>- 修改为
<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>使用新的底部版权信息
- 后台设置-开发者设置-左侧信息
添加
Copyright © 2021-2022 <a href="https://kanochan.net" target="_blank" rel="noopener noreferrer">kanochan.net</a>- 后台设置-开发者设置-右侧信息
添加
<a href="https://kanochan.net/about.html">关于</a> ✦ <a href="mailto:helloworld@kanochan.net">Email联系我</a> ✦ <a href="http://typecho.org" rel= "noopener noreferrer" target= "_blank"> Typecho </a> ✦ <a href="https://www.ihewro.com/archives/489/" rel= "noopener noreferrer" target= "_blank">handsome </a>删除一些（个人认为）不必要的元素
删除文章标题旁边的阅读模式、改变字体大小选项
文件：/usr/themes/handsome/libs/Content.php
删除源代码：
if (!$isCustom) { $html .= '<a class="plus-font-size" data-toggle="tooltip" data-original-title="' . _mt("点击改变文章字体大小") . '"><i data-feather="type"></i></a>'; }if (!$isCustom) { $html .= '<a data-morphing style="vertical-align: -1px;" id="morphing" data-src="#morphing-content" href="javascript:;" class="read_mode superscript m-l-sm" data-toggle="tooltip" data-placement="right" data-original-title="' . _mt("阅读模式") . '"><i data-feather="book-open"></i></a>'; }删除动态页面中的”关于我“
- 文件路径：/handsome/cross.php
- 删除
<div class="panel box-shadow-wrap-normal"> <h4 class="font-thin padder"><?php _me("关于我") ?></h4> <ul class="list-group"> <li class="list-group-item"> <p><?php $this->options->about() ?></p> </li> </ul> </div>删除文章顶部字数统计
- 文件路径：/handsome/post.php
- 删除源代码
<!--文字数目--><li class="meta-word"><span class="post-icons"><i data-feather="pen-tool"></i></span><span class="meta-value"><?php echo Utils::getWordsOfContentPost($this->text); ?><?php _me('字数'); ?></span></li>删除首页文章卡片的作者信息
- 文件路径：/handsome/libs/Content.php
- 删除源代码
<li><span class="m-r-sm right-small-icons"><i data-feather="user"></i></span><a href="{$parameterArray['authorUrl']}">{$parameterArray['author']}</a></li>删除首页右上角闲言碎语
- 文件路径：/handsome/component/headnav.php
- 删除源代码
<?php if (!$hideTalkItem): ?> <!--闲言碎语--> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="feathericons dropdown-toggle"> <i data-feather="twitch"></i> <span class="visible-xs-inline"> <?php _me("闲言碎语") ?> </span> <span class="badge badge-sm up bg-danger pull-right-xs"><?php $read_id = Typecho_Cookie::get('user_read_id'); $latest_time_id = Typecho_Cookie::get('latest_time_id'); //$latest_time_id赋值应该在列表加载的后面// if (empty($latest_time_id)){// $latest_time_id = 999999;// } if (empty($read_id)){ $read_id = -1; } if (!empty($read_id) && !empty($latest_time_id)){ $not_read = $latest_time_id - $read_id; if ($not_read > 0){ _me("新"); } } ?></span> </a> <!-- dropdown --> <div class="dropdown-menu w-xl animated fadeInUp"> <div class="panel bg-white"> <div class="panel-heading b-light bg-light"> <strong> <?php _me("闲言碎语") ?> </strong> </div> <div class="list-group" id="smallRecording"> <?php $slug = "cross"; //页面缩略名 $limit = 3; //调用数量 $length = 140; //截取长度 $ispage = true; //true 输出slug页面评论，false输出其它所有评论 $isGuestbook = $ispage ? " = " : " <> "; $db = $this->db; //Typecho_Db::get(); $options = $this->options; //Typecho_Widget::widget('Widget_Options'); $page = $db->fetchRow($db->select()->from('table.contents') ->where('table.contents.created < ?', $options->gmtTime) ->where('table.contents.slug = ?', $slug)); if ($page) { $type = $page['type']; $routeExists = (NULL != Typecho_Router::get($type)); $page['pathinfo'] = $routeExists ? Typecho_Router::url($type, $page) : '#'; $page['permalink'] = Typecho_Common::url($page['pathinfo'], $options->index); $comments = $db->fetchAll($db->select()->from('table.comments') ->where('table.comments.status = ?', 'approved') ->where('table.comments.created < ?', $options->gmtTime) ->where('table.comments.type = ?', 'comment') ->where('table.comments.parent = ?', '0') ->where('table.comments.cid ' . $isGuestbook . ' ?', $page['cid']) ->order('table.comments.created', Typecho_Db::SORT_DESC) ->limit($limit)); $index = 0; foreach ($comments AS $comment) { if ($index == 0){ Typecho_Cookie::set('latest_time_id', $comment['coid']); } $index ++; $content = Content::postCommentContent(Markdown::convert($comment['text']),$this->user->hasLogin(),"","","",true); $content = Content::returnExceptShortCodeContent(trim(strip_tags($content))); if ($content == ""){ $content = _mt("点击查看详情"); } echo '<a href="'.BLOG_URL_PHP.'cross.html" class="list-group-item"><span class="clear block m-b-none words_contents">'.Content::excerpt($content,200).'<br><small class="text-muted">'.Utils::formatDate($comments,$comment['created'], $this->options->commentDateFormat).'</small></span></a>'; } } else { echo '<a target="_blank" href="'.BLOG_URL.'admin/write-page.php" class="list-group-item"><span class="clear block m-b-none">这是一条默认的说说，如果你看到这条动态，请去后台新建独立页面，地址填写cross,自定义模板选择时光机。具体说明请参见主题的使用攻略。<br><small class="text-muted">'.date("F jS, Y \a\t h:i a",time()+($this->options->timezone - idate("Z"))).'</small></span></a>'; } ?> </div> </div> </div> </li> <!--/闲言碎语--> <?php endif; ?>将搜索框移到右侧
- 文件路径：/handsome/component/headnav.php
- 源代码
<form id="searchform1" class="searchform navbar-form navbar-form-sm navbar-left shift" method="post" role="search">- 修改为
<form id="searchform1" class="searchform navbar-form navbar-form-sm navbar-right shift" method="post" role="search">优化B站视频解析
- 后台设置-开发者设置-自定义CSS
添加
.bilivideo { position: relative; width: 100%;}@media only screen and (max-width: 767px) { .bilivideo { height: 15em; }}@media only screen and (min-width: 768px) and (max-width: 991px) { .bilivideo { height: 20em; }}@media only screen and (min-width: 992px) and (max-width: 1199px) { .bilivideo { height: 30em; }}@media only screen and (min-width: 1200px) { .bilivideo { 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}- 调用方法
复制B站视频分享的嵌入代码，并添加CSS样式
示例如下
<iframe class="bilivideo" src="//player.bilibili.com/player.html?aid=380392634&bvid=BV1UZ4y1U73L&cid=478658742&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>修复打赏页面不可点击的BUG
- 后台设置-开发者设置-自定义CSS
添加
.topButton{top: unset;bottom: 135px;}.settings{top: unset;bottom: 46px;} #goToTop {color: #aaaaaa;background-color: #000000;}.modal-open #post-panel.gpu-speed{transform:none;}配置CDN静态文件加速
~服务使用了~~使用jsDelivr加速Handsome主题的静态资源最新8.3.0~
20220303更新：服务使用了cdn.xxhzm.cn免费的静态文件加速服务，需要联系站长添加白名单才可使用。
vditor静态资源加速
handsome的vditor静态资源使用的是jsdelivr的CDN，但是不久前，jsdelivr失去了中国大陆经营牌照，CDN节点全部转到了国外，速度大大降低。
配置文件：/usr/themes/handsome/libs/CDN.php
~将~
https://cdn.jsdelivr.net/npm/vditor@3.8.10~替换为~
https://jsd.sorkai.com/web/npm/vditor@3.8.10handsome静态资源加速
主题后台配置CDN，填入域名：
https://cdn.xxhzm.cn/handsome/8.3.0/配置Google Analytics
修改文件：/usr/themes/handsome/component/header.php
在<head>里面添加谷歌统计代码：
<!-- Global site tag (gtag.js) - Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=G-E36S08YB7L"></script><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-E36S08YB7L');</script>友链页面优化
修改的部分太多了，直接覆盖源码吧，文件路径：/usr/themes/handsome/links.php
<?php/*** 友情链接** @package custom*/if (!defined('__TYPECHO_ROOT_DIR__')) exit;$this->need('component/header.php');?><style type="text/css"></style> <!-- aside --> <?php $this->need('component/aside.php'); ?> <!-- / aside --><!-- <div id="content" class="app-content"> --> <a class="off-screen-toggle hide"></a> <main class="app-content-body <?php Content::returnPageAnimateClass($this); ?>"> <div class="hbox hbox-auto-xs hbox-auto-sm"> <div class="col center-part" id="post-panel"> <div class="bg-light lter wrapper-md"> <h1 class="entry-title m-n font-thin text-black l-h"><span class="title-icons"><i data-feather="link"></i></span><?php _me ("海内存知己，天涯若比邻") ?></h1> <?php if (trim($this->fields->intro) !== ""): ?> <div class="entry-meta text-muted m-b-none small post-head-icon"><?php echo $this->fields->intro; ?></div> <?php endif ?> </div> <div class="wrapper-md"> <div class="tab-container post_tab"> <div class="tab-content"> <!-- list --> <div id="my-info" class="tab-pane fade in active"> <?php echo Content::returnLinkList("ten","tab_4"); ?> <div class="wrapper ng-binding" id="post-content"> <?php Content::postContentHtml($this,$this->user->hasLogin()); ?> </div> <!--评论--> <div class="bg-white wrapper border-radius-6"> <?php $this->need('component/comments.php') ?> </div> </div> </div> </div> </div> </div> <!--首页右侧栏--> <?php $this->need('component/sidebar.php') ?> </div> <!-- /content --></main> <!-- footer --> <?php $this->need('component/footer.php'); ?> <!-- / footer -->适配Chevereto上传插件
修改文件：/usr/themes/handsome/libs/Content.php第2324行
将
echo '<textarea id="handsome_md_text" class="hide" >' . htmlspecialchars($content) . '</textarea>';修改为
echo '<div id="handsome_md_text" class="hide" >' . htmlspecialchars($content) . '</div>';统一动态和评论的图片样式
后台添加自定义CSS：
.comment-content-true img { max-width: 60%!important; border-radius: 6px}修改源码/usr/themes/handsome/libs/Content.php第2396行，将
<figure class="image-thumb" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">修改为：
<figure itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">首页增加右侧边栏网站公告
文件：/usr/themes/handsome/component/sidebar.php第127行左右，在
<?php while ($tags->next()): ?> <a href="<?php $tags->permalink();?>" class="label badge" title="<?php $tags->name(); ?>" data-toggle="tooltip"><?php $tags->name(); ?></a> <?php endwhile; ?> <?php endif; ?> </div> </section>下方增加代码
<!--网站公告--> <section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear"> <h5 class="widget-title m-t-none text-md">网站公告</h5> <div class="tags l-h-2x"> <!--在这里写公告的内容--> </div> </section>网站公告内容
IPV6提示
在公告内容写入处写入以下内容
<p>● 本站已支持IPV6访问！</p>网站运行时间
在公告内容写入处写入以下内容
<p> ● Kano酱博客的第<span id="site_runtime" style="color: #24a0f0;"></span>天</p> <script type="text/javascript"> function show_site_runtime(){ X=new Date("2021-02-19"); //在这里修改你的建站时间 Y=new Date(); T=(Y.getTime()-X.getTime()); // 获取当前时间与指定时间之间的时间间隔（ms） i=24*60*60*1000; d=T/i; D=Math.floor(d); // 计算天数并向下取整 site_runtime.innerHTML= D } show_site_runtime(); </script>参考来源：Hexo 博客显示网站运行时间代码
手机端不在下方显示右侧边栏内容.
开发者选项自定义CSS加入
/*手机不显示热门及标签云*/@media (max-width:767px) { #tabs-4,#tag_cloud-2 { display: none; }}修改首页文章摘要日期显示格式
文件：/usr/themes/handsome/libs/Content.php第861行左右，将
if ($parameterArray['date'] != 0) { $dateString = date(I18n::dateFormat(), $parameterArray['date']); }修改为
if ($parameterArray['date'] != 0) { $dateString = date("y/n/j", $parameterArray['date']); }注意：这样修改会使主题对日期的翻译功能失效，不过日期的读法在全世界都是通用的，问题不大。
评论日期本土化处理
handsome的日期格式调用的是typecho的日期格式，只需要修改typecho的日期格式即可。
后台-`设置-评论-评论日期格式`
将默认的日期格式修改为：Y年m月d日 H:i:s，更多格式，请参照date
增加编辑器toc目录支持
注：本节的前提是，在handsome插件中启用vditor编辑器，并且前台使用vditor渲染。
toc是markdown的扩展语法，在markdown文章的适当位置加入标记#
“#”（实际使用中请把“#”去掉），即可将文章内的标题自动转换成目录的形式。toc目录分为两个方面，一个是后台渲染，一个是前台渲染，两者引入的文件不同，在vditor默认的配置中，toc目录功能是被关闭的。后台编辑器渲染引入的文件是index.min.js，前台渲染用的是method.min.js。vditor支持丰富的自定义设置，更多信息你可以在README.md上获得支持。
后台渲染toc目录支持
Handsome对vditor的一些自定义配置存储在/usr/plugins/Handsome/assets/js/origin/editor-js.php中，需要修改它以支持toc目录功能。
修改文件/usr/plugins/Handsome/assets/js/origin/editor-js.php第861行左右
原文：
preview: { icon: "material", hljs: { enable: true, style: 'monokai', lineNumber: true }, "math": { "engine": "MathJax", "macros": { "bf": "{\\boldsymbol f}", "bu": "{\\boldsymbol u}", "bv": "{\\boldsymbol v}", "bw": "{\\boldsymbol w}" }, "inlineDigit": true },修改为：
preview: { icon: "material", hljs: { enable: true, style: 'monokai', lineNumber: true }, markdown: { toc: true }, "math": { "engine": "MathJax", "macros": { "bf": "{\\boldsymbol f}", "bu": "{\\boldsymbol u}", "bv": "{\\boldsymbol v}", "bw": "{\\boldsymbol w}" }, "inlineDigit": true },即增加了一个自定义设置markdown: {toc: true}，打开toc目录功能。
前台渲染toc目录支持
虽然一直想尽力避免对vditor源码的修改，就像前面的后台渲染一样，通过修改主题插件实现。但是对于前台渲染，由于不需要编辑功能，直接引入method.min.js即可。理论上，设置method.min.js功能的方法和设置index.min.js类似，但是由于能力有限（ ~我太菜了~ ），暂时只能通过修改vditor源码的方式实现，即修改method.min.js。所以，要想实现前台渲染支持toc目录的，需要将vditor资源本地化或者在github拉取vditor后修改，通过Jsdelivr重新引入。
本地化vditor资源后，修改文件/usr/themes/handsome/assets/libs/vditor/dist/method.min.js第87行左右，将toc: false,修改成toc: true,
所有的这一切做完后，理论上前后台都能渲染toc目录了。当然，需要清除一下浏览器的页面缓存，使更改的js生效。
修改toc目录文字的颜色，便于与正文做出区分。添加自定义css代码：
/*toc目录文字颜色*/.vditor-toc { color: #337ab7;}/*toc目录文字颜色结束*/
将时光机的链接cross.html改为cross
把handsome/component/headnav.php 第267行中的（或在文件中搜索） cross.html 修改为 cross ；
echo '<a href="'.BLOG_URL_PHP.'cross" class="list-group-item"><span class="clear block m-b-none words_contents">'.CommonContent::excerpt($content,200).'<br><small class="text-muted">'.Utils::formatDate($comments,$comment['created'],handsome/cross.php 第73行有一处是 cross.html，修改为 cross。
handsome/component/aside.php 第28、29、30、31行有两处是 cross.html，修改为 cross。
<a href="<?php echo Utils::returnDefaultIfEmpty($this->options->clickAvatarLink,$this->options->rootUrl.'/cross.html') ; ?>">
<?php else: ?>
<a href="<?php echo Utils::returnDefaultIfEmpty($this->options->clickAvatarLink,$this->options->rootUrl.'/index.php/cross.html') ; ?>">
<?php endif; ?>页眉添加天气插件
位置：
大约第117行，搜索，在这个之前，可能有个<?php endif;?>在这个之后，插入下面代码，更换为自己的API。
代码
<!-- 知心天气-->
<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script>
(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))
</script>
<script>tpwidget("init", {
"flavor": "slim",
"location": "WX4FBXXFKE4F",
"geolocation": "enabled",
"language": "auto",
"unit": "c",
"theme": "chameleon",
"container": "tp-weather-widget",
"bubble": "enabled",
"alarmType": "badge",
"color": "#C6C6C6",
"uid": "公钥",
"hash": "私钥"
});
tpwidget("show");
</script>
<!-- 知心结束-->心知官网：https://docs.seniverse.com/widget/start/get.html
https://www.seniverse.com/dashboard
美化鼠标指针
以handsome主题为例：外观——主题设置——开发设置——自定义css。插入以下代码
body {
cursor:url('鼠标指针图片链接'), auto;
}
select, input, textarea, a, button {
cursor:url('鼠标指针图片链接'), auto;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {
cursor:url('鼠标指针图片链接'), auto;
}其他主题方法大致相同 把这代码输出在之前就ok
部分内容转载自以下网站
