+++
title =  "Listing techniques"
date = 2020-03-09T14:06:22+09:00
tags = [""]
image = ""
draft = false
weight = "2"
layout = "single"
mktile = false
+++


The [Section page]({{< ref "features/list/section_page" >}}) should include a list of links to the pages within the corresponding section. To realize this, we have prepared three methods of listing pages. 


# Three listing methods

Each method of listing can be used by embedding the corresponding shortcode in the `_index.md` file. See the [official documentation](https://gohugo.io/content-management/shortcodes/) for a general description of shortcodes.


## Text lists

![textlist_fig](/img/screenshots/textlist_fig.png)

This is the most basic method, where the `title` of each page is listed in the order of their `weight`. This can be generated by embedding the shortcode 

```markdown
{{</* textlist */>}}
```

in the `_index.md`.


## Tile lists


![tilelist_fig](/img/screenshots/tilelist_fig.png)


By setting an image for each page, the link to the page could be arranged in a tile-like format consisting of the image and the title as a caption. This will be useful if you have characteristic images for each page. This can be generated by embedding the shortcode

```markdown
{{</* tilelist */>}}
```

in the `_index.md`. Note that the image can be specified by adding the link to the image to the `image` variable in the [front matter]({{< ref "features/contents/front_matter" >}}) of each page (i.e. .md file).


## Post lists



![postlist_fig](/img/screenshots/postlist_fig.png)

This method displays each page in a card-like format with the date and short preview of the content. You can also set tags to the page by writing them explicitly on the [front matter]({{< ref "features/contents/front_matter" >}}). This method can be used similarly as the previous two by embedding the shortcode

```markdown
{{</* postlist */>}}
```

in the `_index.md`, but is also intended to be used as [a method of displaying date-dependent contents]({{< ref "features/list/post_type_content" >}}). Note that the usage for the latter is a little different from the description given here.


