排行榜 归档 统计
  • 建站日期:2020-12-31
  • 文章总数:138 篇
  • 评论总数:6 条
  • 分类总数:7 个
  • 最后更新:4小时前
原创教程文章

小灯泡Spimes主题样式更改教程

本文阅读 8 分钟
首页 教程文章 正文
本文最后更新于2021年12月09日,已超过45天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

本文是来自我折腾这款主题的一些经历
尽可能是完善我想要实现的功能,和稍微优化一些个人的体验性。

共修改了这些文件
spimes/header.php(两个地方)
spimes/comments.php
spimes/sidebar.php
spimes/functions.php
spimes/post.php(五个地方)
spimes/core/oin.php

播放器
直接复制粘贴原来的过来就行了,里面也有部分东西要修改,在这里就不做演示了。


音乐代码添加

在header.php文件最后添加以下代码

<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js"></script>

这样就可以在文章中插入音乐了。
具体方法参考typecho折腾记录里的教程。


在如上图所示地方,添加以下代码。

<a href="//to8to.com" target="_blank"><img src="https://i.0f1.cn/qr.gif"> </a>

设置好后,首页LOGO旁边就会有一个小广告LOGO了,可以用来给自己的小站做推荐。


评论提示



修改主题目录下的comments.php文件
复制以下代码添加到如上图所示位置即可。

<!--评论提示-->
<center><font color="red"><h4>本站已加入互联网信息服务许可,请规范您的言行!<img src="/usr/themes/spimes/owo/img/paopao/E99DA0E5A299E79C8B_2x.png" height="30" width="30" /></h4></font></center>
<!--评论提示-->

边栏作者信息修改


修改主题目录下的sidebar.php文件
复制以下代码添加到如上图所示位置即可。

<!--右上角作者简介-->
<div class="user sidebox"> <div class="user__head bg_color"> <div class="user__img"> <img src="./ptuguai/tx.jpg" alt="P图怪博客"> </div> </div> <div class="user__title"> <h2>P图怪博客</h2> <p>多说不如多做、学习永远不晚</p> </div> <div class="user__btns"> <a href="./about.html" target="_blank" class="user__btn user__btn--blue" one-link-mark="yes"><span>关于站长</span></a> <a href="tencent://message/?uin=2246367063&amp;Site=qq&amp;Menu=yes" target="_blank" class="user__btn user__btn--orange" one-link-mark="yes"><span>在线联系</span></a> </div>  <a href="//qm.qq.com/cgi-bin/qm/qr?k=LnFV8pgs_rGRja5eDqQ6RkoKQAgx_cvy&jump_from=webapi" class="sidebox__more" target="_blank">点击添加官方QQ群</a> </div>
<!--右上角作者简介-->

并且修改互动读者为文章作者。

修改完毕后。

需要最先修改functions.php文件
需要修改三个地方的post.php文件

添加文章字数统计

修改前:

修改后:

修改主题目录下的functions.php文件
直接在最后面添加如下代码。注意下图。

function  art_count ($cid){
    $db=Typecho_Db::get ();
    $rs=$db->fetchRow ($db->select ('table.contents.text')->from ('table.contents')->where ('table.contents.cid=?',$cid)->order ('table.contents.cid',Typecho_Db::SORT_ASC)->limit (1));
    $text = preg_replace("/[^\x{4e00}-\x{9fa5}]/u", "", $rs['text']);
    echo mb_strlen($text,'UTF-8');
}

文章最后更新日期


顺便添加文章字数统计代码。
修改主题目录下的post.php文件

<span class="separator">/</span>
<?php art_count($this->cid); ?> 字

修改主题目录下的post.php文件

复制以下代码添加到如上图所示位置即可。

<!--文章编辑时间提示-->
<div class="j-alt warning">
本文最后更新于<?php echo date('Y年m月d日' , $this->modified);?>,已超过<?php echo floor((time()-($this->modified))/86400);?>天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!
</div>  
<!--文章编辑时间提示-->

文章阅读时间

文章阅读时间和文章编辑时间的位置对比。

修改主题目录下的post.php文件
在合适的地方添加如下代码,具体位置看上图示例。
修改成功后:

<!--文章阅读时间s-->
<div id="tingliu">
<span class="tingliu2" ><hr/>您阅读这篇文章共耗时:</span>
<span class="tingliu3" id="stime"></span>
</div>
<script language="JavaScript">var ss = 0, mm = 0, hh = 0; function TimeGo() { ss++; if (ss >= 60) { mm += 1; ss = 0 } if (mm >= 60) { hh += 1; mm = 0 } ss_str = (ss < 10 ? "0" + ss : ss); mm_str = (mm < 10 ? "0" + mm : mm); tMsg = "" + hh + "小时" + mm_str + "分" + ss_str + "秒"; document.getElementById("stime").innerHTML = tMsg; setTimeout("TimeGo()", 1000) } TimeGo();
</script>
<!--文章阅读时间s-->

文章编辑页面采用原版

<a href="<?php $this->options->siteUrl(); ?><?php $this->options->gaoedit(); ?>.html?tid=<?php $this->cid(); ?>" class="category-link"  target="_blank"><?php _e( '[编辑]' ); ?></a></i>

用下面的代码替换掉上面的代码即可。

<a href="<?php $this->options->adminUrl(); ?>write-post.php?cid=<?php echo $this->cid;?>" class="category-link"  target="_blank"><?php _e( '[编辑]' ); ?></a></i>

修改文章首页小标签

修改主题根目录spimes/core/oin.php文件
复制以下代码替换原文件位置。

    /**阅读量s**/
    if($exist<100){
    /** echo '<span class="badge arc_v1"></span>';**/
    }elseif ($exist<200 && $exist>100) {
    //echo '<span class="badge arc_v2">新秀</span>';
    }elseif ($exist<400 && $exist>=200) {
    echo '<span class="badge arc_v3">推荐</span>';
    }elseif ($exist<700 && $exist>=400) {
    echo '<span class="badge arc_v4">热文</span>';
    }elseif ($exist<1000 && $exist>=700) {
    echo '<span class="badge arc_v5">头条</span>';
    }elseif ($exist<1500 && $exist>=1000) {
    echo '<span class="badge arc_v6">火爆</span>';
    }elseif ($exist>=2000) {
    echo '<span class="badge arc_v7">神贴</span>';
    }
    /**阅读量s**/

设置好后效果如下:

这个目的就是把原来的数据改小,因为咱们的博客流量没那么大,所以数值改小了后,就有那些小标签了,要不然用不上主题这个功能,以后流量大了可以根据需求再行更改。

文章的访问量,赞量这些都可以到数据库里进行修改,比方说我那个头条就是文章访问在700-1000的时候就会出现。那么我修改数据库的文章查看量为700-1000之间即可。

这里修改的一些文章,建议是大家想让用户所观看的文章,不要随便一篇文章都去改那些虚假的访问量,没多大意义,而且你也不会有啥成就感,而且浪费时间。


CSS的增加与修改

我直接全部汇总了。
到时候直接复制到主题的CSS后台进行备份,或者修改主题的style.css文件。


/* audio播放器长度设置 */
audio { width: 100%; }

/* note tag标签样式设置 */
span.inline-tag {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 90%;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .1rem;
    border-radius: 6px;
    background-color: var(--Color)
}

p.red,
span.red {
    --Color: rgb(233, 30, 100);
    --ColorA: rgba(233, 30, 100, 0.2);
}

p.green,
span.green {
    --Color: rgb(139, 195, 74);
    --ColorA: rgba(139, 195, 74, 0.2);
}

p.blue,
span.blue {
    --Color: rgb(3, 169, 244);
    --ColorA: rgba(3, 169, 244, 0.2);
}

p.yellow,
span.yellow {
    --Color: rgb(255, 193, 7);
    --ColorA: rgba(255, 193, 7, 0.2);
}

p.grey,
span.grey {
    --Color: rgb(76, 76, 76);
    --ColorA: rgba(76, 76, 76, 0.2);
}

p.div-border {
    padding: 10px;
    border: 1px solid var(--Color,#333);
    border-radius: 0.4rem;
    background-color: var(--ColorA, transparent);
}

p.left {
    border-left-width: 5px;
    border-left-color: var(--Color);
}

p.bottom {
    border-bottom-width: 5px;
    border-bottom-color: var(--Color);
}

p.right {
    border-right-width: 5px;
    border-right-color: var(--Color);
}

p.top {
    border-top-width: 5px;
    border-top-color: var(--Color);
}

/* 全局网站字体 */
body {font-family: nexzhu!important;}
.image_title{display:none;}
.entry-content p img {  margin: auto; display: block;}

/*2246367063
.user__btn--blue {
    background: #29d;
}
.user__btn--orange {
    background: #d66;
}
.user__btn {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 40px;
    width: calc(50% - 10px);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-size: 14px;
    position: relative;
    overflow: hidden;
    color: #fff;
    font-weight: 600;
}
.user__btns {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 20px;
}
img.lazyload {
display: block;width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
img.dizgg {
display: block;
height: 80px;
width: 930px;
} */


/* 代码高亮 */ 

.entry-content pre code {
    position: relative;
    display: block;
    overflow-x: auto;
    margin: 4.4px 0.px .4px 1px;
    padding: 0;
    max-height: 500px;
    padding-left: 3.5em
}

.entry-content .code-toolbar pre code {
    position: relative;
    display: block;
    overflow-x: auto;
    margin: 4.4px 0.px .4px 1px;
    padding: 0;
    max-height: 500px;
    padding-left: 3.5em
}

.entry-content pre {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0;
    overflow: hidden
}

.bg-primary{ display: none;}

/*作者简介*/

.bg_color {

    margin: 0;
    width: 100%;
    height: 100vh;
    font-family: "Exo", sans-serif;
    color: #fff;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.user {
    position: relative;
    background-color: #fff;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    overflow: hidden;
    -webkit-box-shadow: 0 2px 26px 0 rgba(133, 153, 171, 0.1);
    box-shadow: 0 2px 26px 0 rgba(133, 153, 171, 0.1);
    border: 1px solid rgba(133, 153, 171, 0.2);
}

.user__head {
    background-color: #3796f6;
    position: relative;
    height: 120px;
    width: 100%;
}


.user__img {
    position: absolute;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid #fff;
    bottom: -50px;
    left: 50%;
    margin-left: -50px;
}

.user__img img {
    width: 100%;
    height: auto;
    border-radius: 50% !important;
}

.user__title {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 60px 20px 20px;

}

.down_tips {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 20px;
    border-left: 1px solid rgba(133, 153, 171, 0.2);
    border-right: 1px solid rgba(133, 153, 171, 0.2);
}

.down_tips p {
    margin-bottom: 0;
    line-height: 100%;
    font-size: 14px;
    color: #8599ab;
    font-weight: 400;
    padding: 10px;
    background-color: #f3f7ff;
    width: 100%;
    text-align: center;
}

.down_tips a {
    color: #fa7268;
}

.progress {
    border: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#0084ff), to(#00e5ff));
    background-image: linear-gradient(90deg, #0084ff, #00e5ff);
    animation: progressAnimationStrike 6s;
    border-radius: 6px;
    height: 6px;
    position: absolute;
}

.progress:before {
    content: "";
    background-color: hsl(0, 0%, 100%);
    border-radius: 50%;
    width: 4px;
    height: 4px;
    position: absolute;
    right: 1px;
    top: 1px;
    z-index: 1;
}

.progress:after {
    content: "";
    width: 14px;
    height: 14px;
    background-color: inherit;
    border-radius: 50%;
    position: absolute;
    right: -4px;
    top: -4px;
    background-color: #049dff;

}

.pro_tips {
    position: absolute;
    right: -17px;
    top: -30px;
}

.user__title h2 {
    font-size: 18px;
    color: #364e65;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 100%;
}

.user__title .autlv {
    vertical-align: middle;
}

.user__title p {
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 14px;
    color: #8599ab;
    font-weight: 400;
}

.user__nofo {
    padding: 20px 20px 0px 20px !important;
}

.user__btns {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 20px;

}

.user__btn {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 40px;
    width: calc(50% - 10px);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-size: 14px;
    position: relative;
    overflow: hidden;
    color: #fff;
    font-weight: 600;
}

.user__down {
    width: 100%;
}

.user__btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    transition: 0.4s;
    opacity: 1;
}

.user__btn span {
    position: relative;
    z-index: 1;
}

.user__btn--blue {
    background: #448ef6;
}

.user__btn--blue:before {
    background-color: #3796f6;
}

.user__btn--blue:hover {
    color: #fff;
}

.user__btn--blue:hover:before {
    opacity: 0;
}

.user__btn--orange {
    background: #f53628;
}

.user__btn--orange:before {
    background-color: #fa7268;
}

.user__btn--orange:hover {
    color: #fff;
}

.user__btn--orange:hover:before {
    opacity: 0;
}

.user__stats {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 20px;
    border-top: 1px solid rgba(133, 153, 171, 0.2);
    border-bottom: 1px solid rgba(133, 153, 171, 0.2);
}

.user__stats li {
    width: 50%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.user__stats li p {
    margin-bottom: 5px;
    line-height: 100%;
    font-size: 14px;
    color: #8599ab;
}

.user__stats li span {
    font-size: 24px;
    line-height: 100%;
    display: block;
    color: #364e65;
}

.user__stats:last-child {
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.user__list {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    border-top: 1px solid rgba(133, 153, 171, 0.2);
    padding: 15px 20px;
}

.user__list li {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}

.user__list li span {
    font-size: 14px;
    line-height: 28px;
    color: #8599ab;
}

.user__list li span:first-child {
    color: #364e65;
}

.sidebox {
    position: relative;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 2px 26px 0 rgba(133, 153, 171, 0.1);
    box-shadow: 0 2px 26px 0 rgba(133, 153, 171, 0.1);
}

.sidebox__more {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid rgba(133, 153, 171, 0.2);
    height: 40px;
    width: 100%;
    color: #3796f6;
    font-size: 14px;
    font-weight: 600;
    background-color: #ffffff;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

/*文章表格拉满*/

table {
    width: 100%;
    border: 1px solid #e1e1e1;
    border-collapse: collapse;
}
table thead {
    background-color: #f7f7f7;
}
table th,table td {
    color: #444;
    padding: .5rem;
    border: 1px solid #e1e1e1;
}
table tr {
    transition: background-color .3s;
}
table tr:hover {
    background-color: #f8f8f8;
}


/** 文章编辑时间 **/
.j-alt {
    width: 100%;
    padding: 8px 15px 8px 35px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: opacity 0.2s;
    font-size: 13px;
    margin: 20px 0;
}
.j-alt.warning {
    background-color: #fdf6ec;
    color: #e6a23c;
}
.j-alt::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 20px;
    height: 18px;
    vertical-align: top;
}
.j-alt.warning::before {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjA1NzQ5NTM3NTM2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwNjciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiA3OC43NjkyMzFDMjczLjcyMzA3NyA3OC43NjkyMzEgNzguNzY5MjMxIDI3My43MjMwNzcgNzguNzY5MjMxIDUxMnMxOTQuOTUzODQ2IDQzMy4yMzA3NjkgNDMzLjIzMDc2OSA0MzMuMjMwNzY5IDQzMy4yMzA3NjktMTk0Ljk1Mzg0NiA0MzMuMjMwNzY5LTQzMy4yMzA3NjlTNzUwLjI3NjkyMyA3OC43NjkyMzEgNTEyIDc4Ljc2OTIzMXogbTYxLjU5NzUzOCAyMDIuNDc2MzA3bC0xMy44NjMzODQgMzA2LjgwNjE1NGMwIDE4Ljc4NjQ2Mi0xNi42MjAzMDggMzIuMjU2LTM1Ljk5NzUzOSAzMi4yNTZoLTguMjcwNzY5Yy0xOS40MTY2MTUgMC0zMy4yOC0xMy40Njk1MzgtMzYuMDM2OTIzLTMyLjI5NTM4NGwtMTMuODYzMzg1LTMwNi43NjY3N2MwLTE4LjgyNTg0NiAxMy44NjMzODUtMzIuMjk1Mzg1IDMwLjQ4MzY5My0zMi4yOTUzODRoNDQuMzA3NjkyYzE5LjM3NzIzMSAwIDM1Ljk5NzUzOCAxMy40Njk1MzggMzMuMjQwNjE1IDMyLjI5NTM4NHogbS0xOC4xOTU2OTIgNDc3LjUzODQ2MmE1MS41NTQ0NjIgNTEuNTU0NDYyIDAgMCAxLTM2Ljk4MjE1NCAxNi4yNjU4NDZjLTE1Ljg3MiAwLTI2LjQyNzA3Ny01LjQzNTA3Ny0zNi45ODIxNTQtMTYuMjY1ODQ2LTEwLjU5NDQ2Mi0xMC44MzA3NjktMTUuODcyLTIxLjY2MTUzOC0xNS44NzItMzcuODg4IDAtMTYuMjY1ODQ2IDUuMjc3NTM4LTI3LjA5NjYxNSAxNS44NzItMzcuOTI3Mzg1IDEwLjU1NTA3Ny0xMC44MzA3NjkgMjEuMTEwMTU0LTE2LjIyNjQ2MiAzNi45ODIxNTQtMTYuMjI2NDYxIDE1LjgzMjYxNSAwIDI5LjA2NTg0NiA1LjM5NTY5MiAzOS42MjA5MjMgMTYuMjI2NDYxIDEwLjU1NTA3NyAxMC44MzA3NjkgMTUuODMyNjE1IDIxLjY2MTUzOCAxNS44MzI2MTYgMzcuOTI3Mzg1LTIuNTk5Mzg1IDE2LjIyNjQ2Mi03Ljg3NjkyMyAyOS43NzQ3NjktMTguNDcxMzg1IDM3Ljg4OHoiIGZpbGw9IiNGRjhGMDAiIHAtaWQ9IjYwNjgiPjwvcGF0aD48L3N2Zz4=);
    background-repeat: no-repeat;
    background-position: center center;
}

需要删除的css代码

/* hljs行号 */ 

.hljs ol { list-style: decimal; margin: 0 0 0 40px !important; padding: 0 }
.hljs ol li { font-size: 13px; list-style: decimal-leading-zero; border-left: 1px solid #ddd !important; margin: 0 !important; white-space: pre; padding: 0 10px; line-height: inherit; }

.entry-content code { background-color: #fff5f5; color: #ff502c; font-size: .87em; padding: .065em .4em; margin: 0 4px }

.entry-content pre code { background: #000000; color: #fff; margin: 0; padding: .5em; }

.entry-content pre{ position: relative;}  

.bg-primary { content: " "; position: absolute; -webkit-border-radius: 50%;  border-radius: 50%; background: #fc625d!important;  width: 12px; height: 12px; -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; float: right; right: 55px; top: 12px;}

/* hljs代码高亮 */ .hljs-comment, .hljs-quote { color: #8e908c }

.hljs-deletion, .hljs-name, .hljs-regexp, .hljs-selector-class, .hljs-selector-id, .hljs-tag, .hljs-template-variable, .hljs-variable { color: #c82829 }

.hljs-built_in, .hljs-builtin-name, .hljs-link, .hljs-literal, .hljs-meta, .hljs-number, .hljs-params, .hljs-type { color: #f5871f }

.hljs-attribute { color: #eab700 }

.hljs-addition, .hljs-bullet, .hljs-string, .hljs-symbol { color: #718c00 }

.hljs-section, .hljs-title { color: #4271ae }

.hljs-keyword, .hljs-selector-tag { color: #8959a8 }

.hljs { display: block; overflow-x: auto; background: #F1F3F3; color: #4d4d4c; padding: .5em; border-radius: 8px }

.hljs-emphasis { font-style: italic }

.hljs-strong { font-weight: 700 }

所需要的插件

你可能会喜欢的文章

typecho折腾记录(持续更新)

这个帖子是用来记录一些我编辑typecho程序的记录,主题没有我想要的功能就得去想其他办法,看了很多大家的教程,发现大家的文章只是分享一个短小的文章,字....


我移植的第一个博客模块(首页右上角简介)

看视频的时候建议播放速度调到1.5+,讲的太墨迹啦。。 我发现很多的typecho的模块,都是可以移植的。 一般有颜色的这些,你需要去查一查css代码,....


解决jsdelivr+github无法访问的错误

有一次我传的文件在github,后面发现传错了我就给它删掉,重新上传一个跟它同名的文件,但是访问加速域名依然是替换前的文件;我发现大家在后面都加了个@mai....


在html文件内插入js和css

就是有的html下载下来,其实就是个单页,也没有啥图片,但是有js和css单独的文件,我们直接把这俩文件内的代码放到html里,就可以直接打开html文件就有样式....


文章头部大图删除

删掉post.php的如下代码即可。
问了下作者,好像这个并不算bug,但是和之前不一样,我稍微有点不爽,所以给去掉了。

    <!--大图配置-->
    <?php if ($this->fields->abcimg =='bable' && $this->fields->videourl == null ):?>
    <div class="detail-wrap" ><div class="article__top-img js-article-top-img" ><div class="top-img" ><img src="<?php echo stcdnimg($this->fields->bimg); ?>" alt="<?php $this->title(); ?>" ></div></div></div>
    <?php endif; ?>
      <!--大图配置-->

让自带视频不自动播放


删除如上代码即可。
代码地址在spimesextdanmuplayerjssetting - cookie.js

这一点我困扰了很久。
如果可以不自动播放那么我也就可以撤销掉dplayer插件了。

因为我可以借用万能插入代码,iframe 大家可以试试,一般只要是全屏显示的都可以插入,比如说那个足迹图,地球图,以及什么视频,音乐之类的都是可以的。比方说我的简介那个相册就是这样插入进去的。

<iframe style="max-width: 100%" frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height="500" src="播放视频的地址"></iframe> 

https://ptuguai.com/usr/themes/spimes/ext/danmu/player/?url=视频地址
比方说上面这样,就插入了一个视频。后缀是支持m3u8的,我一般就插入mp4,m3u8两种格式的视频。
下面给大家演示下
看到了吗,并且没有自动播放哦。
自动播放这个功能我是看原开发者的代码再结合f12查询我的代码看懂的。
之前问了下小灯泡站长,以及typecho博客里的站长们,他们也没弄好,可能他们只是懒得弄吧。
一句“我不会”解决了很多烦恼。
一句“我试试”但奈何不是自己的网站,尝试了几下,不行就放弃了。

所以最终还得靠自己。


如果觉得本篇文章对你有帮助或解了你的燃眉之急的话
欢迎用 微信支付宝 扫描二维码
请小弟我喝瓶 红牛

懒得扫码? 点击下方广告支持我

您阅读这篇文章共耗时:
原创文章,作者:AKERS,如若转载,请注明出处:https://ptuguai.com/118.html
一年来做博客的总结
« 上一篇 11-11
雷军:创业第一课(笔记)
下一篇 » 11-14

发表评论

本站已加入互联网信息服务许可,请规范您的言行!

成为第一个评论的人

作者信息

随机文章

热门文章

最多点赞

70赞, 阅读:1.4k
20赞, 阅读:1.1k
11赞, 阅读:550
10赞, 阅读:442

标签TAG

热评文章