作者： 0
信息・技术

Handsome主题修改记录（非完全）–Typecho博客程序

Handsome主题修改记录（非完全）–Typecho博客程序
作者： 0
信息・技术

交集处logo居中

[collapse status=”false” title=”交集处logo居中”]

  • 在handsome/component/headnav.php文件中找到以下代码
<?php if ($this->options->logo!=""): ?>
    <?php echo $this->options->logo; ?>
<?php else: ?>
    <?php if ($this->options->indexNameIcon == ""): ?>
        <i class="fontello fontello-home"></i>
    <?php else: ?>
        <i class="<?php echo $this->options->indexNameIcon; ?>"></i>
    <?php endif; ?>
    <span class="hidden-folded m-l-xs"><?php $this->options->IndexName(); ?></span>
<?php endif; ?>
  • 在以上代码外侧添加以下代码
<!--增加一个div框架 赋190px最小宽度-->
<div style="min-width:190px">
</div>

[/collapse]

添加百度分析

[collapse status=”false” title=”添加百度分析”]
[scode type=”blue”]文件目录：
component/header.php[/scode]~~
添加至自定义js
[/collapse]

修改下方版权信息

[collapse status=”false” title=”修改下方版权信息”]
[scode type=”blue”]文件目录：
component/footer.php[/scode]
[/collapse]

删除【组织】部分

[collapse status=”false” title=”删除【组织】部分”]
[scode type=”blue”]文件目录：
component/aside.php[/scode]
[/collapse]

左侧下部按钮修改

[collapse status=”false” title=”左侧下部按钮修改”]
[scode type=”blue”]文件目录：
component/aside.php[/scode]
[/collapse]

头像部分问候语

[collapse status=”false” title=”头像部分问候语”]
[scode type=”blue”]文件目录：
component/aside.php[/scode]
[/collapse]

添加天气插件（心知天气）

[collapse status=”false” title=”添加天气插件（心知天气）”]
[scode type=”blue”]文件目录：
component/headnav.php[/scode]

<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": "black", "container": "tp-weather-widget", "bubble": "enabled", "alarmType": "badge", "color": "#00AFDB", "uid": "UB7BEE62D3", "hash": "3600ce1f732c2aa637f35517da5f7081" }); tpwidget("show");</script>

[/collapse]

更改搜索框位置

[collapse status=”false” title=”更改搜索框位置”]
[scode type=”blue”]文件目录：
component/headnav.php[/scode]
[/collapse]

文章复制弹窗

[collapse status=”false” title=”文章复制弹窗”]

  • 下载layui或layer，将解压后的layui或layer文件夹添加到handsome/assets/js目录中（建议使用layer独立版）
    [button color=”success” icon=”” url=”https://res.layui.com/static/download/layui/layui-v2.5.6.zip?v=2″ type=”round”]点击下载layui[/button]    [button color=”info” icon=”” url=”https://res.layui.com/static/download/layer/layer-v3.1.1.zip” type=”round”]点击下载layer独立版[/button]
  • 在component/headre.php文件中插入以下代码（基于layer独立版）
<script src="<?php echo STATIC_PATH; ?>js/layer/layer.js"></script>
  • 在主题设置-开发者设置-自定义JavaScript中插入以下代码（基于layer独立版）
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接！', function(){ });};
  • layer和layui使用上的区别
<!--作为独立版使用layer-->
<!--引入好layer.js后，直接用即可-->
<script src="layer.js"></script>
<script>
layer.msg('hello'); 
</script>
<!--在layui中使用layer-->
<!--引入好后，使用以下方式调用-->
layui.use('layer', function(){
  var layer = layui.layer;
  
  layer.msg('hello');
});

layer和layui的使用，除此之外完全一致。(注意目录！注意目录！注意目录！)
[/collapse]

Mac风格代码高亮

[collapse status=”false” title=”风格代码高亮”]
[post cid=”344″ /]
[/collapse]

彩色标签云

[collapse status=”false” title=”彩色标签云”]

  • 在主题设置-开发者设置-自定义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;
});

[scode type=”blue”]标签云CSS文件：/usr/themes/handsome/assets/css/handsome.min.css[/scode]

首页字体CSS

[scode type=”blue”]首页字体CSS文件：/usr/themes/handsome/assets/css/features/newblack.min.css[/scode]

文档框切圆角

  • 在主题设置-开发者设置-自定义 CSS中插入以下代码
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;  
}

[/collapse]

增加UserAgent

[collapse status=”false” title=”启用此插件”]

  • 下载UA插件[button color=”info” icon=”” url=”https://github.com/hakula139/UserAgent-for-Typecho” type=”round”]Github[/button]
  • 修改handsome/component/component.php
    在需要的位置添加添加
<?php echo $Identity; ?><?php UserAgent_Plugin::render($comments->agent); ?>

根据模板判断使用使用$this或$comments

Handsome主题是为：

            <span class="comment-author vcard">
              <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?><?php UserAgent_Plugin::render($comments->agent); ?>
              </span>

[/collapse]

  • 弃用以上插件，启用新插件

[collapse status=”false” title=”启用新插件”]
[button color=”info” icon=”” url=”https://doge.uk/coding/useragent-modify.html” type=”round”]原文链接[/button]    [button color=”info” icon=”” url=”https://doge.uk/wp-content/uploads/2020/03/1583421311-1902984185.zip” type=”round”]下载地址[/button]
源代码改为：

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

[/collapse]

修改右部背景色

[collapse status=”false” title=”修改右部背景色”]
[scode type=”blue”]文件目录：
component/sidebar.php[/scode]
第五行改为

<aside class="asideBar col w-md bg-dark  no-border-xs" role="complementary">

[/collapse]

CDN获取真实地址

[collapse status=”false” title=”CDN获取真实地址”]
[scode type=”blue”]config.inc.php[/scode]

//** 防止CDN造成无法获取客户真实IP地址 */
if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) 
{
    $list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
    $_SERVER['REMOTE_ADDR'] = $list[0];
}

[/collapse]

修改中部日志输出部分背景

[collapse status=”false” title=”修改中部日志输出部分背景”]
[scode type=”blue”]文件目录：
post.php[/scode]
第80行

<div class="wrapper-md" id="post-panel>

标签中删除

id="post-panel"

[/collapse]

修改中部分类部分背景

[collapse status=”false” title=”修改中部分类部分背景”]
[scode type=”blue”]文件目录：
archive.php[/scode]
第53行

<div class="wrapper-md" id="post-panel>

标签中删除

id="post-panel"

[/collapse]

修改独立页面背景

[collapse status=”false” title=”修改独立页面背景”]
[scode type=”blue”]文件目录：
archive.php[/scode]
第16行

<div class="wrapper-md" id="post-panel>

标签中删除

id="post-panel"

[/collapse]

一劳永逸去除所有页面背景

[collapse status=”false” title=”一劳永逸去除所有页面背景”]
[scode type=”blue”]文件目录：
assets/css/handsome.min.css
assets/css/features/coolopacity.min.css[/scode]
第三行删除

background:#f1f3f4;

[/collapse]

评论输入框切圆角

[collapse status=”false” title=”评论输入框切圆角”]
[scode type=”blue”]文件目录：
handsome/component/component.php[/scode]

textarea#comment{
background-image: url('<?php echo $this->options->commentBackground; ?>');
background-color: #ffffff;
transition: all 0.25s ease-in-out 0s;
border-radius: 10px;
}

[/collapse]

修改th标签与背景同为白色的bug

[collapse status=”false” title=”修改th标签与背景同为白色的bug”]
[scode type=”blue”]文件目录：
assets/css/features/coolopacity.min.css[/scode]
第7行

th{border:1px solid rgba(255,255,255,.15); color:#333;}

[/collapse]

<blockquote>引用块标签右侧切圆角

[collapse status=”false” title=”blockquote引用块标签右侧切圆角”]
[scode type=”blue”]文件目录：
assets/css/features/coolopacity.min.css[/scode]
第5行

#post-content blockquote{background:rgba(255,255,255,.3);color:#fff;border-radius:0 6px 6px 0;}

[/collapse]

日志内引用文章部分加边框

[collapse status=”false” title=”日志内引用文章部分加边框”]
[scode type=”blue”]文件目录：
assets/css/handsome.min.css[/scode]
特么的第五大行！

.post-inser{position:relative;overflow:hidden;max-height:145px;padding:12px;box-sizing:border-box;font-size:13px;box-shadow:0 1px 2px rgba(0,0,0,.15),0 0 1px rgba(0,0,0,.15);border-radius:5px;margin:20px 0;border: solid 1px; border-color:255,255,255,.5;}

添加了

border: solid 1px; border-color:255,255,255,.5;

[/collapse]

修改头像形状大小

[collapse status=”false” title=”修改头像形状大小”]

  • 尺寸

[scode type=”blue”]文件目录：
assets/css/handsome.min.css[/scode]
特么的第一大行！改为

.thumb-lg{display:inline-block;width:115px;}
  • 切圆角

[scode type=”blue”]文件目录：
assets/libs/bootstrap/css/bootstrap.min.css[/scode]
特么的第五大行！改为

.img-circle{border-radius:25%}

[/collapse]

优化列表内文字可阅读性

[collapse status=”false” title=”优化列表内文字可阅读性”]
[scode type=”blue”]文件目录：
handsome/assets/css/features/coolopacity.min.css[/scode]

table tr{border-top:1px solid rgba(255,255,255,.25);
background-color:rgba(255,255,255,.5)}
table tr:nth-child(2n){background-color:rgba(255,255,255,.7)}

[/collapse]

上部加获取当前设备时间

[collapse status=”false” title=”上部加获取当前设备时间”]
[scode type=”blue”]三个文件：
headnav.php
showTime.js
showTime.css[/scode]
[/collapse]

底部增加网站运行时间

[collapse status=”false” title=”底部增加网站运行时间”]
[scode type=”blue”]文件目录：
component/footer.php[/scode]

<!--网站运行时间 开始-->
        <span style="border-radius:5px 0 0 5px; background-color: #C0F; box-sizing:border-box; color:#FFF; display:inline-block; font-size:12px; line-height:15px; padding-bottom:4px; padding-left:6px; padding-right:4px; padding-top:4px; text-shadow:none;">网站已重启</span><span id="runtime_span" style="border-radius:0 5px 5px 0; background-color: #0C6; box-sizing:border-box; color:#FFF; display:inline-block; font-size:12px; line-height:15px; padding-bottom:4px; padding-left:4px; padding-right:6px; padding-top:4px; text-shadow:none;"></span>
        <script type="text/javascript">
        function show_runtime()
        {window.setTimeout("show_runtime()",1000);X=new 
        Date("3/29/2020 10:48:26");
        Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000;
        a=T/M;A=Math.floor(a);b=(a-A)*24;B=Math.floor(b);c=(b-B)*60;C=Math.floor((b-B)*60);D=Math.floor((c-C)*60);
        runtime_span.innerHTML=""+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime();
        </script>
<!--网站运行时间 结束-->

[/collapse]

准备启用邮件插件LoveKKComment

[collapse status=”false” title=”准备启用邮件插件LoveKKComment”]
[button color=”info” icon=”” url=”https://github.com/ylqjgm/LoveKKComment” type=”round”]下载地址Github[/button]
[/collapse]

左侧导航栏添加独立站点标签

[collapse status=”false” title=”左侧导航栏添加独立站点标签”]
[scode type=”blue”]文件目录：
component/aside.php[/scode]

<!--独立页面标签 开始-->
<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>
    <i class="glyphicon glyphicon-cog"></i>
    <span>独立</span></a>
  <ul class="nav nav-sub dk">
    <li class="nav-sub-header">
      <a data-no-instant="">
        <span>独立</span></a>
    </li>
    <!--网站-->
    <li>
      <a href="http://Thepalace.vip/Yoki/KUEST/KUEST.html">
        <i class="glyphicon glyphicon-paperclip"></i>
        <span>KUEST</span></a>
    </li>
    <!--<li>
      <a href="">
        <i class="glyphicon glyphicon-picture icon text-md"></i>
        <span>待续</span></a>
    </li>
    <li>
      <a href="">
        <i class="glyphicon glyphicon-ice-lolly-tasted"></i>
        <span>待续</span></a>
    </li>-->
  </ul>
</li>
<!--独立页面标签 开始-->

[/collapse]

优化评论输入框的可视性

[collapse status=”false” title=”优化评论输入框的可视性”]
[scode type=”blue”]文件目录：
component/comments.php[/scode]

textarea#comment{
                background-image: url('<?php echo $this->options->commentBackground; ?>');
                background-color: #ffffff;
                transition: all 0.25s ease-in-out 0s;
        border-radius: 10px;
        color:#FFF;<!--设置白色-->
        }

[/collapse]

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注