typecho之pinghsu主题改造点滴记录
in DIY改造之旅 with 0 comment

typecho之pinghsu主题改造点滴记录

in DIY改造之旅 with 0 comment

1.导航栏中题目大改造

(1)无法同时设置标题和logo

主题head.php文件位置

...\wwwroot\default\usr\themes\pinghsu\header.php      

修改head.php文件

主题head顶部调用了2个class,一个是div调用的“navbar-container",一个是a标签的文字调用的是"navbar-logo",a标签里嵌入的img调用的是“navbar-logo img”

 <div class="navbar-container">
        <a href="<?php $this->options->siteUrl(); ?>" class="navbar-logo">
            <?php if($this->options->logoUrl): ?>
            <img src="<?php $this->options->logoUrl();?>" alt="<?php $this->options->title() ?>" />
            <?php else : ?>
            <?php $this->options->title() ?>
            <?php endif; ?>
        </a>

想要修改typecho主题将标题和logo同时显示出来就要将其中的条件语句注释掉,即把if,else和endif都注释掉,如下

<div class="navbar-container">

    <a href="<?php $this->options->siteUrl(); ?>" class="navbar-logo">
        <?php # if($this->options->logoUrl): ?>
        <img src="<?php $this->options->logoUrl();?>" alt="<?php $this->options->title() ?>" />
        <?php # else : ?>
        <?php $this->options->title() ?>
        <?php # endif; ?>
    </a>

(2)阴影样式标题修改

CSS样式文件位置

 ...\wwwroot\default\usr\themes\pinghsu\style.min.css

修改CSS文件

.navbar-logo{color:white;font-size:25px;line-height:25px;position:absolute;top:50%;left:0;display:block;width:auto;max-width:50%;height:25px;margin-top:-20px;margin-left:25px;text-decoration:none;font-family:"华文彩云";text-shadow:2px 2px  6px #444, 2px 2px 6px #777, 2px 2px 6px #aaa, 2px 2px 8px #ccc}
.navbar-logo img{width:auto;height:25px;outline:0;margin-top:-5px;}.navbar-menu{z-index:10;display:inline-block;width:auto;padding-right:5px}

其中做到白色阴影效果的关键css样式为color:white;text-shadow:2px 2px 6px #444, 2px 2px 6px #777, 2px 2px 6px #aaa, 2px 2px 8px #ccc,其他包括大小和颜色在内的样式可以自行根据需求修改

效果图如下图1

2.搜索页的建立和隐藏

(1)新建页面

管理--独立页面--新增

(2)选择模板Template Page of Search

自定义模板(右侧)选择模板Template Page of Search

(3)添加你自己想说的话

类似于文章编辑界面,在文本编辑器中输入你想说的话即可
如我写的是:

The following tabs can help you!
这里是帮助你的搜索页!

(4)设置搜索页隐藏属性

高级选项--公开度--隐藏

(5)添加自定义字段archive(可有可无)

添加自定义字段archive,这里是直接沿用了下面的maemo大佬的博客内容,不过我查了一下自定义字段archive的作用后认为这个字段可加可不加,起到的作用应该是设置页面最大显示信息条数为12,多于则自动翻页。
以下是从 ...\wwwroot\default\usr\themes\pinghsu\functions.php查到的代码

function themeInit($archive){
    Helper::options()->commentsMaxNestingLevels = 999;
    if ($archive->is('archive')) {
        $archive->parameter->pageSize = 12;
    }
}

(6)设置搜索页

设置方式:

复制你的搜索页的访问地址,不要有空格,记得带上http://或https://

到外观设置那,在搜索页设置的输入框内,复制访问地址

效果图如下图2

3.使得rss正常工作

最新的typecho已经内置了feedURL()接口,但是主题没有对此进行适配,需要手动修改。
图3


在设置-控制台-外观-编辑当前外观-footer.php中,按Command+F搜索关键词rss,找到语句,并将

siteUrl(); ?>feed/

替换为

feedUrl(); ?>

 <a class="social rss" target="blank" href="<?php $this->options->siteUrl(); ?>feed/">RSS</a> 
 <a class="social rss" target="blank" href="<?php $this->options->feedUrl(); ?>">RSS</a> 

4.文章封面的设立

(这个不属于改造的范畴,但是刚刚使用的时候不知道怎么设立封面很尴尬——涉及知识点自定义字段的使用)
以下两段代码均来自...\wwwroot\default\usr\themes\pinghsu\functions.php,大致意思即thumb为封面字段,不设置则使用默认地址

$default_thumb = new Typecho_Widget_Helper_Form_Element_Text('default_thumb', NULL, '', _t('默认缩略图'),_t('文章没有图片时的默认缩略图,留空则无,一般为http://www.yourblog.com/image.png'));

function showThumb($obj,$size=null,$link=false){
    preg_match_all( "/<[img|IMG].*?src=[\'|\"](.*?)[\'|\"].*?[\/]?>/", $obj->content, $matches );
    $thumb = '';
    $options = Typecho_Widget::widget('Widget_Options');
    $attach = $obj->attachments(1)->attachment;
    if (isset($attach->isImage) && $attach->isImage == 1){
        $thumb = $attach->url;
        if(!empty($options->src_add) && !empty($options->cdn_add)){
            $thumb = str_ireplace($options->src_add,$options->cdn_add,$thumb);
        }
    }elseif(isset($matches[1][0])){
        $thumb = $matches[1][0];
        if(!empty($options->src_add) && !empty($options->cdn_add)){
            $thumb = str_ireplace($options->src_add,$options->cdn_add,$thumb);
        }
    }
    if(empty($thumb) && empty($options->default_thumb)){
        return '';
    }else{
        $thumb = empty($thumb) ? $options->default_thumb : $thumb;
    }
    if($link){
        return $thumb;
    }
}

即想要设置文章封面即设置thumb字段的数值为对应图片的url地址即可

5.运行天数的设立

在本站的左下方可以看到运行xx天的字样

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

<p>&copy; <?php echo date('Y'); ?> <a href="<?php $this->options->siteUrl(); ?>"><?php $this->options->title(); ?></a></p>

然后在这一行代码的上方插入如下代码:

<script>
var s1 = '2021-2-27';//设置为你的建站时间
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>

在后台修改然后直接保存,刷新即可见效。
效果图如下图4

6.登录限制插件-LoginLimit

本节同基本摘自maemo大佬的博客

登录限制插件-LoginLimit

为了防止我们的管理员账号密码被暴力破解,我们需要限制在一定时间段内输错密码的次数。

有一个非常有用的插件:hongweipeng/LoginLimit_for_Typecho

下载插件

点开链接,从Github下载它的ZIP包,我们会得到一个名字带有-master

的文件夹。文件夹里面有个子文件夹叫做LoginLimit,这就是插件本体了。

LoginLimit文件夹上传至Typecho博客目录/usr/plugins里面。

修改代码

编辑var/Widget/User.php文件约第117行,将下列代码中的注释内容注释掉。

public function login($name, $password, $temporarily = false, $expire = 0)
{

//插件接口
$result = $this->pluginHandle()->trigger($loginPluggable)->login($name, $password, $temporarily, $expire);

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

启用插件

修改成功后,访问博客后台插件管理面板启用插件。
图6
可以在设置里面设置半小时允许出错的次数。
设置完成后,你可以登出账户,重新登录,如果输入一个错误的密码,它会提示你“无效的账号密码,您还可以尝试xx次”。
图8
这样子,博客的安全性就有所上升了。

7.评论区的默认文字设立和强制性输入解除

主题comments.php文件位置

...\wwwroot\default\usr\themes\pinghsu\comments.php    

搜索comment-container,即可发现对应设置评论区的代码,然后进行你的修改吧,我的修改如下:
图6
将第一个span内容修改为:留下jio印
将第一个input内容修改为:呢称(敢问阁下尊姓大名)
将第二个input内容修改为:Email (如果想收到回复的通知~)
将第三个input内容修改为:你的站点 (奇怪的小伙伴增加了~(^▽^))"
将第一个button内容修改为:这里是提交按钮哟~
同时将邮箱和网址设置为非必填属性
图9

8.
以上第2,3,4,5,6均来源于maemo大佬的博客,即转载自https://www.maemo.cc/2017/12/23/extend-typecho-site.html#directory03524971246665422624,且经过试用均可落实

留下jio印