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

HeadPic

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

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

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

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

速度优化

Ajax & Pjax

Initial 主题 自带 全站PjaxAjax评论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后台=>文章编辑页->自定义字段->文章目录 设置。

背景音乐

自带。在 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) {,在 } 之前加上

$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);
    
    $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; ?>">

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

样式美化

本站的额外样式分为两部分,存于 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>
···

本站的模板版本是 2.4.2 ,所有修改基于此版本。

文章目录