Typecho博客折腾笔记

又折腾博客了。

新增: Typecho自定义搜索页

这个博客是基于Typecho，前几天发现搜索中文关键词时，出现404，之后跳转到首页。试了各种方法无果。开始考虑用百度站内搜索，但引用外部js总是让人心慌。最后决定自已写搜索页面，好在Typecho对常用的数据库操作进行了封装，对于我这样的前端也能轻易看懂。

步骤

1.在你的主题目录下usr/themes/xxxx/新建自定义模板文件，命名search2.php。头部注释区块必须按照官方约定的格式写，不可省略。

search2.php

<?php
/**
 * search2模板
 *
 * @package custom
 */
$k = '关键词';
$db = Typecho_Db::get();
$query= $db->select("title,text")->from('table.contents')->where("title LIKE ? OR text LIKE ?", "%$k%","%$k%");
$result = $db->fetchAll($query);
foreach ($result as $row){
    echo '<h2>'.$row['title'].'</h2>';
    echo '<h4>'.Typecho_Common::subStr(strip_tags($row['text']),1,200).'</h4>';
}

2.进入后台--管理--独立页面--新增，右侧自定义模板下拉框中选择刚刚创建的search2模板，填好url别名，内容可不填，保存后即可在博客中访问刚刚新建的search2.php。

可能遇到的问题：

搜索结果一般只展示概要，需要截取字符串。好在typecho改进了subStr方法，可以在var/Typecho/Common.php查看。
可能需要对关键词高亮，可以交给js处理，注意html标签转义处理。

js关键词高亮方法（代码来自网络）

highlight('search-wrap', '关键词');

function highlight(id, s) {
    if (!s) return;
    var dom = document.getElementById(id);
    var t = dom.innerHTML.replace(/<span\s+class=.?red.?>([^<>]*)<\/span>/gi, "$1");
    dom.innerHTML = t;
    s = encode(s);
    var cnt = loopSearch(s, dom);
    t = dom.innerHTML
    var r = /{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g t = t.replace(r, "<span class='red'>$1</span>");
    dom.innerHTML = t;

    function encode(s) {
        return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/([\\\.\*\[\]\(\)\$\^])/g, "\\$1");
    }

    function decode(s) {
        return s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g, "$1").replace(/>/g, ">").replace(/</g, "<").replace(/&/g, "&");
    }

    function loopSearch(s, dom) {
        var cnt = 0;
        if (dom.nodeType == 3) {
            cnt = replace(s, dom);
            return cnt;
        }
        for (var i = 0,
        c; c = dom.childNodes[i]; i++) {
            if (!c.className || c.className != "highlight") cnt += loopSearch(s, c);
        }
        return cnt;
    }

    function replace(s, dest) {
        var r = new RegExp(s, "g");
        var tm = null;
        var t = dest.nodeValue;
        var cnt = 0;
        if (tm = t.match(r)) {
            cnt = tm.length;
            t = t.replace(r, "{searchHL}" + decode(s) + "{/searchHL}") dest.nodeValue = t;
        }
        return cnt;
    }
}

新增: 动态生成锚点导航

众所周知，如果url有hash值(#值)，页面会滚动到拥有id为#值的标签位置。
给需要加锚点的元素加样式类'.position',用js遍历和赋值id,省去手动添加id的麻烦。

var $positions = $('.position');
var $nav = $('.nav');
var html = "";

$.each($positions, function(index, val) {
  var key = 'position' + index;
  var title = $(val).text();
  $(val).attr('id', key);
  html += '<a href="#' + key + '">' + title + '</a>'
});
$nav.append(html);

修改：网站细节优化

1. 支持https

下载证书并在服务器配置好后，typecho在网站根目录config.inc.php新增以下代码，开启https：

define('__TYPECHO_SECURE__',true);

肉眼观测，打开速度并不会比http逊色。博客在百度的收录第二天就全部换成https地址，可见权重是要高于http的。

typecho自带方法：

<?php $this->thePrev('上一篇： %s', NULL, array()); ?>
<?php $this->theNext('下一篇： %s', NULL, array()); ?>

3. 后台添加了验证码

4. 网页加载速度提升

数据库host由localhost改为127.0.0.1 ，打开速度提升了2-3倍。情况因人而异。