blogger博文文章目录的生成方法

前言

  在上一篇文章中,介绍了用OpenLiveWriter发布blogger博文的优点,经过测试,目前看来OpenLiveWriter最大的好处是在未搭梯子翻墙时,用其能将博文发布在blogger上,除了博文中有图片外,如果只是纯文本的博文,发布速度很快。

Blogger生成博文目录困难

  在这篇文章中,要介绍一下本人摸索出来的,在blogger博文中添加文章目录的办法。用过blogger建博的人都清楚,blogger的编辑功能很逊,有时我们希望在一篇长文中嵌入文章目录,以便访客能方便的跳转相关的内容,但是blogger后台编辑没有这个功能,相关插件我也没有找到。要想实现博文目录,其实可以将标题提取出来,然后手动一个一个的添加<a>标签实现,但是这样非常繁琐,对于这些无意义的重复工作我们应该想办法用技术手段去解决。

生成blogger博文目录的工具

  实现blogger博文目录所要用到的工具有能生成目录索引的编辑器、OpenLiveWriter,下面分别介绍。

生成blogger博文目录的具体方法

  如果用wordpress建站,要生成博文目录索引就简单了,直接安装相关插件就可以很好实现。从省事且提高效率的角度出发,在blogger中发布博文前我们需要找到能自动生成博文目录的编辑器,目前我找到基于markdowm语法的在线应用stackedit.io,该应用使用[toc]语句能生成文章目录,如果你进一步使用,还可以用stackedit.io直接将博文发布到blogger博客上。
  但是问题就来了,当你将生成好文章目录的博文用stackedit.io直接发布到blogger上或者你将其源代码复制粘贴到blogger后台编辑器进行发布,结果就是原本用stackedit.io生成的文章目录索引链接变成了以http://blogger.com/……的索引链接,这个链接是你博文的原始ID,问题是你发布后在博客前端访问时,这个链接并不是直接指向当篇博文的某处索引,而是跳转到后台文章编辑处了。所以用stackedit.io直接发布blogger博文或将源代码复制粘贴到blogger后台发布不能实现目录索引效果。
  这时我们就用到OpenLiveWriter了,它的功能昨天我已经介绍过了,其好处就是用它发布博文后,不会使原始代码发生变化,那么我们用stackedit.io生成博文目录后,再将其源代码粘贴放到OpenLiveWriter进行发布,那就可以解决blogger博文目录索引了。

(图一:用stackedit.io生成博文目录)

(图二:用OpenLiveWriter发布有目录的博文)

其它问题

  我们用上述方式实现的博文目录,在其中某处索引的链接在浏览器中显示的是该处标题原始字符,比如博文中某处标题为”blogger的使用方式”,在文章发布后,你从博文目录点击快速跳转到该标题时,浏览器中结尾也是”blogger的使用方式”,这样看起来不很简洁而已,但是对于功能方面没有任何不利之处,同时我认为除了索引链接复杂一点外,应该对博客SEO有利的。
  另一方面,对于生成的文章目录,是以<ul><li>标签组织的,目前本人的博客css中对<ul><li>的样式不很美观,你自己可以对<ul><li>的样式进行修改,以便使生成的博文目录美观漂亮。

(图三:博文目录效果,可以通过修改css变更样式)

评论

热门博文

雷洋之死完美官收(多图)

谷歌blogger平台建立国内可访问博客攻略

用stackedit发布blogger博文,文章排版简洁漂亮

留言板