自定义模板

自定义模板不仅能显示自定义的内容,还可以通过覆盖默认模板的方式来显示例如:产品、文章,这样在系统中定义好的内容。

替换文章列表模板

文章列表组件的显示模板是Widget.ArticleList.cshtml,创建一个文章列表模板,在替换模板上输入Widget.ArticleList

这样就会替换原来的模板了:

要写好对应的模板,首先要先了解原模板对应的ViewModel的结构,通过查看代码可以方便你了解。

新的模板内容:

{% if this.Model.Articles %}
    <div class="article-list">
        <ul class="media-list">
            {% for item in this.Model.Articles %}
                <li class="media">
                    <div class="media-body">
                        <h4 class="media-heading">
                            <a href="{{this.Model.Widget.DetailPageUrl | replace: "~/", ""}}/post-{{item.ID}}.html">
                                {{item.Title}}
                            </a>
                        </h4>
                        <p class="small text-muted">
                            <span class="author">
                                <i class="glyphicon glyphicon-user"></i>
                                {{item.CreatebyName}}
                            </span>
                            <span class="text-muted publish-date">
                                <i class="glyphicon glyphicon-calendar"></i>
                                {{item.PublishDate}}
                            </span>
                        </p>
                        <p>
                            {{item.Summary}}
                        </p>
                    </div>
                    <div class="media-right">
                        <a href="{{this.Model.Widget.DetailPageUrl | replace: "~/", ""}}/post-{{item.ID}}.html">
                            <img class="media-object" src="{{item.ImageThumbUrl}}" alt="{{item.Title}}">
                        </a>
                    </div>
                </li>
            {% endfor %}           
        </ul>  
    </div>
{% endif %}

<ul class="pagination">
    {% if this.Pagin.PreLink %}    
        <li><a href="{{this.Pagin.PreLink}}">«</a></li>
    {% else %}    
        <li class="disabled"><a href="javascript:void(0)">«</a></li>
    {% endif %}    

    {% if this.Pagin.PageIndex >= 5 %}
        <li>
            <a>...</a>
        </li>
    {% endif %}
    
    {% for item in this.Pagin.PageLinks %}
            <li class="{% if item.IsCurrentPage %}active{% endif %}">
            <a href="{{item.Link}}">{{item.Index}}</a>
        </li>
    {% endfor %}

    {% if this.Pagin.AllPage | minus: this.Pagin.PageIndex > 5 %}
        <li>
            <a>...</a>
        </li>
    {% endif %}   

    {% if this.Pagin.NextLink %}
        <li>
            <a href="{{this.Pagin.NextLink}}">»</a>
        </li>    
    {% else %}    
        <li class="disabled">
            <a href="javascript:void(0)">»</a>
        </li>
    {% endif %}
</ul>

新模板是将图片放到右边显示: