本来移植的时候确实只花了半天时间,但是后期优化以及调整细节花了不少时间。这篇文章记录下这些坑点,如果对你折腾主题有帮助那也是极好的。
文章内容换行解决
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
,然后紧接着后面填密码。
评论已关闭