原
它多用于一个HTML片段的。例如我写的一个BBS项目中。
Django模版语言inclusion_tag的用法。
一个博主的主页面的左侧栏和查看博主某篇文章的页面的左栅栏的一样的。为了不用重复写同样的代码。且提高页面的扩展性。我的bbs的左侧栏就用了inclusion_tag来实现。
首先要在项目的:
在项目blog这个app下面创建一个templatetags文夹。这个文件夹的名字必顺是templatetags来命名的。然后在此文件夹下自定义一个matag.py文件。
-
from django
import template
-
from blog
import models
-
from django.db.models
import Count
-
-
register=template.Library()
-
@register.inclusion_tag('left_tag.html')
-
def left_panel(username):
-
user_obj = models.UserInfo.objects.filter(username=username).first()
-
blog = user_obj.blog
-
# 文章分类
-
category_article_list = models.Category.objects.filter(blog=blog).annotate(num=Count(
'article')).values(
'title',
'num')
-
# 标签分类
-
tag_article_list = models.Tag.objects.filter(blog=blog).annotate(num=Count(
'article')).values(
'title',
'num')
-
# 时间分类auth_group
-
time_archive_list = models.Article.objects.filter(user__username=username).extra(
-
select={
'ym':
'DATE_FORMAT(create_time,"%%Y-%%m")'}
-
).values(
'ym').annotate(num=Count(
'nid')).values(
'ym',
'num')
-
-
return {
-
'username': username,
-
'category_article_list': category_article_list,
-
'tag_article_list': tag_article_list,
-
'time_archive_list': time_archive_list,
-
}
然后写一个left_tag.html代码块。
-
<div
class="panel panel-primary">
-
<div class="panel-heading">
-
<h3 class="panel-title">文章分类</h3>
-
</div>
-
-
<div class="panel-body">
-
<ul class="panel-ul">
-
{% if not category_article_list %}
-
<li>没有此分类</li>
-
{% else %}
-
{% for category_article in category_article_list %}
-
<li><a href="/blog/{{ username }}/category/{{ category_article.title }}">{{ category_article.title }}({{ category_article.num }})</a></li>
-
{% endfor %}
-
{% endif %}
-
</ul>
-
</div>
-
</div>
-
<div class="panel panel-success">
-
<div class="panel-heading">
-
<h3 class="panel-title">标签分类</h3>
-
</div>
-
<div class="panel-body">
-
<ul class="panel_ul">
-
{% if not tag_article_list %}
-
<li>没有此分类</li>
-
{% else %}
-
{% for tag_article in tag_article_list %}
-
<li><a href="/blog/{{ username }}/tag/{{ tag_article.title }}">{{ tag_article.title }}({{ tag_article.num }})</a></li>
-
{% endfor %}
-
{% endif %}
-
</ul>
-
</div>
-
</div>
-
<div class="panel panel-info">
-
<div class="panel-heading">
-
<h3 class="panel-title">时间归档</h3>
-
</div>
-
<div class="panel-body">
-
<ul class="pane_ul">
-
{% if not time_archive_list %}
-
<li>没有此分类</li>
-
{% else %}
-
{% for time_archive in time_archive_list %}
-
<li><a href="/blog/{{ username }}/archive/{{ time_archive.ym }}">{{ time_archive.ym }}({{ time_archive.num }})</a></li>
-
{% endfor %}
-
{% endif %}
-
</ul>
-
</div>
-
</div>
最后就简单了。一些页面在需要用到这个左侧栏的就加上下面的一小段代码就好了。
{% load mytag %} {% left_panel username %}
上面的代码中username是一个参数。
<script>
(function(){
function setArticleH(btnReadmore,posi){
var winH = $(window).height();
var articleBox = $("div.article_content");
var artH = articleBox.height();
if(artH > winH*posi){
articleBox.css({
'height':winH*posi+'px',
'overflow':'hidden'
})
btnReadmore.click(function(){
if(typeof window.localStorage === "object" && typeof window.csdn.anonymousUserLimit === "object"){
if(!window.csdn.anonymousUserLimit.judgment()){
window.csdn.anonymousUserLimit.Jumplogin();
return false;
}else if(!currentUserName){
window.csdn.anonymousUserLimit.updata();
}
}
articleBox.removeAttr("style");
$(this).parent().remove();
})
}else{
btnReadmore.parent().remove();
}
}
var btnReadmore = $("#btn-readmore");
if(btnReadmore.length>0){
if(currentUserName){
setArticleH(btnReadmore,3);
}else{
setArticleH(btnReadmore,1.2);
}
}
})()
</script>
</article>