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

2017-12-23T02:20:00

事实上按照《从零开始建立一个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>&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按钮不正常工作的设置方式

最新的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

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

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

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

完成之后可以在用户设置里找到我们刚才注册的应用，保存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): ?>
    &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控制台的传送门。

添加百度访问统计

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

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

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

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

第三步，修改博客主题中的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

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

以上

开启你的博客之路吧。

当前页面是本站的「Baidu MIP」版。发表评论请点击：完整版 »

© 2024 MIP for Typecho v0.8 , Designed by Holmesian.