本来移植的时候确实只花了半天时间,但是后期优化以及调整细节花了不少时间。这篇文章记录下这些坑点,如果对你折腾主题有帮助那也是极好的。

文章内容换行解决

typecho 程序在解析文章的时候,只要是按下换行,那么不管你是段与段之间有没有空格,他解析后显示的文章都会有一行多余的空间。为了解决这个问题,谷歌了下,算是解决这个问题了,以毒攻毒的解决方法吧,毕竟原文章也没给原理说出来。

注释掉在 /var/hyperDown.php 文件 1177 行

// $str = preg_replace("/\n/", "<br />", $str);

然后再改为:

$str = preg_replace("/\n/", "<br />", $str);

莫名其妙的就让 bug 消失了,审查元素的时候也只是发现多余的<br>标签被清理掉,而段内的<br>也没有变成<br />

所以说这次 bug 的修复很离奇,可能是由于触发了之后的一些代码,两两呼应直接把 bug 修复了。

文章使用 Emoji 表情

在没有给这个显示 emoji 表情的问题解决前。千万不要在文章里使用 emoji 表情,不然你写的那片文章在发布就会变成空白,这是血的教训。直接就没有啦。数据库里也找不到该文章内容咯。

问题就出在数据库上。

1.修改数据库编码

进入PhpMyadmin,选择您的数据库,操作-----整理----选择utf8mb4_unicode_ci

2.修改数据库表编码

执行以下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;

3.修改根目录config.inc.php

修改 Typecho 配置文件中数据库定义参数中的 charset 为 utf8mb4

$db->addServer(array (
    'host'      =>  localhost,
    'user'      =>  'me',
    'password'  =>  'my_password',
    'charset'   =>  'utf8mb4', //修改这一行
    'port'      =>  3306,
    'database'  =>  '蛤?'
), Typecho_Db::READ | Typecho_Db::WRITE);

设置完后,先发布一篇测试文章试试 emoji 表情有没有用,如果没有显示,就接着排查问题吧。

主题加入友链页面

作为一个博客,哪能没有友链页面,之前 lonesome 主题虽然有这个页面,但是页面是写的死页面,直接使用 html 结果,每添加一个友链就要去改动一次 html 页面,很麻烦。然而我又不喜欢用插件来解决。只好这次用 js 解决。

具体 js 代码如下

友链页面编辑器里按照:头像图片链接,博客名称,博客简介,博客链接 的格式来填写,一行一个。然后 js 再去处理编辑的内容去渲染到页面上来。也算是比较简单的方法了。

var datas =
`<?php
$html = $this->row['text'];
echo $html;
?>`;

datas = datas.split("\n");
for (var i = 0; i < datas.length; i++) {
    datas[i] = datas[i].split(",");
}

function creatArticle(datas) {
    var parent = document.querySelector(".link-list");
    for (var i = 0; i < datas.length; i++) {
        var article = document.createElement("article");
        article.className = "link-item pure-u-1-2 pure-u-sm-1-3 pure-u-lg-1-4";
        parent.appendChild(article);
        var div = document.createElement("div");
        div.className = "link-content";
        article.appendChild(div);
        var img = document.createElement("img");
        img.src = datas[i][0];
        div.appendChild(img);
        var h3 = document.createElement("h3");
        h3.className = "link-name";
        h3.innerHTML = datas[i][1];
        div.appendChild(h3);
        var span = document.createElement("span");
        span.className = "link-description";
        span.innerHTML = datas[i][2];
        div.appendChild(span);
        var a = document.createElement("a");
        a.href = datas[i][3];
        a.setAttribute('target', '_blank');
        a.innerHTML = "访问";
        div.appendChild(a);
    }
}
creatArticle(datas);

上面的 js 代码如果你要拿去使用,得修改里面相关的 dom 。
我直接给我的友链页面的源代码放出来,有需要的可以下载看看。

独立页面设置密码

在网上找到的资料貌似都是要修改一大串代码,感觉很麻烦。直接使用自定义字段不就好了。具体代码如下:

找到 page.php 里的:

<?php $this->content(); ?>

替换为:

<?php if ($_POST['p'] == $this->fields->passwd || $_SESSION['template_p'] == $this->fields->passwd): ?>
    <?php $this->content(); ?>
<?php else : ?>
    <form class="protected page-protected" action="" method="post">
        <p class="word">请输入密码访问</p>
        <p><input name="p" class="text" type="password" required="required"><input class="submit" type="submit" value="提交"></p>
    </form>
<?php endif; ?>

密码填到哪里?直接自定义字段那里。定义一个passwd ,然后紧接着后面填密码。