Vinking

Currently, my blog homepage has two different types of content: regular articles and "Say Something." "Say Something" can effectively handle daily complaints or things that are unnecessary too lazy to write as articles. Next, I will take the Cuteen theme as an example to show you how to add your own "Say Something" to your theme.

You just completed a short article, but its length and type seem different from the articles you have written before. This article is more like a post on social media rather than a traditional article. So you want to add a new type to the homepage of your blog to display this unique article. You sorted out your thoughts and realized that there are only two things to do: how to let Typecho know what this newly completed article is? and how to render it differently based on the article type? Let's get started.

Let Typecho know what this newly completed article is#

Fortunately, Typecho provides this functionality, called custom fields.

Custom Fields#

In Typecho, custom fields are an interface left for users to customize by the official team. By selecting/filling in the corresponding information on the article writing page, Typecho can determine how to handle certain aspects of this article based on that information.

You think this feature is tailor-made for your idea above; you just need to choose whether it's an article or a post when publishing the article, and Typecho will know how to render it.

After a round of searching in the theme folder, you finally found the themeFields function in the Fields.php file under the core folder, this function can add custom fields to articles.

You made the following modifications to the function:

/* ... */

function themeFields(Typecho\Widget\Helper\Layout $layout)
{
    $excerpt = new Typecho\Widget\Helper\Form\Element\Textarea('excerpt', null, null, 'Article Summary', 'Enter a custom summary. Leave blank to automatically extract from the article.');
    $layout->addItem($excerpt);
    $imgst = new Typecho\Widget\Helper\Form\Element\Text('imgst', NULL, NULL, _t('Article Thumbnail'), _t('Enter an image URL here to add a picture to the article list'));
    $layout->addItem($imgst);
    $catalog = new Typecho\Widget\Helper\Form\Element\Radio(
        'catalog',
        array(
            true => _t('Enable'),
            false => _t('Disable')
        ),
        false,
        _t('Article Directory'),
        _t('Disabled by default, enabling will display the "Article Directory" in the article (automatically matches H1~H6 tags)')
    );
    $layout->addItem($catalog);

    /* Your code above may differ from mine, do not modify the above code, append the code below at the end of the function */
    $isSpeak=new Typecho_Widget_Helper_Form_Element_Select('isSpeak',['0'=>'Dame','1'=>'Yes'],'0','Is it a post');
    $layout->addItem($isSpeak);
}

The Typecho_Widget_Helper_Form_Element_Select class provides a method to create a dropdown selection box. Here, a dropdown selection field named $isSpeak is created with options Dame and Yes, with the initial value set to 0, meaning Dame is selected by default, and this field will be displayed in the backend editor's custom fields with the name Is it a post.

After adding it, you can see the following custom field in the backend editor:

At this point, you have selected "Yes" for this article. After publishing, Typecho will know that this article should be a post.

How to render differently based on the article type?#

Next, you need to modify the homepage code to render it differently based on the field you just defined. You open index.php and see a piece of code like this:

<?php while ($this->next()): ?>
    <?= Context::IndexList($this) ?>
<?php endwhile; ?>

This is a piece of code used to loop through and display the article list, which indicates that calling the Context class's IndexList method will return a structure containing the information of the current loop article. The Context class is located in the core folder under Context.php. You need to modify this IndexList function to add an if statement to check if it is a post type article:

public static function IndexList($ctx): string
{
    if ($ctx->fields->isSpeak === '1') {
        // Post type, you can modify the structure yourself
        $str = "
        <article class='article". ($ctx->sequence % 2 == 0 ? ' flex-row-reverse ': ' ') ."speak'>
            <a style='width:100%' href='" . $ctx->permalink . "'>
                <div class='speakContent'>
                    <div class='speakNav'>📖 Say Something</div>
                    <div class='speakDesc'>" . Context::ArticleExcerpt(1000 , $ctx) ."</div>
                </div>
            </a>
        </article>";
    }else if ($ctx->fields->isSpeak === '0' || $ctx->fields->isSpeak === null){
          # Wrap the original return $str; code here:
          # $img = self::ImageEcho($ctx);
          # ...
          # $str .= '<a class="article-description" href = "' . $ctx->permalink . '" > ' . Context::ArticleExcerpt(100, $ctx) . '</a ></div ></article > ';
    }
    return $str;
}

Here, Context::ArticleExcerpt(1000 , $ctx) is a method from the Cuteen theme that limits the output to a maximum of 1000 characters on the homepage to prevent it from being too long and unattractive. You can modify this value according to your needs.

Can't find while ($this->next()) [Taking Sunny theme as an example]#

If you can't find while ($this->next()) in your theme's index.php, you can try opening F12 to locate the element that wraps the articles, which is <div class="postlist_out ">, and then search for this class name postlist_out in index.php. If you can't find it, continue to find the parent element of this element, which is <main class="main_body">, and search in index.php, and so on.

Here, searching for main_body successfully found the file article.php that outputs the article list.

Then enter article.php, search for while ($this->next()), and you can find the article structure:

After saving, you will have your own "Say Something." Of course, the current "Say Something" does not have corresponding CSS, so you will need to write the corresponding CSS rules yourself, which will not be covered here.

This article is synchronized and updated to xLog by Mix Space. The original link is https://www.vinking.top/posts/codes/typecho-custom-post-type-tutorial