从零开始建立一个typecho博客-查漏补缺篇
in 网站建造技术日志 with 20 comments and 26111 read

从零开始建立一个typecho博客-查漏补缺篇

in 网站建造技术日志 and 26112 read

事实上按照《从零开始建立一个typecho博客》一文做完之后,我们的博客就基本上成型了,但是想要用的好,用的妙,还是要进行一定的定制工作。

下面就来扩展介绍一些自定义博客的内容。

独立页面<关于>

默认是这样的。

默认

在这里修改:

管理-独立页面

独立页面<搜索>

这段文字节选自PingHsu作者的博客LiNPX

创建搜索页

创建搜索页有三个步骤

1、新建页面
2、选择模板Template Page of Search
3、添加自定义字段archive

注意事项:无论选择哪个模板都是需要添加自定义字段archive,才能保证你的模板页跟我的一样

设置菜单

创建完搜索页还有一道工序,那就是隐藏这个页面,隐藏后的这个页面将不再出现在菜单

设置方式:

1、在创建搜索页当页,右边的sidebar的“高级选项”,在“公开度”那,选择“隐藏”
2、复制你的搜索页的访问地址,不要有空格,记得带上http://或https://
2、到外观设置那,在搜索页设置的输入框内,复制访问地址

一顿操作之后,点击菜单上的搜索图标,即可跳转到搜索页~

访问成功代表设置完成~

添加语句

如果你想跟我一样有一段这样的话:The following tabs can help you!

则直接在当页的编辑器内输入你自己想要话,记得不要带有回车和空格,然后发布文章

当然你也可以不设置独立搜索页,那么菜单上的搜索图标将维持原有的外观和功能

在文章阅读页面的标题下面标记阅读量

就像下图中的高亮部分。

read

具体步骤如下:

修改Pinghsu主题的post.php,在内容中搜索post-header-thumb-meta,发现会有好几个结果。

不用担心,出现的好几个结果会进行相同的处理。

result

我们在这个

下面可以看到对应的
标签,在这个标签的前面,紧挨着一个标签。

tag

在这两个标签之间,插入下面的代码。如此重复在三个位置做三次。

 and <?php get_post_view($this) ?> read

然后搜索关键词post-data,进行同样的粘贴操作,即可。

在首页最下方标记“网站已运行XX天”

xx天

只需要修改Pinghsu主题的footer.php,搜索关键词copyright,找到下面这行代码:

<p>&copy; <?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按钮不正常工作的设置方式

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;

sql语句输入框

修改数据库配置文件

网站根目录数据库配置文件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

Store

下面提到的几乎所有Typecho扩展,都可以从这个站点下载到,非常方便。

与评论有关的Typecho扩展

想要在收到评论的时候,最快的得到推送,有很多种解决方法。现在推荐三个插件。

最推荐的是第一个插件CommentToMail,这个不仅站长可以收到通知,用户也可以收到通知。

CommentToMail

让参与评论的人可以收到邮件通知。

点击CommentToMail V4.1 使用教程

【2020年7月30日更新】点击CommentToMail V4.x 使用教程,教程备份Perma Link,下载链接备份Github

下载插件,查看教程。

主要部分按照这个教程配置即可。

香菇大佬的介绍如下。

插件版本2.0、发信方式smtp、因为使用qq邮箱代理因此地址是smtp.qq.com、端口465、用户即邮箱地址、密码是在邮箱设置中生成的smtp登陆码、服务器验证及ssl都勾选、其他内容个性化设置即可

我简要地总结以下步骤。

  1. 下载插件并上传到plugin文件夹。
  2. 修改主题文件的comments.php。
  3. 到你喜欢的邮箱开启SMTP功能。(如果是QQ邮箱/网易邮箱,在SMTP的部分,可以申请到一个专用密码/客户端授权码,这个密码很重要。)
  4. 到后台启用这个插件,然后填写SMTP信息,还有那个密码。
  5. 看到最下面的KEY了吗,KEY下面还有行小字,把小字上的[]部分(连带着[]一起)用KEY替换掉。这个就是一会儿要监控的地址字符串了。
  6. 到阿里云-云监-控制台-站点管理-创建新监控点。HTML,名字随便,填上上面这个字符串,确定。时间间隔随便。
  7. 然后到博客的后台发送一下测试邮件,如果发送成功就行了。

如果有什么问题,可以直接在评论中留言问我。

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,如果还没有创建,那么点击这里申请

img

差不多按照上述图片填写完信息之后点击申请即可。

完成之后可以在用户设置里找到我们刚才注册的应用,保存clientIDclientSecret待用。

img

同时需要有一个 GitHub 项目作为 Gitalk 评论存储位置,直接创建一个新项目即可。

下载插件

访问 GitHub 克隆项目或者直接下载项目文件,将其中Gitalk文件夹上传到 Typecho 博客目录/usr/plugins里面。

编辑博客主题文件comments.php,使用以下内容完全替换。

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<div id="comments"></div>

访问博客后台插件管理面板启用插件。

配置插件

在博客后台插件管理面板里面设置插件内容,参考设置如下。

img

其中clientIDclientSecret我们已经提过,项目名称请填写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行,将下列红线中的内容注释掉。

User.php

注意!上面这一步非常重要,如果遗漏的话你会无法登陆自己的管理员账号,只能通过FTP重新上传修改后的User.php。

启用插件

修改成功后,访问博客后台插件管理面板启用插件。

可以在设置里面设置半小时允许出错的次数。

设置

设置完成后,你可以登出账户,重新登录,如果输入一个错误的密码,它会提示你“无效的账号密码,您还可以尝试xx次”。

错误提示

这样子,博客的安全性就有所上升了。

密码找回插件-Passport

这样注册到你博客的用户忘记密码之后就可以找回密码啦。不用特意联系管理员查看数据库了,厉害了吧。

启用之后同样需要设置SMTP呢,请参考本文中上面的CommentToMail部分。

下载插件

下载地址:Typecho商店

安装方法:typecho-fans/plugins

第一步,修改/admin/login.php

找到类似的一段代码:

<?php if($options->allowRegister): ?>
    &bull;
    <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的界面仿照百度访问统计设计,看起来还是相当美观的。

⚠️警告:该插件会将访客数据写入到数据库如果你的网站访问量较大,不建议使用该插件,会拖垮数据库,对于该插件TypechoWiki认为最大价值是研究他的作者如何写的这款插件,当作写插件的范例来研究还行!生产环境中还是建议使用第三方网站统计平台!

下载插件

点击上面的链接,从Github下载一个ZIP包,解压得到一个文件夹。

将文件夹的名字改为Access,上传至Typecho博客目录/usr/plugins里面。

启用插件

访问博客后台插件管理面板启用插件。

刷新页面之后,你会发现在后台首页可以看到Access控制台的传送门。

Access

添加百度访问统计

因为网站做出来就是让人看的,而多少人看了对站长来说是一个非常关心的问题,怎么统计阅读量呢?我们可以使用第三方统计服务。

比较简单的是百度统计,点击注册即可。

第一步,选择添加网站。输入网站的域名和首页地址。

第二步,将百度给出的代码复制。

第三步,修改博客主题中的Header.php,在</head>标签上方,粘贴代码。保存

第四步,回到百度统计后台查看代码添加是否成功。

这几步做完之后,只需等待二十分钟左右,就可以安心等待它的正常工作了。

Typecho主题Pinghsu - 移动端导航菜单关闭

这段文字转载自JIElive's Blog - 《Typecho主题Pinghsu - 移动端导航菜单关闭》

一共需要修改三个文件(其实集中只修改一个也可以,但是为了主题代码整体的整洁,还是改三个吧。😶)

修改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

最后,你可以在博客后台的独立页面管理中看见投稿页,可以修改它的标题哦。

以上

开启你的博客之路吧。

Responses
  1. a! typecho插件跟主题越来越丰富了 一本满足

    Reply
    1. @香菇

      嘿嘿~我要把自己觉得好用的插件都记录下来

      Reply
  2. 博主用了你的“在文章阅读页面的标题下面标记阅读量”
    报错Call to undefined function get_post_view()

    Reply
  3. 这样插入的

    Reply
    1. @ahxx

      代码显示不了

      Reply
      1. @ahxx

        你好,给我发邮件,我试试看能不能找出问题 maemolee@oultook.com

        Reply
        1. @maemolee

          已经解决,谢谢

          Reply
  4. 像大神学习

    博主,请问下密码找回插件-Passport安装之后点击“忘记密码时”提示Call to a member function screenName() on null,能帮忙瞧一瞧嘛

    Reply
    1. @像大神学习

      不太懂,可以找个php程序员问一下。

      Reply
  5. 涉谷四

    博主,你好!请教下你的自定义链接页是如何加上去如“操作台”,还有它怎么能保持和搜索菜单位置。

    Reply
    1. @涉谷四

      我不是在自定义链接页上加的操作台,如果你审查一下我的页面元素,就能看出来,这个链接其实是直接写进页面代码里的?

      Reply
  6. yg

    请问归档等页面的网址是怎么把中间的一部分弄没得,index.php

    Reply
    1. @yg

      这个你可以看我的“关于我”这个页面的评论区,里面有个大佬给我帮忙操作的。

      Reply
    2. @yg

      我刚解决这个问题:
      https://m1llie.tech/archives/urlRewrite.html

      Reply
  7. 折腾buding

    Reply
    1. @learm

      补丁?你是说插件吗?

      Reply
  8. 哇!很有用!一下子解决了我的好几个想改进的点,感谢~

    Reply
    1. @m1llie

      不客气!很高兴能帮到你

      Reply
  9. Geight

    博主你好,请问怎么拿掉网页左上角那个hello world啊

    Reply
    1. @Geight

      我的邮件:maemolee@outlook.com,你可以发截图给我看看

      Reply