Typecho博客折腾笔记
2017-12-14 | 4,228浏览 | 0评论 | 标签:无
又折腾博客了。
新增: 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的。
2. 添加“上一篇”,“下一篇”功能
typecho自带方法:
<?php $this->thePrev('上一篇: %s', NULL, array()); ?>
<?php $this->theNext('下一篇: %s', NULL, array()); ?>
3. 后台添加了验证码
4. 网页加载速度提升
数据库host由localhost改为127.0.0.1 ,打开速度提升了2-3倍。情况因人而异。
(本篇完。有疑问欢迎留言探讨)
热门文章
- 微信小程序“拍照识图”上线(62,968)
- YouTube评论翻译插件《油管评论翻译机》上线了(57,018)
- 基金助手--chrome浏览器插件(43,580)
- 拍照识别彩票结果在线工具(31,300)
- vue+tabs动态组件方案漫谈(25,956)
- 《油管评论翻译机》使用说明书(23,679)
- 网页打印插件Print.js(23,440)
- 自用YouTube抓取评论+翻译工具(22,646)
- px转rem/vw方法小结(17,415)
- YouTube评论导出免费在线工具(16,606)