点点实现文章分类的方法

2012.09.20 分享 6868 人浏览 留言

貌似解释的还不是很好,需要重复多看几遍才能理解哦@

这个功能实现的文章分类,虽不是官方的功能,但是也是相当的强大了,有点传统博的感觉咯。多谢福旦的分享。

鉴于本博标签有点乱,下次再用这个方法分下类别吧!

PS:如果对此法不懂,可用另一种方法,见点点中标签的输出形式(可用于做文章的目录)

i福旦的博客:

  用了点点有一段时间了,在点点模板的交流群里,经常有问人点点怎么实现文章分类,效果类似于传统博客。当然,如果还不理解,可以看我的博客导航栏,如下图(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>
<? }); ?>

  这样的话,只会输出~号前面包含感叹号'!'的标签页了!

  还有最后一个问题,文章分类实现了,还想实现热门标签怎弄呢?总不能在也门标签里吧分类标签再显示一边吧?那不就重复了吗?呵呵,这个问题,下一篇博文会针对我的博客上这个标签云做讲解!

文章地址:https://huilang.me/dd-category/

回复本文

电子邮件地址不会被公开。 必填项已用*标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif