Story主题优化

链接优化

为文章中和独立页面的内容里面的链接加上 _blank 和 external nofollow
在主题的functions.php里面添加如下内容

function parseContnet($content){
    $fa=array();
    preg_match_all('/<a (.*?)>/',$content,$a);
    $num=count($a[0]);
    for ($i = 0; $i < $num; $i++) {
        $f = $a[1][$i];
        $ff = '<a ' . $f . ' target="_blank" rel="external nofollow">';

        array_push($fa, $ff);
    }
    for ($i = 0; $i < $num; $i++) {
        $content = str_replace_limit($a[0][$i], $fa[$i], $content);
    }
    print_r($content); 
}

然后在post.php和page.php页面添加页面解析函数

<?php parseContnet($this->content); ?>

导航树优化

设置文章导航树一直开启
在post.php页面将原有的代码改成如下

<?php
   $torHTML = post_tor($this->content);
   if ($torHTML != '') {
      print_r('<div id="postTorTree"><div id="torTree" style="display: inline-block;"><div class="torArcT"><div class="torArcTile">' . $torHTML . '</div></div></div></div>');
   }
?>

去掉footer.php的如下代码

<?php if ($this->is('post')) : ?>
      <?php $postConfig = post_config($this->content); ?>
      <?php if ($postConfig['isTorTree']) : ?>
          isMenu2('auto');
      <?php endif; ?>
<?php endif; ?>

同时去掉funtions.php中的function post_config($content)函数

添加表格样式

修改 mian.css文件

table {
    width: 100%; /*表格宽度*/
    max-width: 65em; /*表格最大宽度，避免表格过宽*/
    border: 1px solid #dedede; /*表格外边框设置*/
    margin: 15px auto; /*外边距*/
    border-collapse: collapse; /*使用单一线条的边框*/
    empty-cells: show; /*单元格无内容依旧绘制边框*/
}
table th,
table td {
    height: 35px; /*统一每一行的默认高度*/
    border: 1px solid #dedede; /*内部边框样式*/
    padding: 0 10px; /*内边距*/
}
/*表头样式*/
table th {
    font-weight: bold; /*加粗*/
    background: rgba(158,188,226,0.2); /*背景色*/
}
/*隔行变色*/
table tbody tr:nth-child(2n) {
    background: rgba(158,188,226,0.12);
}
/*悬浮变色*/
table tr:hover {
    background: #efefef;
}
/*2.首列不换行*/
table td:nth-child(1) {
    white-space: nowrap;
}
/*增加滚动条*/
.table-area {
    overflow: auto;
}

增加滚动条

/*需要jquery.min.js*/
$("table").wrap("<div class='table-area'></div>");

插件Prismjs

插件位置Prismjs
增加了对代码段的渲染

添加打赏功能

在post.php代码适当位置添加如下代码

<!-- 打赏 -->
  <div style="padding: 10px 0; margin: 20px auto; width: 100%; font-size:16px; text-align: center;">

    <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
      <span>打赏</span>
    </button>
    <div id="QR" style="display: none;">
      
        <div id="wechat" style="display: inline-block">
          <a class="fancybox" rel="group"><img id="wechat_qr" src="https://www.m0yuqi.cn/usr/uploads/wechat.png" alt="拾叁 WeChat Pay"></a>
          <p>微信打赏</p>
        </div>
        <div id="alipay" style="display: inline-block">
          <a class="fancybox" rel="group"><img id="alipay_qr" src="https://www.m0yuqi.cn/usr/uploads/alipay.jpg" alt="拾叁 Alipay"></a>
          <p>支付宝打赏</p>
        </div>
    </div>
  </div>
<!-- 打赏 -->

接着修改主题的main.css文件，添加如下样式

#QR{padding-top:20px;}
#QR a{border:0}
#QR img{width:180px;max-width:100%;display:inline-block;margin:.8em 2em 0 2em}
#rewardButton{border:1px solid #ccc;line-height:36px;text-align:center;height:36px;display:block;border-radius:25px;-webkit-transition-duration:.4s;transition-duration:.4s;background-color:#fff;color:#999;margin:0 auto;padding:0 25px}
#rewardButton:hover{color:#f77b83;border-color:#f77b83;outline-style:none}

添加回到顶部功能

在footer.php代码中加入如下代码

var scrolltotop={

    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="https://www.m0yuqi.cn/usr/uploads/top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:30, offsety:30}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: 'javascript:scroll(0,0)', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
 state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },


    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
   
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()

$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()

typecho & Story 真是个不错的选择