Jasmine

自用主题修改记录
handsome主题修改备忘
扫描右侧二维码阅读全文
20
2018/08

自用主题修改记录

handsome主题修改备忘

顶部导航天气

在/usr/themes/handsome/component/headnav.php添加如下代码

<!-- 天气 -->
<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>
<!-- 天气结束 -->

自定义css

控制台>>外观>>设置外观>>开发者设置>>自定义CSS

/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

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

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

/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

/*首页头像自动旋转*/
.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
}

网站运行时间

控制台>>外观>>设置外观>>开发者设置>>博客底部左(右)侧信息
或者直接在/usr/themes/handsome/component/footer.php添加如下代码

<span id="runtime_span"></span>
<script type="text/javascript">function show_runtime(){window.setTimeout("show_runtime()",1000);X=new
Date("8/20/2018 12:22:00");
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>

左侧导航栏添加二级菜单

文件路径:/usr/themes/handsome/component/aside.php
110行左右的

$asideItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><i class="'.$itemClass.' icon text-md"></i><span>'._mt($itemName).'</span></a></li>';

替换成

if (strtoupper($itemStatus) === 'SEC') {
    $asideSecondItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><i class="'.$itemClass.' icon text-md"></i><span>'._mt($itemName).'</span></a></li>';
}else{
    $asideItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><i class="'.$itemClass.' icon text-md"></i><span>'._mt($itemName).'</span></a></li>';
}

130行前后的

<!-- /主页 -->
<?php endif; ?>
<?php echo @$asideItemsOutput ?>
<?php if (@!in_array('component',$this->options->asideSetting)): ?>

后面添加代码

<?php if (@$asideSecondItemsOutput): ?>
    <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-magnet"></i>
            <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>
<!--二级菜单-->
            <?php echo @$asideSecondItemsOutput ?>
        </ul>
    </li>
<?php endif; ?>

控制台>>外观>>设置外观>>高级设置>>左侧边栏导航
添加代码

{"name":"百度","class":"glyphicon glyphicon-search","link":"https://www.baidu.com","status":"sec"}

神代綺凜魔改CSS

点击下载神代綺凜魔改的CSS handsome.css(无法直接下载请右键另存为)
上传至/usr/themes/handsome/assets/css
在/usr/themes/handsome/component/header.php的第48行添加一行代码,引入CSS

<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />

接下来修改/usr/themes/handsome/libs/Content.php,在第856行左右添加一行代码

增大进入文章的点击范围,不添加只能点标题查看文章

<a href="{$parameterArray['linkUrl']}" class="ahover"></a>

添加完后代码前后如下

</div><!--text-muted-->
<a href="{$parameterArray['linkUrl']}" class="ahover"></a><!--添加的代码-->
</div><!--post-meta wrapper-lg-->
</div><!--panel/panel-small-->

神代綺凜 还使用了魔改的JS,有需要自行去其网页下载

Last modification:September 24th, 2018 at 01:37 pm

2 comments

  1. 小羊

    盒子模型怎么改位置呢

    1. 小羊
      @小羊

      了解了

Leave a Comment