Hướng dẫn build a Blog trong Drupal 8: Using Views

Just when you thought Drupal 8 couldn't get more powerful; I give to you Views in core. Yes, the most installed module in Drupal is now part of core.

>> Giới thiệu the future of decoupled Drupal

>> Code Drop và PreviousNext hợp tác tại Australia

No longer will you have to wait for Views to be upgraded to use the latest version of Drupal. Just install Drupal and start building your custom views page or block.

For people who don't know, Views allows you to list Drupal content. That's a simple explanation, but it doesn't give the module the respect it deserves.

For instance, you could create a page (/latest-reviews) which displays all the latest content by content type and sorted by created date. Using the module, you can query the site's content and display it in a block, table or page just to name a few.

Now that Views is part of core, it's used throughout the administration section. Take for example the Content (admin/content) and People (admin/people) pages. All of these are powered by Views.

In this tutorial, we'll continue building our blog site by adding in a few custom views. We'll create a listing of blog posts for the homepage, a "Recent blog posts" block and we'll enable Archive view which comes with Drupal but it's disabled.

If you're following along make sure you've read and setup the Blog content type which was built in part one of the "Build a Blog in Drupal 8" series.

Create Homepage View

With Views in core any type of listing is now controlled by Views. The default homepage is also a view and it's called Frontpage.

If you want to customize the homepage you have two options: modify the Frontpage view or create your own, let's go with the latter and create our own.

1. Go to Structure, Views and click on "Add new view".

2. Fill out the "Add new view" form, using the values defined in Table 1.0 and click on "Save and edit".

Table 1-0. Create a new view

Option	Value
View name	Homepage
Machine name	homepage
Show	Content type of Blog sorted by Newest first
Create a page	Checked
Display format	Unformatted list of: teasers

Once you're on the Views edit page click on Save.

At this point we have a working page. It lists published blog posts, sorts by created date and it'll paginate after 10 posts.

Now we need to set this page as the homepage.

4. Go to Configuration, "Site information" and add "/homepage" into "Default front page". Make sure you add the forward slash "/".

Now if you go to the homepage you should only see blog posts appear.

Editing Views

You may have noticed that the homepage has a title called "Homepage". Normally it wouldn't have a title, let's remove it.

A view can be edited in two ways. First, by going to Structure, Views or by clicking on the "Edit view" link when you hover over the view.

1. Hover over the view and click on "Edit view".

2. Click on the Homepage link in the Title section, remove it from the Title field in the pop-up and click on "Apply (all displays)". Once complete save the view.

Now the homepage shouldn't have a title.

Enable Archive View

A common component of a blog is an archive view. This is where blog posts are grouped by month. It allows a reader to go back months or years to read older posts.

Drupal 8 comes with a disabled archive view. This consists of a block, which can be added to a sidebar, and a page.

Let's now enable and configure the view.

1. Go to Structure, Views, scroll down to the Disabled section and enable the Archive view.

Once enabled it should appear in the Enabled section.

Now we need to assign the block to a region.

2. Go to Structure and click on "Block layout".

3. Scroll down to "Sidebar first" and click on "Place block".

4. In the modal pop-up, search for Archive and then click on "Place block".

5. Leave the "Configure block" as is and click on "Save block".

Once you're back on the "Block layout" page you should see the block in the region and highlighted green.

Once you're back on the "Block layout" page you should see the Archive block in the region and it'll be highlighted green.

Scroll to the bottom and click on "Save blocks".

Now go to the homepage, you should see the "Monthly archive" block in the left sidebar.

If you click on any of the months, you'll be redirected to a page which only displays blog posts for the specific month.

List Categories

On blogs these days you'll often find a block which lists all the categories with the number of posts within it.

Let's now create this type of block using Views.

1. Go to Structure, Views and click on "Add new view".

2. Fill out the "Add new view" form, using the values defined in Table 1.1 and click on "Save and edit".

Table 1.1. Create a new view

Option	Value
View name	Popular categories
Machine name	popular_categories
Show	Taxonomy terms type of Category sorted by Unsorted
Create a page	Unchecked
Create a block	Checked

Once you're on the Views edit page click on Save.

2. Click on Advanced in the right column and then click on Add in the Relationships section.

3. Select "Content using field_category" and click on "Apply (all displays)".

4. On the next step check "Require this relationship" and click on "Apply (all displays)".

At this point we've created a relationship between the terms and content which uses the Category field we created in an earlier tutorial.

5. Still in the Advanced section, click on "No" next to "Use aggregation" and check Aggregate. Then click on "Apply (all displays)".

In the Preview area you should only see categories which are actually used. Now let's add a count next to each category.

6. Click on Add in the Fields section and select "Content: Node ID".

7. In the next section, select "Count DISTINCT" from "Aggregation type". Then click on "Apply and continue".

8. On the next step, configure the field if you need to, then click "Apply (all displays)".

In the preview section, you should see a count value appear below the category.

Let's change how the categories are outputted so the count appears next to the category. For example, "Drupal (3)".

9. First move the "Content: Node ID" so it appears above "Taxonomy term: Name". Do this by first clicking on the down arrow next to the Add link in the Fields section.

10. In the pop-up, move "Content: Node ID" above "Taxonomy term: Name" and click on "Apply (all displays)".

11. Click on "Taxonomy term: Name" in the Fields section. Then check "Override the output of this field with custom text" in "Rewrite results".

Add the following into the Text field:

{{ name }} ({{ nid }})

If you look in the preview section, you'll see the number of posts next to the category.

Let's now hide the count value that appears above the category.

12. Click on "Content: Node ID" field and check "Exclude from display" and click "Apply (all displays)".

This will hide the field but it won't remove it.

Finally, let's add a sort criteria so it's sorted by number of counts.

13. Click on Add in the "Sort criteria" section.

14. Select "Node ID" and click "Apply (all displays)".

15. Select "Count DISTINCT" from "Aggregation type" and click on "Apply and continue".

16. In the next section, select "Sort descending" and click on "Apply (all displays)".

Now save the whole view.

At this point the view is complete, it took a while, but we're finished. Now we need to add it to the sidebar.

Add View to Sidebar

1. Go to Structure, "Block layout" and click on "Place block" in the "Sidebar first" region.

2. Find "Popular categories" and click on "Place block".

3. Reorder the block so it appears above Search.

Then scroll to the bottom and click on "Save blocks".

4. Now go to the homepage and you should see the block in the left sidebar.

Summary

With Views now in core, standard Drupal 8 is much more useful than any other Drupal release. We were able to create a complex listing with grouping and counts without installing any other module. I'm so happy it's part of core; it makes perfect sense.