Cuteen主题美化集中(兼容4.X版本中)

[quote color="success"]代码来源沙雕群友分享/自己修改/网络收集(所有代码都别复制//后面的注释,不然注释下面的代码会失效)
插件版本:https://www.txmmp.cn/index.php/archives/27/
[/quote]

美化

[card title="侧边栏个人信息" color="info"]
<div class="sidebar-box sidebar-box-two"> <div class="social"> <a href="https://space.bilibili.com/4935061" rel="nofollow" target="_blank" class="texiao"><img src="https://p.pstatp.com/origin/137f10001585dc4b9bf22"></a> <a href="https://gitee.com/quietes" rel="nofollow" target="_blank" class="texiao"><img src="https://p.pstatp.com/origin/137e90001143f7ee95bdb"></a> <a href="http://wpa.qq.com/msgrd?v=3&uin=630876811&site=qq&menu=yes" rel="nofollow" target="_blank" class="texiao"><img src="https://p.pstatp.com/origin/1380000012cb6467b7f09"></a> <a href="https://music.163.com/#/user/home?id=62664090" rel="nofollow" target="_blank" class="texiao"><img src="https://p.pstatp.com/origin/ffff000227d8ccd4f785"></a> </div> </div>♾️ js 代码:

// css代码
.sidebar-box-two{
min-height:unset;
}
.social{
display: flex;
    justify-content: space-around;
}
.social img {
   width: 40px;
   height: auto;
   margin: 20px 0;
   border-radius: 50px;
}
.texiao:hover{
transform: scale(1.2);
transition: all .5s;
}

[/card]
[card title="文章列表圆角+阴影" color="success"]
自定义css里添加如下代码即可
[/card]

.article.have-img.d-flex{
border-radius: 40px;
    box-shadow: 2px 4px 3px rgba(0,0,0,.2);
}
.carousel-inner{
    border-radius: 40px;
    box-shadow: 2px 4px 3px rgba(0,0,0,.2);
}

[card title="手机端开启毛玻璃" color="info"]
xxxxx/usr/themes/Cuteen/static/css/app.css,大概2210行
.article.have-img, .article.have-img .blur-img { /*display: none;*/ } .article-time{ display: none !important; } //颜色 .article:not(.card-style) { height: 8.5rem; background-color: var(--bs-white); color: #f8f9fa; margin-bottom: 1rem; }

[/card]
[card title="手机端修改卡片样式" color="success"]
//2178/2183行 .article.have-img .article-img ,.article.have-img.no-bg-img .article-img{ margin: 0.5rem 0 0.5rem 0.5rem; display: none!important; } .article.have-img.flex-row-reverse .article-img,.article.have-img.no-bg-img.flex-row-reverse .article-img { margin: 0.5rem 0.5rem 0.5rem 0; display: none!important; } //2192行 .article.have-img .article-ctx { padding: 1rem; min-width:calc(100% - 80px - 0.5rem); margin: 0 auto; } //1961行 .article.have-img .blur-img img{ filter: brightness(0.6); }

[/card]

[card title="增加分类详细模板" color="success"]
public static function getclassifyNum($widget) { $db = Typecho_Db::get(); $rows = $db->fetchAll($db->select() ->from('table.metas') ->where('table.metas.type = ?', 'category')); $stat = array(); foreach ($rows as $row) { $row = $widget->filter($row); $arr = array( 'name' => $row['slug'], 'num' => $row['count'] ); array_push($stat,$arr); } return $stat; }

2.然后还是去/usr/themes/Cuteen/base/sidebar.php 在最新回复的上面
<div class="sidebar-box classListBox"> <div class="p-3">分类详情</div> <ul> <?php $classlist = Ctx::getclassifyNum($this); foreach ($classlist as $posts) : ?> <li><?php print_r($posts['name']) ; ?> <span class="classNum"><?php print_r($posts['num']) ; ?></span></li> <?php endforeach; ?> </ul> </div>

3.添加完成后,就是设置样式了,自定义css里添加如下代码即可.

.classListBox li{
list-style: none;
    margin-bottom: 15px;
    padding-right: 40px;
}
.classNum{
    float: right;
    background-color: rgba(255,78,106,.1);
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 100%;
    color: #ff4e6a;
}

[/card]

BUG修复

[card title="#音乐播放器" color="success"]
好像歌名太长,在手机端上就会出现宽度填满屏幕的问题,自定义css里加入如下代码即可,限制最大宽度.

#musicMobileBox {
max-width: 12.5rem;
}

[/card]
[card title="开启pjax后加载条卡70%" color="success"]问题原因:
1.MathJax is not defined报错引起,加载结束函数放在MathJax后面的,报错就直接中断了无法向下执行了.
2.通过查看文档,pjax:ready貌似取的document不是window.
找到文件/usr/themes/Cuteen/base/footer.php,大概135行左右,把第二个window改为document,然后把NProgress.done()提到最上面就行了
window.addEventListener('pjax:fetch', function () { NProgress.set(0.7); }); document.addEventListener('pjax:ready', function () { NProgress.done(); PjaxLoad(); MathJax.typeset(); <?php if ($this->options->pjaxContent) : $this->options->pjax回调(); ?><?php endif; ?> });

[/card]

评论关键字检测

https://www.txmmp.cn/index.php/archives/18/ 查看具体

添加心知天气

https://www.txmmp.cn/index.php/archives/17/ 查看具体