这里是我对 single 主题的所有改动。

黄金比例配图尺寸：600-370（不重要）| 700-432（主要）| 800-494 | 900-618

如果 typecho 升级 1.2，需要把前端报错 39 行的 null 改成""

1-后台设置

图标、背景、作者、推荐

https://rzfyu.com/logo.png
https://img.sukiu.net/2022/03/29/dream.webp
昆仑之巅可以供吾冠，长江之水可以濯吾足
201,235,770,410,428

社交链接

<a rel="nofollow" title="生活信息备忘（锁）" href="https://rzfyu.com/403.html"><i class="fa fa-folder-open-o"></i></a>
<a  title="无铭集" href="https://rzfyu.com/movie.html" target="_blank"><i class="fa fa-moon-o"></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>

自定义样式表

/*B站视频挂载*/
.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}

删掉代码样式

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

gravatar 头像

原头像地址被墙了，评论区的头像无法显示，所以要换一个国内头像代理地址。打开根目录config.icn.php，在它的末尾添加一行代码即可。

/** 非鱼改的头像地址 */
define('__TYPECHO_GRAVATAR_PREFIX__', 'https://gravatar.loli.net/avatar/');
https://cdn.sep.cc/avatar/
https://sdn.geekzu.org/avatar/
https://gravatar.zeruns.tech/avatar/

2-正文css

原来的 font 字体引用经常红：https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome/css/font-awesome.min.css改成了七牛云的新地址（在header.php-19）：https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.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/file.html" >归档</a> | <a href="https://hao.rzfyu.com/" >无惗</a> | <a href="https://eat.rzfyu.com/" >鱼の料理</a> | <a href="https://rzfyu.com/feed" >rss</a> | <a href="https://rzfyu.com/sitemap.xml" >xml</a> </p>
    
<p> © 2011 <a href="https://rzfyu.com/"  >汝者非鱼</a> | <a href="http://beian.miit.gov.cn"  target="_blank" rel="nofollow noopener noreferrer">皖ICP备18016610号-4</a> | <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34011102001642"  target="_blank" rel="nofollow noopener noreferrer">皖公网安备34011102001642号</a> </p>

手机端隐藏信息栏

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

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

6 行变 5 行

把footer.php里ageSize=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 511的article img{ border-radius: .5em }改掉

7-哔哩哔哩

第一步：

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

/*B站视频挂载*/
.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-看板娘

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

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

9-简繁互转

第一步：

准备文件tw_cn.js（太长了我不分享，可百度此名下载），并修改里面的内容（域名）

第二步：

把下面代码放在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%，这样是为了手机上样式更好看。

汝者非鱼

single 主题的改动记录