Django博客开发教程:实现标签页面

标签列表是的URL是:网站域名/tag/标签名,标签名是URL里的<tag>传进来的。标签页面和列表页面展现样式是一样的,前面我们也提及过,所以我们直接复制list.html页面,然后更名为tags.html。

视图函数代码:

blog/views.py

def tag(request, tag):
    list = Article.objects.filter(tags__name=tag)#通过文章标签进行查询文章
    remen = Article.objects.filter(tui__id=2)[:6]
    allcategory = Category.objects.all()
    tname = Tag.objects.get(name=tag)#获取当前搜索的标签名
    page = request.GET.get('page')
    tags = Tag.objects.all()
    paginator = Paginator(list, 5)
    try:
        list = paginator.page(page)  # 获取当前页码的记录
    except PageNotAnInteger:
        list = paginator.page(1)  # 如果用户输入的页码不是整数时,显示第1页的内容
    except EmptyPage:
        list = paginator.page(paginator.num_pages)  # 如果用户输入的页数不在系统的页码列表中时,显示最后一页的内容
    return render(request, 'tags.html', locals())

标签列表页的实现,没有什么特别需要留意的地方。和列表页差不多,我直接上代码。打开templates/tags.html页面找到下面位置进行修改。

您的位置:

templates/tags.html

<div class="breadcrumb">您的位置: <a itemprop="breadcrumb" href="{% url 'index' %}">首页</a> » <span
class="current">标签:{{ tname }}</span></div>

获取当前页面查询的标签名:

templates/tags.html

<div class="main-title">
    <h4 class="post-left-title">标签:{{ tname }}</h4>
</div>

显示当前标签下的所有文章:

templates/tags.html

{% for list in list %}
    <div class="article-box clearfix excerpt-1">
        <div class="col-md-4">
            <div class="thumbnail">
                <a href="{% url 'index' %}show-{{ list.id }}.html" title="{{ list.title }}">
                    <img src="{% url 'index' %}media/{{ list.img }}"
                         srcset="{% url 'index' %}media/{{ list.img }}"
                         alt="{{ list.title }}" class="wp-post-image" width="240" height="160"/></a>
            </div>
        </div>
        <div class="col-md-8">
            <h2><a href="{% url 'index' %}show-{{ list.id }}.html" target="_blank"
                   title="{{ list.title }}">{{ list.title }}</a></h2>
            <p class="txtcont hidden-xs"><a href="{% url 'index' %}show-{{ list.id }}.html"
                                            target="_blank"
                                            title="{{ list.title }}">{{ list.excerpt }}</a></p>
            <div class="meta"><span class="label label-info"><a
                    href="{% url 'index' %}list-{{ list.category_id }}.html">{{ list.category.name }}</a></span>
                <time class="item"><i
                        class="fa fa-clock-o"></i>{{ list.created_time|date:"Y年m月d日" }}
                </time>
            </div>
        </div>
    </div>
{% endfor %}

列表分页:

templates/tags.html

<div class="pagination">
    <ul>
        {% if list.has_previous %}
        <li class="prev-page"><a href="?page={{ list.previous_page_number }}">上一页</a></li>
        {% else %}
         <li class="prev-page"></li>
        {% endif %}


            {% for num in list.paginator.page_range %}
                {% if num %}
                    {% ifequal num list.number %}
                        <li class="active"><span>{{ num }}</span></li>
                    {% else %}
                        <li><a href="?page={{ num }}">{{ num }}</a></li>
                    {% endifequal %}
                {% else %}
                    <li class="disabled"><span>...</span></li>
                {% endif %}
            {% endfor %}


            {% if list.has_next %}
                <li class="next-page"><a href="?page={{ list.next_page_number }}">下一页</a></li>
            {% else %}
                <li class="prev-page"></li>
            {% endif %}
    </ul>
</div>

标签页面实现完毕!

文章评论 3

  • 现一个问题,完成后的Demo中,如果新增的标签中带有 “/”,在右侧的标签栏显示没有问题,但是一点击该标签就会报错、

  • 少了一个tags.html页面

  • 我们需要实现六个页面的展现。网站首页、文章分类列表页、搜索列表页、标签列表页、文章内容展示页、单页面(联系我们)。其中,文章分类列表页、搜索列表页、标签列表页这三个页面展示结构都一样我们只需要一个模板页面即可。所以说我们真正需要实现的只有4个页面,这四个页面分别对应前端给我们模板里的首页(index.html)、列表页(list.html)、内容页(show.html)、单页(page.html)。了解我们需要做的工作之后,我们开始做好准备工作。