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

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

Quite
2020-10-23 / 10 评论 / 2,957 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2020年12月11日,已超过234天没有更新,若内容或图片失效,请留言反馈。

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

美化

[card title="侧边栏个人信息" color="info"]
QQ截图20201204012951.png
找到文件/usr/themes/Cuteen/base/sidebar.php
大概25行左右,添加下方代码,修改里面的图片以及跳转链接即可
如需要鼠标触摸图片放大请到后台主题设置自定义css代码添加下方css代码

    <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>
// 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行
QQ截图20201204015044.png
把display:none 注释掉,然后把article-time单独提出来,在下一行添加样式:display:none,这个是手机端上显示发布日期的,如果你想显示那就不用单独提出来,不过显示日期会影响一点点布局.添加毛玻璃后字体颜色默认黑色,可能部分会看不清,接着去修改颜色~app.css大概2045行 QQ截图20201204015450.png,把color改为color: #f8f9fa;

    .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"]
QQ截图20201204224528.png
1.在1961左右媒体查询下面的增加一个属性,用来判断是否mobile访问用以去掉毛玻璃效果.
QQ截图20201205144301.png
2.2178行跟2183行左右,如图添加display:none !important;
3.2192行添加margin:0 auto,让短标题居中.
QQ图片20201204121946.png

//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"]
QQ截图20201205142458.png
1.先去 /usr/themes/Cuteen/inc/ctx.php 添加一个函数,用于获取分类name跟count

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 在最新回复的上面
QQ截图20201205142839.png
添加如下代码

<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()提到最上面就行了
QQ截图20201211224956.png

        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/ 查看具体

4

评论 (10)

取消
  1. 头像
    prpvrwll
    Windows XP · Internet Explore

    Cuteen主题美化集中(兼容4.X版本中) - 风来自很远の地方
    prpvrwll http://www.gpxfi44r4fsm73k1s2488w5ct8d3t398s.org/
    [url=http://www.gpxfi44r4fsm73k1s2488w5ct8d3t398s.org/]uprpvrwll[/url]
    aprpvrwll

    回复
  2. 头像
    猫猫
    Linux · Google Chrome

    来学习一下

    回复
  3. 头像
    阿巴阿巴
    Linux · Google Chrome

    测试小程序

    回复
  4. 头像
    Jの故事
    Windows 10 · Google Chrome

    爱了 爱了

    回复
  5. 头像
    Micah
    Windows 10 · Google Chrome

    牛逼牛逼

    回复
  6. 头像
    Mr_zwX
    Windows 10 · Google Chrome

    很棒! 表情

    回复
  7. 头像
    摸鱼酱
    Windows 10 · Google Chrome

    谢谢兄弟

    回复
  8. 头像
    Ayooo
    Windows 10 · Google Chrome

    鼓励呀

    回复
  9. 头像
    Cat
    Windows 10 · Google Chrome

    我爱你

    回复
  10. 头像
    十里清欢
    Windows 10 · Google Chrome

    666

    回复