这里是我对 single 主题的所有改动,我坚信好记性不如烂笔头。

黄金比例配图尺寸:600-370(不重要)| 700-432(主要)| 800-494 | 900-618

1-后台设置

  • 图标、背景、作者、推荐
https://rzfyu.com/favicon.ico
https://pic-cdn.sukiu.net/2019/10/10/e7c271c36b57a.png
昆仑之巅可以供吾冠,长江之水可以濯吾足
360,277,396,235,201
  • 社交链接
<a rel="nofollow" title="新浪微博" href="https://weibo.com/ruzhefeiyu" target="_blank">
    <i class="fa fa-weibo"></i>
</a>
<a rel="nofollow" title="微信公众号" href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzUxNzQ4OTQ2NQ==#wechat_redirect" target="_blank">
    <i class="fa fa-weixin"></i>
</a>
<a rel="nofollow" title="UP主:汝者非鱼" href="https://space.bilibili.com/242628840" target="_blank">
    <i class="fa fa-youtube-play"></i>
</a>
<a  title="私人图床" href="https://tu.rzfyu.com/" target="_blank">
    <i class="fa fa-file-image-o"></i>
</a>
<a  title="备忘手册" href="https://rzfyu.com/beiwang.html">
    <i class="fa fa-paw"></i>
</a>
  • 统计代码
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?ff577d2336d51f5529bf244453d4b0d8";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
  • 删掉代码样式

主题里prism.js可以让代码有颜色视觉上更好看,但一般人不是程序员,功能等于没有,加载它浪费时间,就删掉吧。别忘了footer.php里的那段引用代码也删掉。

2-正文css

single.css 26,修改如下,表示文章字体正常化。

font-weight: 400;

single.css 27,文章正文,字体增黑。

color: #1f1f1f;

single.css 114,改成下面效果。表示引用文字的黑夜模式改变。

color: #ccc;
border-color: #6f9fc7;

kico.css 173,修改如下,作用为加大点段距。

margin-bottom: 1.1em;

kico.css 235,修改如下,作用为加大点红字比例。

font-size: 100%;

kico.css 90,修改如下,表示玻璃框宽度大点。

.wrap.min{ max-width: 850px }

kico.css 277,删除下面代码,表示引用字体不斜体。

font-style: oblique;

kico.css 285,改成下面颜色代码,表示引用文字的颜色改变。

color: #27a17e;

kico.css 156,改成下面颜色代码,表示演示文字的颜色改变。

background: #b97474;

post.php,删除一条带blockquote的代码(即下面这个),表示删掉“修改于 n 天前”的功能。

<?php if(time() - $this -> modified >= 15552000): ?>
            <blockquote>这篇文章上次修改于 <?php echo ceil((time() - $this -> modified) / 86400) ?> 天前,可能其部分内容已经发生变化,如有疑问可询问作者。</blockquote>
<?php endif ?>
  • 一些 font 字体小改动

阅读人数:"\f080"改为"\f06e"
留言人数:"\f086"改为"\f27b"
分类:"\f07b"改为"\f114"
标签,550行:"\f02c"改为"\f135"

标题下面的「字号功能」

  • 第一步:

以下代码放在footer.php

<script type="text/javascript">
function FontZoom(fsize){
    var ctext=document.getElementById("arctext");
    ctext.style.fontSize=fsize +"px";
}
</script>
  • 第二步:

打开post.php,先在<div class="post-meta">里的</div>前加上代码:

| 字号:〖 <a href="javascript:FontZoom(18)" style='color:#c9861d'>18</a>  <a href="javascript:FontZoom(17)" style='color:#c9861d'>17</a>  <a href="javascript:FontZoom(16)" style='color:#c9861d'>16</a> 〗
  • 第三步:

之后用下面的代码,把<article class="post-content">涉及部分包起来

<div id="arctext">......</div>

3-页脚、信息栏

  • 页脚的改动

footer.php里定位到<section class="sub-footer">,换行后加上如下代码:

<p> <a href="https://rzfyu.com/author.html" >关于作者</a> | <a href="https://rzfyu.com/friends.html" >友链</a> | <a href="https://rzfyu.com/file.html" >归档</a> | <a href="https://rzfyu.com/feed" >rss</a> | <a href="https://rzfyu.com/sitemap.xml" >xml</a> </p>
    
<p> © 2019 <a href="https://rzfyu.com/" >汝者非鱼</a> | <a href="http://beian.miit.gov.cn"  target="_blank" rel="nofollow me noopener noreferrer">皖ICP备18016610号-4</a> | <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34011102001642"  target="_blank" rel="nofollow me noopener noreferrer">皖公网安备 34011102001642号</a> </p>
  • 手机端隐藏信息栏

single.css最下面加下面的代码

/*手机版隐藏底部信息栏*/
@media screen and (max-width: 800px) { .widget{display:none; }}
  • 6 行变 5 行

footer.phpageSize=6改成ageSize=5

  • 图标居左后加大间距

single.css 806,修改代码如下,表示 font 图标为左,间距为 1。

float: left;
margin-right: 1em;
  • font 图标改动

第一栏改为f003,第二栏改为f097,第三栏改为f11a(我没用)

  • 现用第二栏:
<div class="col-m-6">
<h3 class="title-date">我的最爱:</h3>
<a>人最宝贵是生命,生命对于每个人只有一次。<br/>人的一生应当这样度过:当他回首往事的时候,不因虚度年华而悔恨,也不因碌碌无为而羞愧。<br/>这样,在他临死的时候,就能够说:我的整个生命和全部精力,都已献给世界上最壮丽的事业— —为全人类的解放而斗争。— —《钢铁是怎样炼成的》</a></div>
  • 加新的一栏
<div class="col-m-4">
<h3 class="title-date">其他功能 :</h3>
<ul>
<li><a href="地址" >名称</a></li>
</ul>
</div>

4-首页玻璃框

single.css里定位到.post-item文章简要处,在它的{}里加如下代码:

width:100%;
height:100%;
border-radius:20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
padding:10px

5-归档页面

  • 第一步:

在主题里新建一个file.php,之后将主题原有的page.php文件里的代码全部复制过来。

  • 第二步:

file.php里的<?php $this->need('header.php'); ?>替换为下面代码。

<?php
/**
 * 自定义归档页文档
 *
 * @package custom
 */
 $this->need('header.php'); ?>
  • 第三步:

file.php里的<?php $this->content(); ?>替换为下面代码。

<?php $this->widget('Widget_Contents_Post_Recent', 'pageSize=10000')->to($archives);
    $year=0; $mon=0; $i=0; $j=0;
    $output = '<div id="archives">';
    while($archives->next()):
        $year_tmp = date('Y',$archives->created);
        $mon_tmp = date('m',$archives->created);
        $y=$year; $m=$mon;
        if ($mon != $mon_tmp && $mon > 0) $output .= '</ul></li>';
        if ($year != $year_tmp && $year > 0) $output .= '</ul>';
        if ($year != $year_tmp) {
            $year = $year_tmp;
            $output .= '<h3>'. $year .' 年</h3><ul>'; //输出年份
        }
        if ($mon != $mon_tmp) {
            $mon = $mon_tmp;
            $output .= '<li><span>'. $mon .' 月</span><ul>'; //输出月份
        }
        $output .= '<li>'.date('d日: ',$archives->created).'<a href="'.$archives->permalink .'">'. $archives->title .'</a> <em>('. $archives->commentsNum.')</em></li>'; //输出文章日期和标题
    endwhile;
    $output .= '</ul></li></ul></div>';
    echo $output;
?>
  • 第四步:

结束了,去 typecho 后台发布一个新页面吧。备注:第一步的意义是保证和自己的主题完美融洽的显示。

6-全站图片居中

在主题的 css 里把负责图片部分的代码,加点代码就可以了。

single.css 377,定位到transition: filter .3s;,在它下面添加如下代码

margin:0 auto;
display: block;

备注:图片圆角度改为.3em,即single.css 511article img{ border-radius: .5em }改掉

7-哔哩哔哩

  • 第一步:

主题设置里在自定义样式表里加下面的 css 代码:

/*视频挂载*/

.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1200px) {
    .iframe_video {
        height: 40em;
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}
  • 第二步:

去 B 站视频下面,复制嵌入代码放在文章里,类似这样:

<iframe src="..." scrolling="..."> </iframe>

但这个代码不能直接用,还需要加一个class="iframe_video",最终在文章里面放的代码应该是这样的:

<iframe class="iframe_video" src="..." scrolling="..."> </iframe>

8-看板娘

  1. 选一个好看的衣服,压缩大小,放到plugins/Pio/models/pio/textures里。(无图床情况)
  2. 选一个好看的衣服,压缩大小,放到图床上,然后去plugins/Pio/models/pio/model.json里,把图片地址一栏换成图床链接即可。(有图床情况)

备注:原有 pio 插件里有三套衣服,只需要一套就行了,所以把textures里的两套删除,model.json里对应的两个图片链接也删除。看板娘插件的夜间函数为single.night()

9-简繁互转

  • 第一步:

把下面代码存为 js 文件tw_cn.js,并修改里面的内容(域名):

var defaultEncoding = 2; // 网站默认语言,1: 繁體中文, 2: 简体中文
var translateDelay = 0; //延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
var cookieDomain = "https://rzfyu.com/"; //更改为你的博客网址
var msgToTraditionalChinese = "繁體"; //此处可以更改为你想要显示的文字
var msgToSimplifiedChinese = "简体"; //同上,但两处均不建议更改
var translateButtonId = "translateLink"; //默认互换id
  • 第二步:

把下面代码放在footer.php,并修改 js 引用位置和域名:

<!--- 简繁转换开始 --->
<script type="text/javascript" src="<?php $this->options->themeUrl(); ?>static/tw_cn.js"></script>
<script type="text/javascript">
var defaultEncoding = 0; //默认是否繁体,0-简体,1-繁体
var translateDelay = 0; //延迟时间,若不在</body>前, 要设定延迟翻译时间, 如100表示100ms,默认为0
var cookieDomain = "https://rzfyu.com/";    //Cookie地址, 一定要设定, 通常为你的网址
var msgToTraditionalChinese = "繁體"; //默认切换为繁体时显示的中文字符
var msgToSimplifiedChinese = "简体"; //默认切换为简体时显示的中文字符
var translateButtonId = "translateLink"; //默认互换id
translateInitilization();
</script>
<!--- 简繁转换结束 --->
  • 第三步

把下面代码放在footer.php里,<a class="to-top" href="#"></a>的上一行。

<a style="display:block; text-align:center; padding:.3em; font-size:18px; border:1.5px solid #24a69a;border-radius: 4px; margin-bottom: .5em" id="translateLink" href="javascript:translatePage();" >繁</a>

10-提醒自动消失

就是复制文字出现的版权信息,自动消失,原来需要手动 ✘ 掉。

打开single.js 151,在后面加个time:2000即可,结果就是下面这样。

color:"yellow", overlay:true, time:2000

未用:下面的功能都是折腾了,但出于某种原因又删掉了

01-评论区支持表情回复

之前用了一段时间,但是我的博客用不到表情,所以就把功能删了,实际效果其实不错的。

  • 第一步:

安装羽中的 Smilies 表情插件。

  • 第二步:

将下面代码放在comments.php 72/85 行的“写好了”的上一行。

<div style="float:left;  margin-right: 1em;"> <?php $comments->smilies(); ?></div>
  • 第三步:

single.css 665改成 77%,这样是为了手机上样式更好看。

备注:插件改样式在plugin.php里的//弹窗css样式行。