友人C

typecho文章和首页头图设计
说明 :该代码适用于制作主题的小伙伴,因为后台外观设置中设置了4种头图显示方式。如果是为自己做的主题,可以在此基础...
扫描右侧二维码阅读全文
04
2017/09

typecho文章和首页头图设计

说明 :该代码适用于制作主题的小伙伴,因为后台外观设置中设置了4种头图显示方式。如果是为自己做的主题,可以在此基础上大大减少代码量。

如果仅仅是给自己一个人写主题,可以参考typecho按需求输出缩略图

代码功能

该代码能够实现以下功能:

  1. 首页头图开关关闭的时候,thumb字段为图片地址,仍然能够显示文章头图
  2. 文章头图开关关闭的时候,thumb字段为图片地址,仍然能够显示首页头图
  3. 文章首页头图都关闭的时候,thumb字段为图片地址,此时首页文章头图都能显示
  4. 头图开关开启的时候,thumb字段为no,当前文章将不会显示头图
  5. 头图开关开启时候,可以按照四个选择的顺序选择显示头图

这里,有几个不合理的需求,不再代码中实现,因为以下需求会破坏代码的逻辑性:

  1. 首页文章头图开关都关闭的情况下,thumb字段为图片地址,想只显示当前文章的文章头图,或者只显示当前文章的首页头图
  2. 首页头图开关关闭情况下,想当前文章显示首页头图。

总的来说,后台设置中的头图开关才是权重最高,不能让thumb字段越权操作,否则会带来一些bug,带来的就是某些功能的牺牲。

代码分析

一开始准备写这些逻辑的时候,我画了这样一张大图:

最终的结果就是:自己越来越糊涂了!

然后,调整了一下节点,精简成这样的:

最终的代码就是以第二张图的逻辑写出的代码。

thumb字段的权重最高,即使关闭了显示头图开关,只要thumb字段为图片地址,仍然可以显示出头图(第二点功能)

参考代码

    public static function whenSwitchHeaderImgSrc($widget){
        $options = mget();
        $rand = rand(1,$options->RandomPicAmnt);
        $howToThumb = $options->RandomPicChoice;
        $random = $widget->widget('Widget_Options')->themeUrl . '/img/sj/' . $rand . '.jpg';
        $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i';
        $patternMD = '/\!\[.*?\]\((http(s)?:\/\/.*?(jpg|png))/i';
        $patternMDfoot = '/\[.*?\]:\s*(http(s)?:\/\/.*?(jpg|png))/i';
        // 随机缩略图路径
        //正则匹配 主题目录下的/images/sj/的图片(以数字按顺序命名)
        $attach = $widget->attachments(1)->attachment;//附件中的图片
        $thumbField = $widget->fields->thumb;
        if ($howToThumb == '0'){
            return $random;
        }elseif ($howToThumb == '1' || $howToThumb == '2'){
            if (!empty($thumbField)){
                return $thumbField;
            }elseif (isset($attach->isImage) && $attach->isImage == 1){
                return $attach->url;
            }else{
                if (preg_match_all($pattern, $widget->content, $thumbUrl)){
                    $thumb = $thumbUrl[1][0];
                }elseif (preg_match_all($patternMD, $widget->content, $thumbUrl)){
                    $thumb = $thumbUrl[1][0];
                }elseif (preg_match_all($patternMDfoot, $widget->content, $thumbUrl)){
                    $thumb = $thumbUrl[1][0];
                }else{//文章中没有图片
                    if ($howToThumb == '1'){
                        return '';
                    }else{
                        return $random;
                    }
                }
                return $thumb;
            }
        }elseif ($howToThumb == '3'){
            if (!empty($thumbField)){
                return $thumbField;
            }else{
                return $random;
            }
        }
    }

    //输出头图图片地址
    public static function returnHeaderImgSrc($widget,$select){
        $options = mget();
        $thumbField = $widget->fields->thumb;
        if (strtoupper($thumbField) == "NO"){//thumb 为no 直接不显示头图
            $imgSrc = "";
        }else{//thumb不为no
            if (in_array('NoRandomPic-post',$options->indexsetup) && in_array('NoRandomPic-index',
                    $options->indexsetup)){//全部关闭
                if ($thumbField != ""){
                    $imgSrc = Content::whenSwitchHeaderImgSrc($widget);
                }else{
                    $imgSrc = "";
                }
            }else if (!in_array('NoRandomPic-post',$options->indexsetup) && !in_array('NoRandomPic-index',
                    $options->indexsetup)){//全部开启
                $imgSrc = Content::whenSwitchHeaderImgSrc($widget);
            }else{//一开一闭
                if (in_array('NoRandomPic-post',$options->indexsetup)){//不显示文章头图,显示首页头图
                    if ($select == "post"){
                        $imgSrc = "";
                    }else{
                        $imgSrc = Content::whenSwitchHeaderImgSrc($widget);
                    }
                }else{//不显示首页头图,显示文章页面头图
                    if ($select == "post"){
                        $imgSrc = Content::whenSwitchHeaderImgSrc($widget);
                    }else{
                        $imgSrc = "";
                    }
                }
            }
        }
        return $imgSrc;
    }
最后修改:2018 年 05 月 21 日 03 : 15 PM
如果觉得我的文章对你有用,请随意赞赏

14 条评论

  1. 花壳

    主题的博客随机头图的地址在哪,想修改一下

  2. xing-chuan

    可以, 是我找了很久, 唯一一个比较喜欢的, 本来准备用 hexo 了

  3. 疯疯

    博主头图是自己裁剪好尺寸才上传的吗?因为经常遇到头图里有些想显示的地方被裁剪掉了,不知道需要怎样的尺寸的图片,才能不被裁剪

    1. 友人C
      @疯疯

      后台外观设置——主题增强功能可以关掉默认的8:3裁剪的。我自己的头图都是裁剪好再上传的

  4. tsukasa

    画的图好有美感啊,是用什么软件画的呢OωO

    1. 友人C
      @tsukasa

      mindNode 一个画思维导图的

      1. tsukasa
        @友人C

        谢谢啦,奈何在下用的windows>﹏<

        1. 三胖
          @tsukasa

          windows下可以考虑xmind

  5. 明月学习笔记Blog

    话说handsome有没有考虑啥时候在后台里加入文章内插入广告的计划呀?⌇●﹏●⌇

    1. 友人C
      @明月学习笔记Blog

      文章插入广告的功能...可能会考虑

  6. 小宁博客

    厉害了博主,向大神膜拜⌇●﹏●⌇

  7. 明月学习笔记Blog

    膜拜一下!

发表评论