Typecho实现相册.书单页面自定义

前言

这两天终于把相册、书单页完善了一下,之前一直都是用独立页面来实现,这样就不便于管理内容,相册还好,书单的话,要想添加书本信息,只能进入服务器源码文件进行添加,这就造成了很大的不便,于是趁着有时间折腾,就完善了一下,完善之后,相册和书单分别为一个分类,相册下面的每一篇文章就是一个单独的相册,书单下面的每一篇文章就是一本书,还加了好句摘录(评论而已),首页输出的文章样式也不一样。
下面是实现过程:

新建分类

主题目录下新建相册、书单分类自定义文件
创建一个category文件夹,文件夹下分别创建:photos.php、books.php(文件名为分类的缩略名)
文件中分别写入判断代码:

<?php if ($this->is('category', 'photos')): ?>//photos.php
<?php if ($this->is('category', 'books')): ?>//books.php

判断代码下面就是输出分类下的每一篇文章,可自定义样式。

添加自定义字段

找到 functions.php 文件
输入后台添加文章时的自定义字段

function themeFields($layout) {
    $article_type= new Typecho_Widget_Helper_Form_Element_Radio('article_type',array('0' => _t('文章'),'photos' => _t('相册'),'books' => _t('书单')),'0',_t('文章类型'),_t("选择文章类型首页输出"));
    $layout->addItem($article_type);

    $photos_name = new Typecho_Widget_Helper_Form_Element_Text('photos_name', NULL, NULL, _t('相册名称'), _t('输入相册的缩略名'));
    $layout->addItem($photos_name);/** 自定义每一个相册的缩略名 */
    $photos_excerpt = new Typecho_Widget_Helper_Form_Element_Text('photos_excerpt', NULL, NULL, _t('相册介绍'), _t('输入相册的介绍'));
    $layout->addItem($photos_excerpt);/** 输出相册介绍 */

    $books_author = new Typecho_Widget_Helper_Form_Element_Text('books_author', NULL, NULL, _t('书的作者'), _t('输入书的作者'));
    $layout->addItem($books_author);/** 输出书的作者 */
    $books_time = new Typecho_Widget_Helper_Form_Element_Text('books_time', NULL, NULL, _t('书的出版时间'), _t('输入书的出版时间'));
    $layout->addItem($books_time);/** 输出书的出版时间 */
    $books_excerpt = new Typecho_Widget_Helper_Form_Element_Text('books_excerpt', NULL, NULL, _t('书的介绍'), _t('输入书的介绍'));
    $layout->addItem($books_excerpt);/** 输出书的介绍 */
    $books_reading = new Typecho_Widget_Helper_Form_Element_Text('books_reading', NULL, NULL, _t('阅读进度'), _t('阅读进度'));
    $layout->addItem($books_reading);/** 输出阅读进度 */
}

通过以上代码可整理出各个自定义字段为:

article_type//文章类型自定义
photos_name//文章缩略名自定义
books_time//书的出版时间
books_excerpt//书的介绍
books_reading//阅读进度

这些自定义字段将会在后台文章编辑页面展示:

在你所需要展示的地方调用即可展示,调用代码为:

<?php $this->fields->字段缩略名(); ?>

自定义首页文章列表样式

接下来就可以通过上面添加好的自定义字段进行自定义首页文章样式
找到index.php
通过以下代码判断而进行输出相应的样式:

<?php while($this->next()): ?>
<?php if($this->fields->article_type == "photos") { ?><!-- 相册样式 -->
这里写你自定义相册的样式
<?php } elseif ($this->fields->article_type == "books") { ?><!-- 书单样式 -->
这里写你自定义书单的样式
<?php } else {?><!-- 默认样式 -->
这里写你默认文章的样式
<?php }?>
<?php endwhile; ?>

自定义文章内容样式

最后就可以自定义文章内容样式了
找到post.php
通过以下代码判断而进行输出相应的样式:

<?php if($this->category == "photos"): ?> <!-- 相册样式 -->
这里写你自定义相册内容的样式
<?php elseif($this->category == "books"): ?><!-- 书单样式 -->
这里写你自定义书单内容的样式
<?php else: ?><!-- 默认样式 -->
这里写你默认文章内容的样式
<?php endif; ?>

End

折腾完毕~

Comments ( 33 评论)

wave
  1. 晚风

    1个月前

    都把自己试傻了

    Windows 10 · QQ Browser
    1. 晚风

      1个月前

      @晚风 ,我按照你文章上面的样子,只是把相册样式去掉。把相册样式改成了书单样式后<?php else: ?>开始写post原来的样子再以<?php endif; ?>结束。原来的post样式显示出来了但是书单样式没有显示出来

      Windows 10 · QQ Browser
  2. 北枫

    1个月前

    很好,和没说一样,水文无疑。呵tui。

    Windows 10 · Google Chrome
    1. 若志奕鑫 博主

      1个月前

      @北枫

      Windows 10 · Google Chrome
  3. Meteor

    2个月前

    这不给个源码研究研究?

    Windows 10 · Google Chrome
    1. 若志奕鑫 博主

      2个月前

      @Meteor ,??????????

      Windows 10 · Google Chrome
  4. 浅小沫

    2个月前

    我整不懂typecho的插件和主题的机制。  ̄﹃ ̄

    Android · Google Chrome
    1. 若志奕鑫 博主

      2个月前

      @浅小沫

      Windows 10 · Google Chrome
      1. 浅小沫

        1个月前

        @若志奕鑫 ,我也准备开发typecho主题了,请多多指教。
        在电脑端表情展不开?

        MacOS · Safari
        1. 若志奕鑫 博主

          1个月前

          @浅小沫 ,啥?我的么?

          Android · Google Chrome
          1. 浅小沫

            1个月前

            @若志奕鑫 ,对的,信息填写框也有点小。

            MacOS · Safari
            1. 若志奕鑫 博主

              1个月前

              @浅小沫 ,Macos?我这边还好吧

              Windows 10 · Google Chrome
              1. 浅小沫

                1个月前

                @若志奕鑫 ,是的,chrome正常,表情也可以。

                Windows 10 · Google Chrome
                1. 若志奕鑫 博主

                  1个月前

                  @浅小沫 没有mac不知道啥样

                  Windows 10 · Google Chrome
                  1. 浅小沫

                    1个月前

                    @若志奕鑫 ,这样子的。https://z3.ax1x.com/2021/08/02/fpHzJU.jpg
                    我也准备开发主题了。

                    Windows 10 · Google Chrome
                    1. 若志奕鑫 博主

                      1个月前

                      @浅小沫 期待哦~

                      Windows 10 · Google Chrome
  5. 豆豆

    2个月前

    高产似母猪,厉害 💃🏻

    iPhone · Safari
    1. 若志奕鑫 博主

      2个月前

      @豆豆 ,骂谁呢

      Android · Google Chrome
      1. 豆豆

        2个月前

        @若志奕鑫 ,哈哈哈哈,文章高产

        iPhone · Safari
        1. 若志奕鑫 博主

          2个月前

          @豆豆 后面

          Android · Google Chrome
  6. xs

    2个月前

    ∠( ᐛ 」∠)_ ∠( ᐛ 」∠)_

    Windows 10 · Google Chrome
    1. 若志奕鑫 博主

      2个月前

      @xs ,欢迎带佬

      Windows 10 · Google Chrome
  7. BigHuaji

    2个月前

    这个鼠标样式不好看 ,看的眼睛疼

    Windows 7 · FireFox
    1. 若志奕鑫 博主

      2个月前

      @BigHuaji 好康啊

      Windows 10 · Google Chrome
      1. BigHuaji

        2个月前

        @若志奕鑫 ,如果网慢的话,容易感觉电脑坏了 (/ω\)

        Windows 7 · FireFox
        1. 若志奕鑫 博主

          2个月前

          @BigHuaji ,哈哈哈

          Windows 10 · Google Chrome
          1. BigHuaji

            2个月前

            @若志奕鑫 ,话说能换个友联吗

            Windows 7 · FireFox
            1. 若志奕鑫 博主

              2个月前

              @BigHuaji 暂时不换了,友链有点多了

              Windows 10 · Google Chrome
              1. BigHuaji

                2个月前

                @若志奕鑫 那好吧

                Windows 7 · FireFox
  8. 清墨的橘

    2个月前

    还是来一份源码实在

    Windows 7 · Google Chrome
    1. 若志奕鑫 博主

      2个月前

      @清墨的橘

      Windows 10 · Google Chrome
  9. 呆哥

    2个月前

    不想搞——

    Android · QQ Browser
    1. 若志奕鑫 博主

      2个月前

      @呆哥

      Windows 10 · Google Chrome
悄悄话

搜索