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

typecho之pinghsu主题改造点滴记录

in DIY改造之旅 with 0 comment

blog typecho 前端 改造

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，且经过试用均可落实

本文由 javayuan 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Aug 31, 2021 at 10:51 am

← → ↓ ↑
留下jio印