dede list col

Of course! The dede:list tag in DedeCMS (织梦CMS) is one of the most frequently used tags for displaying lists of articles, products, or other content. The col attribute is a crucial parameter for controlling the layout of this list.

Here's a detailed breakdown of what dede:list col does, how to use it, and common examples.

What is dede:list?

dede:list is a loop tag used within a channel template (like list_article.htm or list_product.htm) to fetch and display a list of items from a specific model (e.g., articles, products).

What does the col attribute do?

The col attribute specifies the number of columns you want the list items to be displayed in.

When you use col="N", DedeCMS will:

1. Fetch the specified number of articles (controlled by the row attribute).
2. Arrange these articles into a grid with N columns.
3. The layout is typically achieved using CSS to float the list items (<li>).

Key takeaway: col controls the horizontal layout, while row (e.g., row="10") controls the total number of items fetched.

Basic Syntax

The tag is used inside a <ul> list structure.

<ul>
    {dede:list col='2' row='10'}
    <li>
        <a href='[field:arcurl/]'>[field:title/]</a>
        <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
    </li>
    {/dede:list}
</ul>

Breakdown of the Example

• {dede:list ...}: The opening tag for the list loop.
• col='2': This is the key attribute. It tells DedeCMS to display the list items in 2 columns.
• row='10': This tells DedeCMS to fetch 10 articles in total.
• <li>: Each iteration of the loop creates a new <li> (list item) element. DedeCMS will automatically apply CSS classes to these <li> elements to make them float side-by-side.
• [field:arcurl/]: A field tag that outputs the full URL of the article.
• [field:title/]: A field tag that outputs the title of the article.
• [field:pubdate ...]: A field tag that outputs the publication date, formatted by the MyDate function.
• {/dede:list}: The closing tag for the loop.

How to Style the Multi-Column Layout

The col attribute alone is not enough for a visual layout. It provides the structure, but you need CSS to make it look like a proper grid. DedeCMS automatically adds a CSS class to the <li> elements to help with styling.

By default, DedeCMS adds the class **listitem** to each <li>.

Example CSS for a 2-column layout:

Let's use the HTML example above. You would add this CSS to your stylesheet (e.g., style.css or within the <style> tag in your template's head section).

/* Basic styles for the list container */
ul {
    list-style: none; /* Removes the default bullet points */
    padding: 0;
    margin: 0;
    /* This is crucial for the layout to work correctly */
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
}
/* Style for each list item */
.listitem {
    /* Use flex-basis to control the width of each column */
    flex-basis: 48%; /* Slightly less than 50% to account for margins */
    margin: 1%;      /* Adds a small gap between columns */
    box-sizing: border-box; /* Ensures padding doesn't affect the total width */
    /* Optional styling for better appearance */
    border: 1px solid #eee;
    padding: 10px;
}
/* Style for the link inside the list item */
.listitem a {
    display: block; /* Makes the link fill the entire list item */
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}
/* Style for the date span */
.listitem span {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}

Explanation of the CSS:

• ul { display: flex; flex-wrap: wrap; }: This is a modern and flexible way to create the multi-column layout. It turns the <ul> into a flex container, allowing its direct children (<li>) to be laid out in a row and wrap to the next line.
• .listitem { flex-basis: 48%; margin: 1%; }: This tells each list item to take up roughly 48% of the container's width, with a 1% margin on all sides. This creates a clean gap between the two columns.
• box-sizing: border-box;: This is a best practice that ensures the padding and border are included within the element's total width and height, preventing layout issues.

Practical Examples

Example 1: 3-Column Article List

HTML:

<div class="article-list-3col">
    {dede:list col='3' row='12'}
    <div class="article-item">
        <a href="[field:arcurl/]">
            <h3>[field:title/]</h3>
            <p>[field:description function="cn_substr(@me, 100)"/]...</p>
        </a>
    </div>
    {/dede:list}
</div>

CSS:

.article-list-3col {
    display: flex;
    flex-wrap: wrap;
}
.article-item {
    flex-basis: 31.33%; /* (100% - 3*2%) / 3 */
    margin: 1%;
    border: 1px solid #ddd;
    padding: 15px;
    box-sizing: border-box;
}
.article-item h3 {
    margin-top: 0;
}
.article-item a {
    text-decoration: none;
    color: #333;
}

Example 2: 4-Column Product List

HTML:

<div class="product-grid">
    {dede:list col='4' row='8'}
    <div class="product-card">
        <img src="[field:litpic/]" alt="[field:title/]">
        <h4><a href="[field:arcurl/]">[field:title/]</a></h4>
        <p class="price">¥[field:price/]</p>
    </div>
    {/dede:list}
</div>

CSS:

.product-grid {
    display: flex;
    flex-wrap: wrap;
}
.product-card {
    flex-basis: 23%; /* (100% - 4*1%) / 4 */
    margin: 0.5%;
    text-align: center;
}
.product-card img {
    max-width: 100%;
    height: auto;
    display: block;
}

Important Considerations

1. Responsiveness: The fixed-width layouts above are not responsive. For a modern website, you should use media queries to adjust the number of columns based on screen size.

   /* For screens smaller than 768px (tablets and mobiles) */
   @media (max-width: 768px) {
       .listitem {
           flex-basis: 100%; /* Force a single column */
           margin-bottom: 10px;
       }
   }

2. col vs. row: Don't confuse them.

   • col: Columns (how many items per row).
   • row: Rows (how many items in total).

3. Performance: Fetching a large number of items with a high row value can slow down your page. Use pagination ({dede:pagelist}) to load content in smaller chunks.