事实上按照《从零开始建立一个typecho博客》一文做完之后,我们的博客就基本上成型了,但是想要用的好,用的妙,还是要进行一定的定制工作。
下面就来扩展介绍一些自定义博客的内容。
独立页面<关于>
默认是这样的。
在这里修改:
独立页面<搜索>
这段文字节选自PingHsu作者的博客LiNPX。
创建搜索页
创建搜索页有三个步骤
1、新建页面
2、选择模板Template Page of Search
3、添加自定义字段archive
注意事项:无论选择哪个模板都是需要添加自定义字段archive,才能保证你的模板页跟我的一样
设置菜单
创建完搜索页还有一道工序,那就是隐藏这个页面,隐藏后的这个页面将不再出现在菜单
设置方式:
1、在创建搜索页当页,右边的sidebar的“高级选项”,在“公开度”那,选择“隐藏”
2、复制你的搜索页的访问地址,不要有空格,记得带上http://或https://
2、到外观设置那,在搜索页设置的输入框内,复制访问地址
一顿操作之后,点击菜单上的搜索图标,即可跳转到搜索页~
访问成功代表设置完成~
添加语句
如果你想跟我一样有一段这样的话:The following tabs can help you!
则直接在当页的编辑器内输入你自己想要话,记得不要带有回车和空格,然后发布文章
当然你也可以不设置独立搜索页,那么菜单上的搜索图标将维持原有的外观和功能
在文章阅读页面的标题下面标记阅读量
就像下图中的高亮部分。
具体步骤如下:
修改Pinghsu主题的post.php,在内容中搜索post-header-thumb-meta
,发现会有好几个结果。
不用担心,出现的好几个结果会进行相同的处理。
我们在这个
在这两个标签之间,插入下面的代码。如此重复在三个位置做三次。
and <?php get_post_view($this) ?> read
然后搜索关键词post-data
,进行同样的粘贴操作,即可。
在首页最下方标记“网站已运行XX天”
只需要修改Pinghsu主题的footer.php,搜索关键词copyright
,找到下面这行代码:
<p>© <?php echo date('Y'); ?> <a href="<?php $this->options->siteUrl(); ?>"><?php $this->options->title(); ?></a></p>
然后在这一行代码的上方插入如下代码:
<p>本站已经运行<a id="days">0</a>天</p>
<script>
var s1 = '2017-11-16’;//设置为你的建站时间
s1 = new Date(s1.replace(/-/g, "/"));
s2 = new Date();
var days = s2.getTime() - s1.getTime();
var number_of_days = parseInt(days / (1000 * 60 * 60 * 24));
document.getElementById('days').innerHTML = number_of_days;
</script>
如果是在本地修改,那么同步到服务器;如果是在后台修改,那么直接保存。
刷新即可见效。
关于RSS按钮不正常工作的设置方式
最新的typecho已经内置了feedURL()接口,但是主题没有对此进行适配,需要手动修改。
在设置-控制台-外观-编辑当前外观-footer.php
中,按Command+F
搜索关键词rss
,找到语句,并将
siteUrl(); ?>feed/
替换为
feedUrl(); ?>
即可。具体对比可见下图。
如何让typecho支持emoji
本部分内容节选自使Typecho支持最流行的Emoji表情😍,原始内容可点击链接查看。
修改数据库编码
主机壳->主机管理->数据库管理->phpMyAdmin->操作->排序规则->utf8mb4_unicode_ci
->执行
修改数据库表编码
还是在phpMyAdmin。
sql->粘贴以下sql语句到输入框->执行
alter table typecho_comments convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_contents convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_fields convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_metas convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_options convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_relationships convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_users convert to character set utf8mb4 collate utf8mb4_unicode_ci;
修改数据库配置文件
网站根目录数据库配置文件config.inc.php。修改字符集为utf8mb4
。
在本地修改完成之后通过ftp同步/上传到服务器。
$db->addServer(array (
'host' => localhost,
'user' => 'youruser',
'password' => 'yourpassword',
'charset' => 'utf8mb4', //修改这一行
'port' => 3306,
'database' => 'yourdatabase'
), Typecho_Db::READ | Typecho_Db::WRITE);
修改成功之后
就可以肆无忌惮的放emoji了😂。
隆重介绍Typecho扩展商店-Echoed
官方网站:Echoed
下面提到的几乎所有Typecho扩展,都可以从这个站点下载到,非常方便。
与评论有关的Typecho扩展
想要在收到评论的时候,最快的得到推送,有很多种解决方法。现在推荐三个插件。
最推荐的是第一个插件CommentToMail,这个不仅站长可以收到通知,用户也可以收到通知。
CommentToMail
让参与评论的人可以收到邮件通知。
【2020年7月30日更新】点击CommentToMail V4.x 使用教程,教程备份Perma Link,下载链接备份Github。
下载插件,查看教程。
主要部分按照这个教程配置即可。
香菇大佬的介绍如下。
插件版本2.0、发信方式smtp、因为使用qq邮箱代理因此地址是smtp.qq.com、端口465、用户即邮箱地址、密码是在邮箱设置中生成的smtp登陆码、服务器验证及ssl都勾选、其他内容个性化设置即可
我简要地总结以下步骤。
- 下载插件并上传到plugin文件夹。
- 修改主题文件的comments.php。
- 到你喜欢的邮箱开启SMTP功能。(如果是QQ邮箱/网易邮箱,在SMTP的部分,可以申请到一个专用密码/客户端授权码,这个密码很重要。)
- 到后台启用这个插件,然后填写SMTP信息,还有那个密码。
- 看到最下面的KEY了吗,KEY下面还有行小字,把小字上的[]部分(连带着[]一起)用KEY替换掉。这个就是一会儿要监控的地址字符串了。
- 到阿里云-云监-控制台-站点管理-创建新监控点。HTML,名字随便,填上上面这个字符串,确定。时间间隔随便。
- 然后到博客的后台发送一下测试邮件,如果发送成功就行了。
如果有什么问题,可以直接在评论中留言问我。
Comment2Telegram
把收到的评论推送到你的Telegram上。
点击Comment2Telegram-master.zip下载。
Github地址:https://github.com/MoeLoli/Comment2Telegram
使用方法:
将下载的文件解压,重命名为Comment2Telegram
,上传到你的Typecho的/usr/plugins
,并在Typecho后台开启插件。
然后填写Telegram Bot Token和Telegram ID(可通过 Start @NekoMoe_Bot
,发送 /whoami
获得。
Comment2WeChat
把收到的评论推送到你的微信上。
点击Comment2Wechat-master.zip下载。
Github地址:https://github.com/YianAndCode/Comment2Wechat
使用方法:
将下载的文件解压,重命名为Comment2Wechat
,然后上传到你的Typecho的/usr/plugins
,并在Typecho后台开启插件。
到Server酱里申请你的专属SCKEY,并根据提示绑定你的微信。
将你申请到的SCKEY填到插件设置里,保存即可。
(建议跳过这部分)第三方评论组件-Gitalk
如果你使用原生评论,就不用读这部分。
本部分内容选改自Gitalk for Typecho,原始内容请点击链接查看。
本文向大家介绍一下评论插件 Gitalk for Typecho,本插件将开源评论项目 Gitalk 集成到Typecho博客中。
准备工作
首先需要一个GitHub Application,如果还没有创建,那么点击这里申请。
差不多按照上述图片填写完信息之后点击申请即可。
完成之后可以在用户设置里找到我们刚才注册的应用,保存clientID
和clientSecret
待用。
同时需要有一个 GitHub 项目作为 Gitalk 评论存储位置,直接创建一个新项目即可。
下载插件
访问 GitHub 克隆项目或者直接下载项目文件,将其中Gitalk
文件夹上传到 Typecho 博客目录/usr/plugins
里面。
编辑博客主题文件comments.php
,使用以下内容完全替换。
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<div id="comments"></div>
访问博客后台插件管理面板启用插件。
配置插件
在博客后台插件管理面板里面设置插件内容,参考设置如下。
其中clientID
和clientSecret
我们已经提过,项目名称请填写GitHub项目名称,项目所有者请填写GitHub用户名,项目管理员一般情况只有一个,如果需要多个人管理,那么请使用英文逗号隔开填写即可。
使用插件
对于每篇文章,Gitalk 会提示管理是否创建一个 Issue 来记录评论,管理员在登录后点击一下 Init Issue 即可开始评论。
当然,也可以选择让系统自动进行Init Issue。具体操作如下:
找到/usr/plugins/Gitalk/
目录下面的plugin.php,然后搜索关键词createIssueManually
,将后面的true
改成false
。
然后在这一行语句的上面,插入下面这行语句。
id: location.pathname,
这样子系统就会在你第一次打开文章的时候,自动进行Init Issue了。
在开启第三方评论组件后,记得去修改post.php,删掉文章标题下面的评论数量统计。修改方法请查看上文中讲的【在文章阅读页面的标题下面标记阅读量】部分。
需要删掉的内容如下。
with <a href="#comments"><?php $this->commentsNum(_t(' 0 comment'), _t(' 1 comment'), _t(' %d comments')); ?></a>
AjaxComments
Ajax 内置嵌套评论。
At
为评论提供当前页面@ 功能。
登录限制插件-LoginLimit
为了防止我们的管理员账号密码被暴力破解,我们需要限制在一定时间段内输错密码的次数。
有一个非常有用的插件:hongweipeng/LoginLimit_for_Typecho
下载插件
点开链接,从Github下载它的ZIP包,我们会得到一个名字带有-master
的文件夹。文件夹里面有个子文件夹叫做LoginLimit
,这就是插件本体了。
通过FTP程序,将LoginLimit
文件夹上传至Typecho博客目录/usr/plugins
里面。
修改代码
编辑var/Widget/User.php
文件约第117行,将下列红线中的内容注释掉。
注意!上面这一步非常重要,如果遗漏的话你会无法登陆自己的管理员账号,只能通过FTP重新上传修改后的User.php。
启用插件
修改成功后,访问博客后台插件管理面板启用插件。
可以在设置里面设置半小时允许出错的次数。
设置完成后,你可以登出账户,重新登录,如果输入一个错误的密码,它会提示你“无效的账号密码,您还可以尝试xx次”。
这样子,博客的安全性就有所上升了。
密码找回插件-Passport
这样注册到你博客的用户忘记密码之后就可以找回密码啦。不用特意联系管理员查看数据库了,厉害了吧。
启用之后同样需要设置SMTP呢,请参考本文中上面的CommentToMail部分。
下载插件
下载地址:Typecho商店
安装方法:typecho-fans/plugins
第一步,修改/admin/login.php
找到类似的一段代码:
<?php if($options->allowRegister): ?>
•
<a href="<?php $options->registerUrl(); ?>"><?php _e('用户注册'); ?></a>
<?php endif; ?>
在它下方添加一段代码:
<?php
$activates = array_keys(Typecho_Plugin::export()['activated']);
if (in_array('Passport', $activates)) {
echo '<a href="' . Typecho_Common::url('passport/forgot', $options->index) . '">' . '忘记密码' . '</a>';
}
?>
启用插件
然后将下载的插件文件夹上传到plugins
文件夹,后台启动即可。
访问统计插件
(建议跳过这部分)访问统计插件-Access
如果你不喜欢上面讲的百度访问统计,则可以选择使用typecho的一个插件:Access。
Access的界面仿照百度访问统计设计,看起来还是相当美观的。
下载插件
点击上面的链接,从Github下载一个ZIP包,解压得到一个文件夹。
将文件夹的名字改为Access
,上传至Typecho博客目录/usr/plugins
里面。
启用插件
访问博客后台插件管理面板启用插件。
刷新页面之后,你会发现在后台首页可以看到Access控制台
的传送门。
添加百度访问统计
因为网站做出来就是让人看的,而多少人看了对站长来说是一个非常关心的问题,怎么统计阅读量呢?我们可以使用第三方统计服务。
比较简单的是百度统计,点击注册即可。
第一步,选择添加网站。输入网站的域名和首页地址。
第二步,将百度给出的代码复制。
第三步,修改博客主题中的Header.php,在</head>
标签上方,粘贴代码。保存
第四步,回到百度统计后台查看代码添加是否成功。
这几步做完之后,只需等待二十分钟左右,就可以安心等待它的正常工作了。
Typecho主题Pinghsu - 移动端导航菜单关闭
这段文字转载自JIElive's Blog - 《Typecho主题Pinghsu - 移动端导航菜单关闭》。
一共需要修改三个文件(其实集中只修改一个也可以,但是为了主题代码整体的整洁,还是改三个吧。😶)
- header.php
- footer.php
- style.min.css
修改header.php
ctrl+F找到下面这一行
<div class="navbar-mobile-menu" onclick="">
修改为
<div class="navbar-mobile-menu" id="navbar-mobile-swith" onclick="">
修改footer.php
ctrl+F找到下面这一行
header.init();
在他下面另起一行,添加以下内容
var navbarSwith = document.getElementById("navbar-mobile-swith");
navbarSwith.onclick = function() {
if (!navbarSwith.classList.contains("navbar-mobile-menu-on")) {
navbarSwith.classList.add("navbar-mobile-menu-on");
} else {
navbarSwith.classList.remove("navbar-mobile-menu-on");
}
};
修改style.min.css
由于CSS是压缩的,修改的时候要仔细点啊。
先ctrl+F找到下面的内容(只有1处位置)
.navbar-mobile-menu:hover>ul
修改为
.navbar-mobile-menu-on ul
再ctrl+F找到下面的内容(还有9处位置,建议使用“替换”工具)
.navbar-mobile-menu:hover
修改为
.navbar-mobile-menu-on
至此,完成,去试试效果吧😜
其他插件
AutoBaiduSubmit
自动向百度提交链接,访客越多,收录量越大。
Announcement
Typecho 公告栏插件。
记得启用之后在设置里面选择jQuery自动加载哦~
Contribute
投稿插件!
让站长以外的人也可以进行投稿活动www
下载地址:Typecho论坛
使用方法:将下载后的文件夹中的theme文件夹中的Contribute.php上传到你现在使用的博客主题的目录下,然后将plugin文件夹中的Contribute文件夹上传到插件文件夹,然后去后台启动即可www
最后,你可以在博客后台的独立页面管理中看见投稿页,可以修改它的标题哦。
以上
开启你的博客之路吧。
本文由 maemolee 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Jul 30, 2020 at 04:53 pm
a! typecho插件跟主题越来越丰富了 一本满足
嘿嘿~我要把自己觉得好用的插件都记录下来
博主用了你的“在文章阅读页面的标题下面标记阅读量”
报错Call to undefined function get_post_view()
这样插入的
代码显示不了
你好,给我发邮件,我试试看能不能找出问题 maemolee@oultook.com
已经解决,谢谢
博主,请问下密码找回插件-Passport安装之后点击“忘记密码时”提示Call to a member function screenName() on null,能帮忙瞧一瞧嘛
不太懂,可以找个php程序员问一下。
博主,你好!请教下你的自定义链接页是如何加上去如“操作台”,还有它怎么能保持和搜索菜单位置。
我不是在自定义链接页上加的操作台,如果你审查一下我的页面元素,就能看出来,这个链接其实是直接写进页面代码里的?
请问归档等页面的网址是怎么把中间的一部分弄没得,index.php
这个你可以看我的“关于我”这个页面的评论区,里面有个大佬给我帮忙操作的。
我刚解决这个问题:
https://m1llie.tech/archives/urlRewrite.html
折腾buding
补丁?你是说插件吗?
哇!很有用!一下子解决了我的好几个想改进的点,感谢~
不客气!很高兴能帮到你
博主你好,请问怎么拿掉网页左上角那个hello world啊
我的邮件:maemolee@outlook.com,你可以发截图给我看看