Initial 简约主题的本站食用方式

“主题命名为Initial，意为‘初’，专注于文字，算是极极极简风格吧，简约而不简单，希望你能喜欢这种很小众的风格。”

闲着没事打 OSU! 呢，一直拿不到 Full Combo ，气得我呦...来写文了 ( 随便找个理由 ? ) 。

去年 ( 2018 ) 十一月把博客从 WordPress 换到了 Typecho ，今年 ( 2019 ) 给博客换上了 Initial 主题 。这篇文章将讲述本站在使用 Initial 主题 后都做了哪些更改。

当初看上这个模板，除了它的简约风格以外还有：

• 全站Pjax、Ajax评论、Ajax翻页、HTML压缩、CSS文件压缩
• 添加右下角小工具，包括返回顶部、背景音乐、文章目录
• 支持“轻语”功能（类似说说）

Ajax & Pjax

Initial 主题 自带 全站Pjax、Ajax评论、Ajax翻页 ，只需要在 Typecho后台->外观->设置外观 中统统启用就行了，不过启用了 全站Pjax 后会 “强制关闭‘反垃圾保护’，强制‘将较新的的评论显示在前面’” ，当然，无伤大雅。

( 事实上本站最近还是收到了很多 垃圾评论 ，没事，无伤大雅 )

HTML 压缩

这也是 Initial 主题 自带的功能之一，同样只需要在 Typecho后台->外观->设置外观 中启用即可，当然，“启用则会对HTML代码进行压缩，可能与部分插件存在兼容问题，请酌情选择开启或者关闭”。

公共静态资源来源 & Gravatar头像源

同 Initial 主题 自带，本站选用的是 BootCDN + V2EX Gravatar头像源。

图片 CDN

不知道有没有读者发现，本站图片的链接基本上都是 https://flyingsky51.gitee.io/flyingcdn/FlyingSky/Blog/... 。

是的，我直接丢 Gitee 上然后开了个 Gitee Pages ，不过这样子做就对境外访问者非常不友好，新的解决方案已经准备上线了。

面包屑导航

同样是自带功能

-
[x] 文章内显示
[x] ↪文章标题替换为“正文”
[x] 页面内显示
-

自带。这个功能是每篇文章中单独设置的，在 Typecho后台=>文章编辑页->自定义字段->文章目录 设置。

本站对于该功能进行了修改，原实现方式是获取所有标题进行排序输出序号，按序号检索。这样一来每加一个标题，该标题后的所有标题序号会发生变化，于是乎我就加了个按照标题内容进行检索的操作。

function.php：

function createCatalog($obj) {
    global $catalog;
    global $catalog_count;
    $catalog = array();
    $catalog_count = 0;
    $obj = preg_replace_callback('/<h([1-6])(.*?)>(.*?)<\/h\1>/i', function($obj) {
        global $catalog;
        global $catalog_count;
        $catalog_count ++;
        $catalog[] = array('text' => trim(strip_tags($obj[3])), 'depth' => $obj[1], 'count' => $catalog_count);
        return '<h'.$obj[1].$obj[2].'><a class="cl-offset" name="cl-'.$catalog_count.'"></a>'.$obj[3].'</h'.$obj[1].'>';
    }, $obj);
    return $obj."\n".getCatalog();
}

function createCatalog($obj) {
    global $catalog;
    global $catalog_count;
    $catalog = array();
    $catalog_count = 0;
    $obj = preg_replace_callback('/<h([1-6])(.*?)>(.*?)<\/h\1>/i', function($obj) {
        global $catalog;
        global $catalog_count;
        $catalog_count ++;
        $catalog[] = array('text' => trim(strip_tags($obj[3])), 'depth' => $obj[1], 'count' => $catalog_count);
        return '<h'.$obj[1].$obj[2].'><a class="cl-offset" id="dl-'.$obj[3].'" name="cl-'.$catalog_count.'"></a>'.$obj[3].'</h'.$obj[1].'>';
    }, $obj);
    return $obj."\n".getCatalog();
}

自带。在 Typecho后台->外观->设置外观 设置，直接添加 .mp3 文件地址，当然也可以用 https://music.163.com/song/media/outer/url?id={MusicID}.mp3 这个好东西解析网易云音乐的歌曲 ( 低音质 ) 。

自带。在 Typecho后台->管理->独立页面->模板页面 创建，( 懒得写了 )。

自带。同上，( 懒得写了 )。

就是文章最底部的

-
除特殊说明，原创内容采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 许可协议进行许可。
-

编辑器部分

模板文件夹下的 function.php ，找到 function themeFields($layout) {，在 } 之前加上

if($_SERVER['SCRIPT_NAME']=="/admin/write-post.php"){
        $licenses = new Typecho_Widget_Helper_Form_Element_Radio('linceses', 
        array('BY' => _t('CC BY'),
        'BY-SA' => _t('CC BY-SA'),
        'BY-ND' => _t('CC BY-ND'),
        'BY-NC' => _t('CC BY-NC'),
        'BY-NC-SA' => _t('CC BY-NC-SA'),
        'BY-NC-ND' => _t('CC BY-NC-ND'),
        'NONE' => _t('没有')),
        'NONE', _t('许可协议'), _t('默认没有协议，请前往 <a href="https://creativecommons.org/licenses/" target="_blank">CreativeCommons</a> 查看更多关于协议的内容，仅支持 4.0 ( 国际 ) 协议'));
        $layout->addItem($licenses);
}

即整个 function 改成

function themeFields($layout) {
    $thumb = new Typecho_Widget_Helper_Form_Element_Text('thumb', NULL, NULL, _t('自定义缩略图'), _t('在这里填入一个图片 URL 地址, 以添加本文的缩略图，若填入纯数字，例如 <b>3</b> ，则使用文章第三张图片作为缩略图（对应位置无图则不显示缩略图），留空则默认不显示缩略图'));
    $thumb->input->setAttribute('class', 'w-100');
    $layout->addItem($thumb);

    $catalog = new Typecho_Widget_Helper_Form_Element_Radio('catalog', 
    array(true => _t('启用'),
    false => _t('关闭')),
    false, _t('文章目录'), _t('默认关闭，启用则会在文章内显示“文章目录”（若文章内无任何标题，则不显示目录）'));
    $layout->addItem($catalog);
    
    if($_SERVER['SCRIPT_NAME']=="/admin/write-post.php"){
        $licenses = new Typecho_Widget_Helper_Form_Element_Radio('linceses', 
        array('BY' => _t('CC BY'),
        'BY-SA' => _t('CC BY-SA'),
        'BY-ND' => _t('CC BY-ND'),
        'BY-NC' => _t('CC BY-NC'),
        'BY-NC-SA' => _t('CC BY-NC-SA'),
        'BY-NC-ND' => _t('CC BY-NC-ND'),
        'NONE' => _t('没有')),
        'NONE', _t('许可协议'), _t('默认没有协议，请前往 <a href="https://creativecommons.org/licenses/" target="_blank">CreativeCommons</a> 查看更多关于协议的内容，仅支持 4.0 ( 国际 ) 协议'));
        $layout->addItem($licenses);
    }
}

模板文件夹下的 post.php ，找到

<p class="license">本作品采用 <a rel="license nofollow" href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可。</p>

<?php
// linceses
$linceses = $this->fields->linceses;
if ($linceses && $linceses != 'NONE') {
    $linceseslist = array(
        'BY' => '署名 4.0 国际 (CC BY 4.0)',
        'BY-SA' => '署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)',
        'BY-ND' => '署名-禁止演绎 4.0 国际 (CC BY-ND 4.0)',
        'BY-NC' => '署名-非商业性使用 4.0 国际 (CC BY-NC 4.0)',
        'BY-NC-SA' => '署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)',
        'BY-NC-ND' => '署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0)');
    $lincesestext = $linceseslist[$linceses];
?>
<div class="copyright">本篇文章采用 <a rel="noopener" href="https://creativecommons.org/licenses/<?=strtolower($linceses)?>/4.0/deed.zh" target="_blank" class="external"><?=$lincesestext?></a> 许可协议进行许可。
</div>
<?php
} else {
?>
<div class="copyright">本篇文章未指定许可协议。
</div>
<?php }; ?>

重点来了！详情可以见 给博客添加 DARK Mode ( 黑暗模式 ) 这篇文章，下面我要讲述的是 DARK Mode 应用在 Initial 主题 上本站的操作。

模板文件夹下的 footer.php ，在 </body> 标签前加上 DARK Mode 的核心代码：

<script>
function switchDarkMode(){
    var night = document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if (night == '0'){
        document.body.classList.add('dark');
        document.cookie = "dark=1;path=/";
        console.log('Dark mode on');
        document.getElementById("darkmode").innerHTML="亮";
    }else{
        document.body.classList.remove('dark');
        document.cookie = "dark=0;path=/";
        console.log('Dark mode off');
        document.getElementById("darkmode").innerHTML="暗";
    }
}
(function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 22 || new Date().getHours() < 6){
            document.body.classList.add('dark');
            document.cookie = "dark=1;path=/";
            console.log('Dark mode on');
            document.getElementById("darkmode").innerHTML="亮";
        }else{
            document.body.classList.remove('dark');
            document.cookie = "dark=0;path=/";
            console.log('Dark mode off');
            document.getElementById("darkmode").innerHTML="暗";
        }
    }else{
        var dark = document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(dark == '0'){
            document.body.classList.remove('dark');
        }else if(dark == '1'){
            document.body.classList.add('dark');
        }
    }
})();
</script>

同样在 footer.php 里，塞下 DARK Mode 的开关，找到：

...
<?php if ($this->options->scrollTop): ?>
<li id="top" class="hidden"></li>
<?php endif; ?>
<?php if ($this->options->MusicSet && $this->options->MusicUrl): ?>
<li id="music" class="hidden">
<span><i></i></span>
<audio id="audio" preload="none"></audio>
</li>
<?php endif; ?>
...

...
<?php if ($this->options->scrollTop): ?>
<li id="top" class="hidden"></li>
<?php endif; ?>
<li id="darkmode" onclick="switchDarkMode()"><?php if($_COOKIE['dark']=='1'){echo"亮";}else{echo"暗";} ?></li>
<?php if ($this->options->MusicSet && $this->options->MusicUrl): ?>
<li id="music" class="hidden">
<span><i></i></span>
<audio id="audio" preload="none"></audio>
</li>
<?php endif; ?>
...

为了防止刷新页面时被闪瞎，在 header.php 中将

<body <?php if ($this->options->HeadFixed): ?>class="head-fixed"<?php endif; ?>>

<body class="<?php if($_COOKIE['dark']=='1'): ?>dark<?php endif; ?> <?php if ($this->options->HeadFixed): ?>head-fixed<?php endif; ?>">

样式表请见下一章节的内容。

开/关 Dark Mode 的时候，发送评论的时候，加载失败的时候，在页面右上角弹出的通知就是这个系统实现的。

首先，需要这个文件：notie.js 10.0K

保存下来然后丢到模板目录下。

在模板 footer.php 下，在最后一个 <?php endif; ?> 之后加上：

<script src='<?php cjUrl('notie.js') ?>'></script>

现在通知系统的基础已经打好了，接下来就要在该通知的地方加上通知代码了。通知代码格式如下：

notie('{[通知内容]}', {type:'{[类型]info/warning/error/success}', autoHide:{[自动隐藏]true/false}, timeout: {[超时]},width:{{宽度]}});
//例：
notie('评论正在发送中...', {type:'info', autoHide:true, timeout: 5000,width:200});

本站在 footer.php 中将 alert 方法都改成了通知：

<script>jQuery.fn.Shake=function(n,d){this.each(function(){var jSelf=$(this);jSelf.css({position:'relative'});for(var x=1;x<=n;x++){jSelf.animate({left:(-d)},50).animate({left:d},50).animate({left:0},50)}});return this};$(document).pjax('a:not(a[target="_blank"], a[no-pjax])',{container:'#main',fragment:'#main',timeout:10000}).on('submit','form[id=search], form[id=comment-form]',function(event){$.pjax.submit(event,{container:'#main',fragment:'#main',timeout:10000})}).on('pjax:send',function(){$("#header").prepend("<div id='bar'></div>")}).on('pjax:complete',function(){setTimeout(function(){$("#bar").remove()},300);$('#header').removeClass("on");$('#s').val("");<?php if ($this->options->SidebarFixed): ?>$("#secondary").removeAttr("style");<?php endif; ?>}).on('pjax:end',function(){<?php if ($this->options->AjaxLoad): ?>al();<?php endif; ?>cl();ac();ap();<?php if ($this->options->CustomContent): ?>if(typeof _hmt!=='undefined'){_hmt.push(['_trackPageview',location.pathname+location.search])};if(typeof ga!=='undefined'){ga('send','pageview',location.pathname+location.search)}<?php endif; ?>});function ac(){$body=$('html,body');var g='.comment-list',h='.comment-num',i='.comment-reply a',j='#textarea',k='',l='';c();$('#comment-form').submit(function(){notie('评论正在发送中...', {type:'info', autoHide:true, timeout: 5000,width:200});$.ajax({url:$(this).attr('action'),type:'post',data:$(this).serializeArray(),error:function(){notie('提交失败，请检查网络并重试或者联系管理员。', {type:'error', autoHide:true, timeout: 5000,width:200});return false},success:function(d){if(!$(g,d).length){notie('您输入的内容不符合规则或者回复太频繁，请修改内容或者稍等片刻。', {type:'error', autoHide:true, timeout: 5000,width:200});return false}else{k=$(g,d).html().match(/id=\"?comment-\d+/g).join().match(/\d+/g).sort(function(a,b){return a-b}).pop();if($('.page-navigator .prev').length&&l==""){k=''}if(l){d=$('#comment-'+k,d).hide();if($('#'+l).find(".comment-children").length<=0){$('#'+l).append("<div class='comment-children'><ol class='comment-list'><\/ol><\/div>")}if(k)$('#'+l+" .comment-children .comment-list").prepend(d);l=''}else{d=$('#comment-'+k,d).hide();if(!$(g).length)$('#comments').prepend("<h3>已有 <span class='comment-num'>0<\/span> 条评论<\/h3><ol class='comment-list'><\/ol>");$(g).prepend(d)}$('#comment-'+k).fadeIn();var f;$(h).length?(f=parseInt($(h).text().match(/\d+/)),$(h).html($(h).html().replace(f,f+1))):0;TypechoComment.cancelReply();$(j).val('');$(i+', #cancel-comment-reply-link').unbind('click');c();notie('评论已发送。', {type:'info', autoHide:true, timeout: 5000,width:200});if(k){$body.animate({scrollTop:$('#comment-'+k).offset().top-50},300)}else{$body.animate({scrollTop:$('#comments').offset().top-50},300)}}}});return false});function c(){$(i).click(function(){l=$(this).parent().parent().parent().attr("id");$(j).focus()});$('#cancel-comment-reply-link').click(function(){l=''})}}ac();var protoken='<?php echo Typecho_Widget::widget('Widget_Security')->getTokenUrl('Token'); ?>'.replace('Token',"");function ap(){$('.protected .post-title a, .protected .more a').click(function(){var a=$(this).parent().parent();a.find('.word').text("请输入密码访问").css('color','red').Shake(2,10);a.find(':password').focus();return false});$('.protected form').submit(function(){ap_btn=$(this);ap_m=ap_btn.parent().find('.more a');ap_n=ap_btn.find('.word');$(ap_m).addClass('loading').text("请稍等");<?php if (!$this->options->AjaxLoad): ?>apt();<?php else: ?>aps();<?php endif; ?>return false})}ap();<?php if (!$this->options->AjaxLoad): ?>function apt(){var b=$('.protected .post-title a').attr("href");if($('h1.post-title').length){aps()}else{$.ajax({url:window.location.href,success:function(d){protoken=$('.protected form[action^="'+b+'"]',d).attr("action").replace(b,"");if(protoken){aps()}else{$(ap_m).removeAttr("class").text("- 阅读全文 -");notie('提交失败，请检查网络并重试或者联系管理员。', {type:'warning', autoHide:true, timeout: 3000,width:200});ap_n.text("提交失败，请检查网络并重试或者联系管理员。").css('color','red').Shake(2,10);return false}}})}}<?php endif; ?>function aps(){var c=ap_btn.parent().parent().find('.post-title a').attr("href");$.ajax({url:c+protoken,type:'post',data:ap_btn.serializeArray(),error:function(){$(ap_m).removeAttr("class").text("- 阅读全文 -");notie('提交失败，请检查网络并重试或者联系管理员。', {type:'warning', autoHide:true, timeout: 3000,width:200});ap_n.text("提交失败，请检查网络并重试或者联系管理员。").css('color','red').Shake(2,10);return false},success:function(d){if(!$('h1.post-title',d).length){$(ap_m).removeAttr("class").text("- 阅读全文 -");notie('对不起,您输入的密码错误。', {type:'error', autoHide:true, timeout: 3000,width:200});ap_n.text("对不起,您输入的密码错误。").css('color','red').Shake(2,10);$(":password").val("");return false}else{$(ap_m).removeAttr("class").text("- 阅读全文 -");$('h1.post-title').length?$.pjax.reload({container:'#main',fragment:'#main',timeout:10000}):$.pjax({url:c,container:'#main',fragment:'#main',timeout:10000})}}})}</script>
<?php endif; if ($this->options->AjaxLoad): ?>
<script>var isbool=true;<?php if ($this->options->AjaxLoad == 'auto'): ?>$(window).scroll(function(){if(isbool&&$('.ajaxload .next a').attr("href")&&($(this).scrollTop()+$(window).height()+20)>=$(document).height()){isbool=false;aln()}});<?php endif; ?>function al(){$('.ajaxload li[class!="next"]').remove();$('.ajaxload .next a').click(function(){if(isbool){aln()}return false})}al();function aln(){var a='.ajaxload .next a',b=$(a).attr("href");$(a).addClass('loading').text("正在加载");if(b){$.ajax({url:b,error:function(){notie('请求失败，请检查网络并重试或者联系管理员。', {type:'warning', autoHide:true, timeout: 3000,width:200});$(a).removeAttr("class").text("查看更多");return false},success:function(d){var c=$(d).find("#main .post"),e=$(d).find(a).attr("href");if(c){$('.ajaxload').before(c)};$(a).removeAttr("class");if(e){$(a).text("查看更多").attr("href",e)}else{$(a).remove();$('.ajaxload .next').text('没有更多文章了')}if($('.protected',d).length){$('.protected *').unbind();ap()}isbool=true;return false}})}}</script>
<?php endif; ?>
<?php $this->footer(); ?>
<?php if ($this->options->scrollTop || $this->options->HeadFixed || $this->options->SidebarFixed): ?>
<script>window.onscroll=function(){var a=document.documentElement.scrollTop||document.body.scrollTop;<?php if ($this->options->scrollTop): ?>var b=document.getElementById("top");if(a>=200){b.removeAttribute("class")}else{b.setAttribute("class","hidden")}b.onclick=function totop(){var a=document.documentElement.scrollTop||document.body.scrollTop;if(a>0){requestAnimationFrame(totop);window.scrollTo(0,a-(a/5))}else{cancelAnimationFrame(totop)}};<?php endif; if ($this->options->HeadFixed): ?>var d=document.getElementById("header");if(a>0&&a<30){d.style.padding=(15-a/2)+"px 0"}else if(a>=30){d.style.padding=0}else{d.removeAttribute("style")};<?php endif; if ($this->options->SidebarFixed): ?>var e=document.getElementById("main");var f=document.getElementById("secondary");var g=document.documentElement.clientHeight;var h=<?php echo $this->options->HeadFixed ? 0 : 41 ?>;if(e.offsetHeight>f.offsetHeight){if(f.offsetHeight>g-71&&a>f.offsetHeight+101-g){if(a<e.offsetHeight+101-g){f.style.marginTop=(a-f.offsetHeight-101+g)+"px"}else{f.style.marginTop=(e.offsetHeight-f.offsetHeight)+"px"}}else if(f.offsetHeight<=g-71&&a>30+h){if(a<e.offsetHeight-f.offsetHeight+h){f.style.marginTop=(a-30-h)+"px"}else{f.style.marginTop=(e.offsetHeight-f.offsetHeight-30)+"px"}}else{f.removeAttribute("style")}}<?php endif; ?>}</script>
<?php endif; if ($this->options->MusicSet && $this->options->MusicUrl): ?>
<script>(function(){var a=document.getElementById("audio");var b=document.getElementById("music");var c=<?php Playlist() ?>;<?php if ($this->options->MusicVol): ?>var d=<?php $this->options->MusicVol(); ?>;if(d>=0&&d<=1){a.volume=d}<?php endif; ?>a.src=c.shift();a.addEventListener('play',g);a.addEventListener('pause',h);a.addEventListener('ended',f);a.addEventListener('error',f);a.addEventListener('canplay',j);function f(){if(!c.length){a.removeEventListener('play',g);a.removeEventListener('pause',h);a.removeEventListener('ended',f);a.removeEventListener('error',f);a.removeEventListener('canplay',j);b.style.display="none";notie('本站的背景音乐好像有问题了，希望您可以通过留言等方式通知管理员，谢谢您的帮助。', {type:'error', autoHide:true, timeout: 5000,width:200});}else{a.src=c.shift();a.play()}}function g(){b.setAttribute("class","play");a.addEventListener('timeupdate',k)}function h(){b.removeAttribute("class");a.removeEventListener('timeupdate',k)}function j(){c.push(a.src)}function k(){b.getElementsByTagName("i")[0].style.width=(a.currentTime/a.duration*100).toFixed(1)+"%"}b.onclick=function(){if(a.canPlayType('audio/mpeg')!=""||a.canPlayType('audio/ogg;codes="vorbis"')!=""||a.canPlayType('audio/mp4;codes="mp4a.40.5"')!=""){if(a.paused){if(a.error){f()}else{a.play()}}else{a.pause()}}else{notie('对不起，您的浏览器不支持HTML5音频播放，请升级您的浏览器。', {type:'warning', autoHide:true, timeout: 3000,width:200});}};b.removeAttribute("class")})();</script>
<?php endif; if ($this->options->CustomContent): $this->options->CustomContent(); ?>
<?php endif; ?>

并且在开/关 Dark Mode 时都有通知：

<script>
function switchDarkMode(){
    var night = document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if (night == '0'){
        document.body.classList.add('dark');
        document.cookie = "dark=1;path=/;domain=fsky7.com";
        console.log('Dark mode on');
        notie('已开启 Dark Mode ，早 6 点之前保持开启。', {type:'info', autoHide:true, timeout: 3000,width:200});
        document.getElementById("darkmode").innerHTML="亮";
    }else{
        document.body.classList.remove('dark');
        document.cookie = "dark=0;path=/;domain=fsky7.com";
        console.log('Dark mode off');
        notie('已关闭 Dark Mode ', {type:'info', autoHide:true, timeout: 1000,width:200});
        document.getElementById("darkmode").innerHTML="暗";
    }
}
(function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 22 || new Date().getHours() < 6){
            document.body.classList.add('dark');
            document.cookie = "dark=1;path=/;domain=fsky7.com";
            console.log('Dark mode on');
            notie('已开启 Dark Mode，早 6 点之前保持开启。 ', {type:'info', autoHide:true, timeout: 3000,width:200});
            document.getElementById("darkmode").innerHTML="亮";
        }else{
            document.body.classList.remove('dark');
            document.cookie = "dark=0;path=/;domain=fsky7.com";
            console.log('Dark mode off');
            notie('已关闭 Dark Mode ', {type:'info', autoHide:true, timeout: 1000,width:200});
            document.getElementById("darkmode").innerHTML="暗";
        }
    }else{
        var dark = document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(dark == '0'){
            document.body.classList.remove('dark');
        }else if(dark == '1'){
            document.body.classList.add('dark');
        }
    }
})();
document.addEventListener('visibilitychange', function () {
    var dark = document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(dark == '0'){
        document.body.classList.remove('dark');
        document.getElementById("darkmode").innerHTML="暗";
    }else if(dark == '1'){
        document.body.classList.add('dark');
        document.getElementById("darkmode").innerHTML="亮";
    }
});
</script>

本站对其的美化请见下一章节的内容。

感谢 Nanlon 提供。

function.php 最后加上：

//总访问量
function theAllViews() {
    $db = Typecho_Db::get();
    $prefix = $db->getPrefix();
    $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `'.$prefix.'contents`');
    return number_format($row[0]['SUM(VIEWS)']);
}

sidebar.php：

在 <?php endif; ?> 和 <?php if (!empty($this->options->sidebarBlock) && in_array('ShowOther', $this->options->sidebarBlock)): ?> 之间加上

<section class="widget">
<h3 class="widget-title">网站统计</h3>
<ul class="widget-tile" id="stat">
<?php Typecho_Widget::widget('Widget_Stat')->to($stat); ?>
<li>文章总数： <?php $stat->publishedPostsNum() ?> 篇 </li>
<li>评论总数： <?php $stat->publishedCommentsNum() ?> 条 </li>
<li>总访问量： <?php echo theAllViews() ?> ( PV ) </li>
</ul>
</section>

文章修改日期提醒

参考 Typecho文章页面添加notice提醒，文章修改日期 - 黑冰技术站 。

主题目录下 post.php 文件，在适当位置添加如下代码，一般添加在 post-content 后面：

<?php if ($this->options->TimeNotice): ?>
<script defer>
<?php if ($_GET['_pjax']) { ?>
notie('本文最后更新于 <?php echo date('Y年m月d日' , $this->modified);?>。', {type:'info', autoHide:true, timeout: 3000,width:200});
<?php } else { ?>
window.onload=function (){
    notie('本文最后更新于 <?php echo date('Y年m月d日' , $this->modified);?>。', {type:'info', autoHide:true, timeout: 3000,width:200});
}
<? } ?>
</script>
<?php endif; ?>

本站的额外样式分为两部分，存于 header.php 中，为黑暗模式附加的样式处于<link rel="stylesheet" href="<?php cjUrl('style.min.css') ?>" />之上，其他样式放在其之下，总体代码就是：

···
<style>
    /* Dark mode */
    body.dark {
        background-color: #263238;
        color: #aaa;
    }
    body.dark .rewards a, body.dark .tags a, body.dark .comment-author a , body.dark .post-content a, body.dark .comment-content a {
        color: #6a85ca;
        border-bottom: 0px;
    }
    body.dark a, body.dark .nav-menu ul a, body.dark .post-content .more a, body.dark .post-meta {
        color: #888;
    }
    body.dark #header , body.dark .whisper .comment-list li.comment-parent , body.dark table td {
        background-color: #263238;
        border-bottom: 1px solid #182125;
    }
    body.dark table td , body.dark table th {
        border: 1px solid #182125;
    }
    body.dark #logo, body.dark .post-title a , body.dark .comment-author , body.dark blockquote {
        color: #aaa!important;
    }
    body.dark pre, body.dark code, body.dark input, body.dark textarea , body.dark button , body.dark blockquote , body.dark .post-content .links li a , body.dark .menu-parent ul , body.dark .comment-list li.comment-level-odd , body.dark .comment-list li.comment-by-author , body.dark .whisper .comment-child , body.dark table tr , body.dark table th {
        background: #344148;
    }
    body.dark .author-icon {
        background: linear-gradient(135deg,transparent 30%,rgba(111, 111, 111, 0.8) 0) left,linear-gradient(-135deg,transparent 30%,rgba(111, 111, 111, 0.8) 0) right;
        background-size: 50% 100%;
        background-repeat: no-repeat;
    }
    body.dark .menu-parent ul:before {
        border-bottom: 7px solid #344148;
    }
    body.dark .post-content .links li a i {
        background: #808080;
        color: #aaa;
    }
    body.dark .post-content .links a {
        color: #aaa;
    }
    body.dark blockquote {
        border-left: 4px solid #2c383e;
    }
    body.dark textarea , body.dark .comment-list li  {
        border: 1px solid #344148;
    }
    body.dark button , body.dark pre code , body.dark blockquote {
        color: #aaa;
    }
    body.dark img {
        filter: brightness(50%);
    }
    body.dark #footer , body.dark .comment-list .respond{
        border-top: 1px solid #344148;
    }
    body.dark .post-meta li {
        border-left: 1px solid #888;
    }
    body.dark .post-meta li:first-child {
        padding: 0;
        border: 0;
    }
    body.dark .ajaxload a, body.dark .ajaxload .loading:hover, body.dark .ajaxload .loading {
        color: #aaa;!important
    }
    /* 滚动条 */
    body.dark *::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    body.dark *::-webkit-scrollbar-thumb {
        background: #aaa;
    }
    body.dark *::-webkit-scrollbar-track {
        background: #344148;
    }
    body.dark *::-webkit-scrollbar-corner {
        background: #344148;
    }
    body.dark::-webkit-scrollbar-thumb {
        background: #aaa;
    }
    body.dark::-webkit-scrollbar-track {
        background: #344148;
    }
    body.dark::-webkit-scrollbar-corner {
        background: #344148;
    }
    /* Notice */
    body.dark .notie {
        background: rgba(0,0,0,.7)!important;
    }
</style>
<link rel="stylesheet" href="<?php cjUrl('style.min.css') ?>" />
<style>
    .whisper .comment-child {
        padding: 5px 8px;
    }
    #header, .ajaxload a, .post, .comment-body, .respond #textarea, .textbutton, .thumb img, .post-content img, .avatar , .notie {
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    }
    .thumb img, .post-content img, .post, .respond #textarea, .textbutton, .comment-body, .avatar , .notie {
        border-radius: 5px;
    }
    .textbutton .text , .notie {
        border: 0px!important;
    }
    .whisper {
        line-height: 21px;
    }
    .ajaxload a, .ajaxload .loading:hover, .ajaxload .loading {
        padding: 5px 20px;
        border: 1px solid #666;
        border-radius: 5px;
    }
    code {
        color: #489eb9;
    }
    #comments, .breadcrumbs, .tags {
        margin-bottom: 0px;
        margin-left: 8px;
        margin-right: 8px;
    }
    .copyright {
        color: #999;
        font-size: .875em;
        line-height: 1.5;
    }
    .post-near {
        margin-top: 15px;
        margin-bottom: 15px;
        margin-left: 8px;
        margin-right: 8px;
    }
    #comments {
        border-top: 0px;
        padding-top: 0px;
    }
    .post {
        margin-left: 8px;
        margin-right: 8px;
        margin-top: 15px;
        margin-bottom: 15px;
        padding: 16px;
    }
    .post-title {
        margin-top: 0px;
    }
    .more {
        margin-bottom: 0px;
    }
    .noties {
        top: 61px!important;
    }
    /* 滚动条 */
    *::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    *::-webkit-scrollbar-thumb {
        background: #444;
    }
    *::-webkit-scrollbar-track {
        background: #f3f3f3;
    }
    *::-webkit-scrollbar-corner {
        background: #f3f3f3;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    table tr {
        background-color: #fff;
        border-top: 1px solid #c6cbd1;
    }
    table td , table th {
        border: 1px solid #dfe2e5;
        padding: 6px 13px;
    }
    table tr {
        background-color: #fff;
        border-top: 1px solid #c6cbd1;
    }
</style>
</head>
···

请参见文章：Typecho主题 | Initial - Fly 简约更不简单 。