分类 Internet 下的文章
「暗黑」typecho 官方后台样式修改
有时候登录后台写文章或者设置一些什么的时候,官方默认的白色背景样式有些刺眼,特别是晚上的时候眼睛不太舒服,为了让自己的眼睛舒适一点,然后自己就利用 chrome 的审查工具修改成了自己所喜欢的暗黑样式,晚上十点过后网站前端也会自动变成暗黑系样式,这样更配!
周末也是闲的无聊,pjax 的评论 bug 也搞不懂,也没其他事情可做,就趁着无聊的时间瞎折腾一下,有需要的可以自行下载并上传到网站后台 css 目录里,不是主题目录。
概要界面:
撰写界面:
CSS 下载:typecho.zip
「问题」Typecho JS 实现全站 Pjax以及 AJAX 翻页
全站 Pjax:
$(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() {
//预加载
}).on('pjax:start', function() {
//开始
}).on('pjax:complete', function() {
//回调函数
}).on('pjax:end', function() {
//结束
ac();
ajaxnext();
if (typeof _hmt !== 'undefined') {
_hmt.push(['_trackPageview', location.pathname + location.search])
};
if (typeof ga !== 'undefined') {
ga('send', 'pageview', location.pathname + location.search)
}
});
AJAX 翻页:
var isbool = true;
function ajaxnext() {
$('.ajaxload li[class!="next"]').remove();
$(".ajaxload .next a").text("加载更多文章");
$('.ajaxload .next a').click(function() {
if (isbool) {
ajaxpost();
}
return false
})
}
ajaxnext();
function ajaxpost() {
var a = '.ajaxload .next a',
b = $(a).attr("href");
$(a).addClass('loading').text("正在加载");
if (b) {
$.ajax({
url: b,
error: function() {
alert('请求失败,请检查网络并重试或者联系管理员');
$(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
}
})
}
}
将以上需要的功能封装成 js 文件上传到网站主题根目录,ajax 翻页需要保存为 ajax_fy.js,再配合以下 js 调用代码即可实现。
调用方式:
<script src="//cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script src="<?php $this->options->themeUrl('pjax.js'); ?>"></script>
<script src="<?php $this->options->themeUrl('ajax_fy.js'); ?>"></script>
将以上代码放置 header.php 文件</body>
标签之前即可。
Ajax 页脚翻页还需要修改 index.php 相关代码;
定位到<?php $this->pageNav('« 前一页', '后一页 »'); ?>
,然后替换成以下代码即可;
<?php $this->pageNav('« 前一页', '后一页 »', 1, '...',array('wrapClass' => 'page-navigator ajaxload')); ?>
pjax 全站刷新 bug 提示:
评论点击提交之后直接消失,再次刷新也是一样。
在网上找了一些资料都是修改源码,我觉得有点麻烦就放弃了,修复日期待定。
或者您有更好更快的解决方法,留言即可。
Typecho AJAX 利用 JS 无插件实现无刷新评论
自从换了移动端主题之后,在移动端主题下评论莫名出现了评论框重叠以及无法评论的 BUG,我自己测试的时候也没记在心上,我想的是移动端估计没人评论,就一直晾着,昨天基友 欧文斯 在移动端下评论的时候出现了之前一模一样的 BUG,我第一反应肯定是 ajax 出了问题,经过排查发现移动端主题的 ajax 与 AjaxComment 插件产生了冲突,而且 AjaxComment 插件原本也有不少的 BUG,作者好几年没更新了,也就不了了之。
因为本站的移动端和 PC 端主题是分开识别的,移动端已经自带 ajax,停用并删除 AjaxComment 插件,直接用代码来实现 PC 端主题 ajax 功能。
搜索了相关的教程都比较复杂,有几个插件也很久没更新,不需要插件的 ajax 教程也跟着做了一遍,又是修改 functions.php 又是 footer.php 的,都整懵圈了结果还是不行。
然后找到移动端主题的 ajax 评论功能源码,无脑添加到 PC 主题里测试时发现点击提交评论的时候评论不会显示出来,要重新刷新一下网站才会显示,群里有人说不适配主题,要自己修改代码进行适配...
无意间看到一个 typecho ajax 教程文章留言里有人提到最简单的 js 调用,只需一个调用,无需修改后台源码即可实现评论 ajax。
直接提取 ajax 评论的代码封装成 js 文件,这样就不需要修改代码来适配主题了...
function ac() {
$body = $('html,body');
var g = '.comment-list',
h = '.comment-num',
i = '.comment-reply a',
wi = '.whisper-reply',
j = '#textarea',
k = '',
l = '';
c();
$('#comment-form').submit(function() {
$.ajax({
url: $(this).attr('action'),
type: 'post',
data: $(this).serializeArray(),
error: function() {
alert("提交失败,请检查网络并重试或者联系管理员。");
return false
},
success: function(d) {
if (!$(g, d).length) {
alert("您输入的内容不符合规则或者回复太频繁,请修改内容或者稍等片刻。");
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 = $('#li-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 = $('#li-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)
}
$('#li-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 + ',' + wi + ', #cancel-comment-reply-link').unbind('click');
c();
if (k) {
$body.animate({
scrollTop: $('#li-comment-' + k).offset().top - 50
}, 300)
} else {
$body.animate({
scrollTop: $('#comments').offset().top - 50
}, 300)
}
}
}
});
return false
});
function c() {
$(i + ',' + wi).click(function() {
l = $(this).parent().parent().parent().attr("id")
});
$('#cancel-comment-reply-link').click(function() {
l = ''
})
}
};
ac();
以上源码保存为 ajax.js 文件,并上传到主题文件根目录。
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="<?php $this->options->themeUrl('ajax.js'); ?>"></script>
以上代码添加到 header.php 文件里</head>
代码之前。
原主题已经集成了 ajax 评论,我只是把它提取出来重新封装成 js 直接调用而已,理论上无需适配即可开箱即用。
「折腾」一言 api 新调用以及网站修复和迁移
之前网站用的是 AWS 日本节点 VPS,受制于 NTT 日常爆炸线路出现的丢包已经严重影响了访问体验,再加上机场横行,直接迁移到 Pzea 香港节点,配置环境之后还原源文件,重新解析后无缝迁移到新的服务器上,一分钱一分货,也值了!
友情链接已在页内展示,如不喜欢请与我沟通,只是想突出本站而已。
把 gravatar.loli.net 源替换成自建的 gravatar 反代服务,因据传郭老板对公益事业不再发热,不如利用香港服务器自建 gravatar 反代,因服务器流量限制,暂不公开使用。
用 chrome 开发模式调试网站的时候发现网站 logo 下方的许巍一言 api 在调用时都会或多或少的产生网络延迟,虽然调用网站 api.inwao.com 跟主域名都在同一个服务器,但是 js 调用的时候会拖慢网站整体速度,而且在调用完这个 api 的时候,网站才会完全打开,丢弃原 api 调用,直接集成在主题里,随头部一起加载,而且在 chrome 开发者模式也查看不到调用链接了。
旧调用方法:https://inwao.com/sentence.html
新调用方法:https://xxx.xxx/hitokoto/
在网站根目录新建一个 hitokoto 文件夹(名字随意);
<?php
//获取句子文件的绝对路径
$path = dirname(__FILE__);
$file = file($path."/hitokoto.txt");
//随机读取一行
$arr = mt_rand( 0, count( $file ) - 1 );
$hitokoto = trim($file[$arr]);
//输出内容
echo $hitokoto;
?>
以上代码保存为 index.php 文件并放入 hitokoto 文件夹内,新建 hitokoto.txt 文本文件并放入 hitokoto 文件夹内(hitokoto.txt 文本文件自行添加句子)。
在 header.php 文件的 之前添加<?php $hitokoto = file_get_contents('https://xxx.xxx/hitokoto/'); ?>
注:此代码一定要添加在前面,如果添加在下面代码的后面,将不会显示,因为冲突了。
接着在您显示一言的地方添加<?php echo $hitokoto; ?>
去除了谷歌广告以及自建的 matomo 网站统计服务,清除了代码高亮插件以及其他几个插件,进行了主题集成,减少请求数以获得速度提升。