点点实现文章分类的方法
貌似解释的还不是很好,需要重复多看几遍才能理解哦@
这个功能实现的文章分类,虽不是官方的功能,但是也是相当的强大了,有点传统博的感觉咯。多谢福旦的分享。
鉴于本博标签有点乱,下次再用这个方法分下类别吧!
PS:如果对此法不懂,可用另一种方法,见点点中标签的输出形式(可用于做文章的目录)
用了点点有一段时间了,在点点模板的交流群里,经常有问人点点怎么实现文章分类,效果类似于传统博客。当然,如果还不理解,可以看我的博客导航栏,如下图(1):
当点击这几个文章分类标签时,会进入相应的分类标签下,展示当前分类下的所有文章,如图(2):
当点击某篇文章进入问也页面时,同样可以看到文章分类信息,再如图(3):
效果就是这样的,有很多点子说,这样做没有任何意义,如果有意义的话,官方就提供这中功能了……其实,有没有意义,还是要看博主自己个爱好,比如我就喜欢这样的方式,在官方有限的资源下,实现这中功能对来我就是有意义的。而且,官方并不是没有提供此功能,而是此功能相比教于传统博客,发生了很大的变化——那就是"标签"和"标签页"。
我们得承认,在点点平台的开放基础之上,合理变通的利用标签和页面,可以实现很多东西,今天就这此给大家一个例子,就是文章的标题,其实实现很简单,高手们可以飘过了。当然,如果留下来指导一二,那在下也是感激再三!
在点点发布文章的时候,大家都会填写标签。当很多文章具有相同的标签时,这个标签就可以作为这些文章的分类。在模板中渲染文章的时候,可以通过一些判断,将这个标签特殊表现出来,判断逻辑很简单,就不在此赘述了。
剩下的,就是新建一些标签页,渲染为导航链接,这样就基本实现了……当然,在渲染页面为导航栏的时候,注意别把不需要作为导航的页面也渲染出来了!
如果一点都不明白怎么判断,又或者不想在模板中在写大段的代码,那么你可以参考笔者定义的模块。
<script type="server/javascript">
var esx=require('dd://assets/2012/0920/144938z3qD/module.js');
esx.Eax.appendData('~');
</script>将模块注册到模板的开头,其中
esx.Eax.appendData('~');
中的~号可以替换为任意字符,后面会介绍到它的作用。注册完模块以后,通过
console.log(dian.data.posts);
会发现多了一些内容,如下图:如果一切都没有问题,你应该能看到_category属性和_title属性。如果你看到_category是{name:'Uncategorized',url:'#'},也没有关系,不是模块注册出了什么问题,而是你还没有创建标签页面。至于_title属性,有兴趣的话知道的话,请在留言中说一声,这个属性于本文无关,这里不介绍了。
这个时候,返回自定义主页,新建一个标签页面,如下图,我这里创建的是一个“技术人生”的标签页:
确定以后,通过console.log(dian.data.posts);查看数据结构,就会出现正确的_category属性了。然后就是在模板中使用这个属性了,使用方法和文章标题的使用方法一样,如果文章标题是post.title,那么分类目录就是post._category.title,文章的链接是post.url,那个文章对应的分类链接就是post._category.url。是不是很简单,就两个步骤……
可是,如果我已经用标签页面实现了其他功能,或者想要标签页面分成几个组,每个组显示在不同的地方,那要怎么搞呢?也好办,还记得上面提到的那个‘~’符号吗?如下图:
创建标签页是,在标签也名称前面加上前缀,~前面作为分组信息,~后面的部分作为要显示的名称。然后想在模板中输出指定的标签页时,这样循序即可:
<? esx.Eax.getPages('!').forEach(function(page){ ?>
<li><a href="<?= page.url ?>" ?>"><?= page.title ?></a></li>
<? }); ?>这样的话,只会输出~号前面包含感叹号'!'的标签页了!
还有最后一个问题,文章分类实现了,还想实现热门标签怎弄呢?总不能在也门标签里吧分类标签再显示一边吧?那不就重复了吗?呵呵,这个问题,下一篇博文会针对我的博客上这个标签云做讲解!