handsome主题美化记录(备忘）

彩色标签云

[collapse status="false" title="标签云"]

<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});

主题设置 - 开发者设置 - 自定义 JavaScript添加代码。
[/collapse]

标题栏自动变化

[collapse status="false" title="标题栏自动变化"]

<script>
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "大爷别走嘛！";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)你又回来了！ " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});
</script>

主题设置 - 开发者设置 - 自定义输出body尾部的HTML代码添加
[/collapse]

首页文章圆角化

[collapse status="false" title="首页文章圆角化"]

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

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

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

[/collapse]

首页文章图片获取焦点放大

[collapse status="false" title="首页文章图片获取焦点放大"]

/*首页文章图片获取焦点放大*/
.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);
}

添加主题设置 自定义CSS。
[/collapse]

首页文章版式阴影化

[collapse status="false" title="首页文章版式阴影化"]

/*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);
}

添加主题设置 自定义CSS。
[/collapse]

文章内打赏图标跳动

[collapse status="false" title="文章内打赏图标跳动"]

.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

添加主题设置 自定义CSS
[/collapse]

右侧列表导航栏图标颜色

[collapse status="false" title="右侧列表导航栏图标颜色"]

/* 右侧列表导航栏图标颜色 */
.sidebar-icon svg.feather.feather-thumbs-up{color: #52DE97;}
.sidebar-icon svg.feather.feather-message-square{color:#495DC3;}
.sidebar-icon svg.feather.feather-gift{color:#F67280;}

添加主题设置 自定义CSS
[/collapse]

访客总数统计

[collapse status="false" title="访问统计"]

//总访问量
function theAllViews()
    {
        $db = Typecho_Db::get();
        $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
            echo number_format($row[0]['SUM(VIEWS)']);
    }

由于functions.php文件打不开，在问过作者后，上面代码可以添加到Content.php文件。
在/usr/themes/handsome/component/sidebar.php文件中插入以下调用代码

<li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted"></i> <span class="badge
pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>

[/collapse]

博客底部页脚标签样式

[collapse status="false" title="底部页脚标签样式"]
将以下代码添加至后台主题设置自定义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
}

将以下代码添加至后台主题设置博客底部左侧信息，信息自己修改

<div class="github-badge">
<a href="./" title="©2020&nbsp;Alvin">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2020&nbsp;Alvin</span>
</a>
</div>
&nbsp;|&nbsp;
<div class="github-badge">
<a href="http://www.miitbeian.gov.cn/" target="_blank" title="粤ICP备 999999号" style="pointer;">
<span class="badge-subject">粤ICP备</span><span class="badge-value bg-green">999999号</span>
</a>
</div>

将以下代码添加至后台主题设置博客底部右侧信息

<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
&nbsp;|&nbsp; 
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C" style="pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>

添加完成后，去handsomecomponentfooter.php删除原有声明代码，替换以下代码（大概1~12行）

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php Content::outputCommentJS($this, $this->security); ?>
</div><!-- /content -->
  <footer id="footer" class="app-footer" role="footer">
    <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>

[/collapse]