风来自远方 相爱的人总会相逢
蜀ICP备15021793号-2自豪地使用 Typecho 建站搭配使用 🌻Sunny 主题当前在线 1 人
歌曲封面 未知作品

蜀ICP备15021793号-2

网站已运行 3 年 295 天 4 小时 33 分

Powered by Typecho & Sunny

2 online · 32 ms

Title

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

Quite

·

Article
⚠️ 本文最后更新于2020年12月11日,已经过了1281天没有更新,若内容或图片失效,请留言反馈

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

美化

[card title="侧边栏个人信息" color="info"]
QQ截图20201204012951.png <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]

♾️ js 代码:
.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 .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//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.pngpublic 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里添加如下代码即可.

♾️ js 代码:
.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里加入如下代码即可,限制最大宽度.

♾️ js 代码:
#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/ 查看具体

现在已有 10 条评论,5 人点赞
Comment
发表
  1. 头像
    @
    Cuteen主题美化集中(兼容4.X版本中) - 风来自很远の地方
    prpvrwll http://www.gpxfi44r4fsm73k1s2488w5ct8d3t398s.org/
    [url=http://www.gpxfi44r4fsm73k1s2488w5ct8d3t398s.org/]uprpvrwll[/url]
    aprpvrwll
    · Windows · IE浏览器

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  2. 头像
    @
    猫猫
    来学习一下
    · Linux · Chromium

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  3. 头像
    @
    阿巴阿巴
    测试小程序
    · Linux · Chromium

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  4. 头像
    @
    爱了 爱了
    · Windows · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  5. 头像
    @
    牛逼牛逼
    · Windows · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  6. 头像
    @
    很棒! ::(哈哈)
    · Windows · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  7. 头像
    @
    谢谢兄弟
    · Windows · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  8. 头像
    @
    鼓励呀
    · Windows · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  9. 头像
    @
    Cat
    我爱你
    · Windows · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  10. 头像
    @
    666
    · Windows · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
搜 索 消 息 足 迹
你还不曾留言过..
你还不曾留下足迹..
博主