Hide content of blog posts when displaying blog post list in OctoberCMS?

问题

I want to show a list of blog posts, and just display the Title and publish date of the blog posts. However, at the moment, it also displays the content of the blog posts as well.

How can I remove the blog content from being displayed on a blog post list? I don't want to rely on CSS, I'd like to remove it properly from the markup.

回答1:

I managed to figure it out.

Deep within the bowels of the plugin, there's a file called default.htm. It's located here: plugins/rainlab/blog/components/posts.

This is the code in question:

        {% if post.excerpt %}
            <p class="excerpt">{{ post.excerpt }}</p>
        {% else %}
            <div class="content">{{ post.content_html|raw }}</div>
        {% endif %}

For my purposes, I've removed the {% else %} statement for the time being, but I will hope to do something fancy here that will allow the blog post list to be displayed without the content in some places, but then be visible in other places.

回答2:

. Go to your project folder via terminal. For example:

CD /usr/projects/MyOctoberApplication

You can create a new plugin using the terminal

php artisan create:plugin yourname.YourPluginName

Then create a new component for that plugin also using the terminal.

php artisan create:component yourname.YourPluginName BlogPosts

Then go to your newly created plugin. It should be at /plugins/yourname/YourPluginName

In the file Plugin.php there is a method name registerComponents that returns an array. Add your component to the array lik this.

public function registerComponents()
    {
        return [
            'yourname\YourPluginName\components\blogposts' => 'BlogPosts'
        ];
    }

Now you have created your own plugin, registered your first component and now it is time to change the view.

Go to your component folder. It has a class called BlogPosts.php and a folder called blogposts that contains a html file named default.htm.

Open the BlogPosts.php file and in the method component details add your data, as an example:

public function componentDetails()
    {
        return [
            'name'        => 'BlogPosts',
            'description' => 'Extends rainlabs blogpost component'
        ];
    }

I will now assume you are using the Rainlab Blog plugin, but other plugins should work the same way.

Go to /plugins/rainlab/blog/components/Posts.php and copy the method defineProperties, it should look like this:

public function defineProperties()
    {
        return [
            'slug' => [
                'title'       => 'rainlab.blog::lang.settings.post_slug',
                'description' => 'rainlab.blog::lang.settings.post_slug_description',
                'default'     => '{{ :slug }}',
                'type'        => 'string'
            ],
            'categoryPage' => [
                'title'       => 'rainlab.blog::lang.settings.post_category',
                'description' => 'rainlab.blog::lang.settings.post_category_description',
                'type'        => 'dropdown',
                'default'     => 'blog/category',
            ],
        ];
    }

Add this method to your BlogPosts class in components.

One last thing before we are ready to change the view is to make sure the class extends the component of the Rainlab Posts class.

Above the class definition add:

use rainlab\blog\components\posts as Posts;

And extend your class:

class BlogPosts extends Posts

Now you have created a component that extends another one and the reason you do it this way (or done in other ways) is that if you change the rainlab plugin itself, the changes will be undone when you update the plugin.

Now you can update the plugin and still have your changes stay the same.

Go to blogposts and open default.htm

It should be empty or contain some simple markup about the component. Delete the markup.

If you want to only show blog title and dates it could look something like this:

Im using twitter bootstrap classes as an example for the css

{% set posts = __SELF__.posts %}
    <!-- The above code sets the collection to posts -->
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-8">
                <ul class="post-list list-unstyled">
                    {% for post in posts %}

                    <!-- For each post in posts we want to do something. Print our the data probably :) -->

                    <li>
                        <h3 class="blog-title"><a href="{{ post.url }}">{{ post.title }}</a></h3>
                        <!-- Posting blog title and the url -->

                        <p class="info">
                            Posted
                            {% if post.categories.count %} in {% endif %}
                            {% for category in post.categories %}
                            <a href="{{ category.url }}">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
                            {% endfor %}
                            on {{ post.published_at|date('M d, Y') }}

<!-- The above if you are using categories -->
                        </p>
                    </li>

    {% else %}
                    <li class="no-data">{{ noPostsMessage }}</li>
                    {% endfor %}
                </ul>
    <!-- Your pagination -->
     {% if posts.lastPage > 1 %}
                <ul class="pagination">
                    {% if posts.currentPage > 1 %}
                    <li><a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}">&larr; Prev</a></li>
                    {% endif %}

                    {% for page in 1..posts.lastPage %}
                    <li class="{{ posts.currentPage == page ? 'active' : null }}">
                        <a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}">{{ page }}</a>
                    </li>
                    {% endfor %}
                    {% if posts.lastPage > posts.currentPage %}
                    <li><a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}">Next &rarr;</a></li>
                    {% endif %}
                </ul>
                {% endif %}
            </div>
        </div>
    </div>

This example prints the article in an unstyled list that shows the title, category, author and date.

Now go to your cms, and choose the page you want to add this component. Choose BlogPosts component and add it to your page.

Taadaa, you are done! :)

来源：https://stackoverflow.com/questions/31804045/hide-content-of-blog-posts-when-displaying-blog-post-list-in-octobercms

标签

octobercms