Posted by: Max Chen | in Mezzanine | 1 year, 11 months ago |

Mezzanine--顯示加入blog分類底下的文章

功能描述如下: 點擊文章數量按鈕, 可以顯示共有哪一些文章

分析

整個blog list是使用\solid\templates\blog\blog_post_list.html做為顯示 (我是使用solid theme) 點進去後, 最下面會發現有個filter_panel.html, 這就是我們要修改的地方

1.將其原先使用的category content拿掉, 改為引入categorybloglist.html (自行創建)

`{% include "blog/includes/categorybloglist.html" %}`

2.將以下程式碼貼入, categorybloglist.html

```
{% load blog_tags keyword_tags i18n mezzanine_tags%}


{% block blog_categories %}
{% blog_categories as categories %}
{% if categories %}
<h4>{% trans "Categories" %}</h4>
<div class="hline"></div>

{% for category in categories %}
    <p><a href="{% url "blog_post_list_category" category.slug %}"><i class="fa fa-angle-right"></i> {{ category }}</a> <a class="badge badge-theme pull-right" href="#hide" onclick="if(document.getElementById('{{ category }}') .style.display=='none') {document.getElementById('{{ category }}') .style.display=''}else{document.getElementById('{{ category }}') .style.display='none'}" title="" type="button">{{ category.post_count }}</a></p>
    {% block blog_recent_posts %}
    {% blog_recent_posts limit=1000 category=category as recent_posts %}
    {% if recent_posts %}

    <div id="{{ category }}" style="display: none;">
    {% for recent_post in recent_posts %}
    <p>
        <a href="{{ recent_post.get_absolute_url }}">{{ recent_post.title }}</a>
    </p>
    {% endfor %}
    </div>
    {% endif %}
    {% endblock %}

{% endfor %}


{% endif %}
{% endblock %}

```

3.完成

註: 1. 會需要額外引入categorybloglist.html 原因: 我們無法在同一個html內使用相同的block兩次

因為我們需要使用{% block blog_recent_posts %}兩次

此函數在mezzanine\blog\templatetags\blog_tags.py裡面, 可以取得文章列表
![](https://i.imgur.com/QWnLafQ.png)

但由於原本solid\templates\blog\includes\filter_panel.html已經引入一次, 最好的解決辦法就是將其放置另外一個html並include近來.

2.在html內使用template tag varible的方法使用以下即可

 `{{ category }}`

3.在template tag內使用template tag varible的方法

不需使用{{}}, 直接

category 4.展開blog list的方法

```
<a href="#hide" onclick="if(document.getElementById('hide') .style.display=='none') {document.getElementById('hide') .style.display=''}else{document.getElementById('hide') .style.display='none'}" title="" type="button">點我展開／隱藏(方法二)</a>

<div id="hide" style="display: none;">
    哎呀又被發現了啦 (つд⊂)
</div>
```

參考來源: https://stackoverflow.com/questions/9361722/how-to-concisely-write-this-javascript-to-show-hide-a-list-of-elements https://stackoverflow.com/questions/25095974/show-hide-by-div-id https://stackoverflow.com/questions/298772/django-template-variables-and-javascript https://stackoverflow.com/questions/5228717/change-html-with-variables-in-django https://stackoverflow.com/questions/24460384/using-context-variable-as-html-attribute-in-django-template https://reporeporecord.blog.fc2blog.us/blog-entry-10.html https://blog.csdn.net/weixin_42134789/article/details/82772027 https://www.codementor.io/@hiteshgarg14/creating-custom-template-tags-in-django-application-58wvmqm5f https://stackoverflow.com/questions/24451478/django-templatesyntaxerror-invalid-block-tag-trans https://stackoverflow.com/questions/44215817/did-you-forget-to-register-or-load-this-tag-django https://stackoverflow.com/questions/48497062/how-to-insert-multiple-django-blocks-into-one-template https://docs.djangoproject.com/en/2.1/howto/custom-template-tags/

tags: `Mezzanine`

Authors

Max Chen (159)

Feeds

RSS / Atom