实现月光博客文章内容页并列的三个文章排行

1、月光博客文章内容页下方的并列三个文章排行

以前刚开始的时候大体上对微知博客进行了模板修改，以尽量实现月光博客上的种种效果

但是后来发现，有很多效果自己无法实现，比如月光博客的“阅读全文”是和标签和分类一排，整个博客的框架有立体投影效果等等，细微之处还有一些，因为微知不懂技术，所以自己摸索起来还是非常麻烦的

对于今天要给大家介绍的月光博客文章内容页面下方的并列的三个文章排行，分别是“用户推荐文章”、“文章月度排行”和“文章年度排行”，如果大家偶尔去一下月光博客就会看到

以前微知没有要实现那个功能，毕竟微知博客才建立不到半年，说年度排行似乎还谈不上

不过看到有几个博客朋友也是使用的j-spring的皮肤，他们都已经实现了这个效果，我去留言让他们提供这个代码

结果是石沉大海，也不知道是那几位兄台太忙，还是没有看到我的留言呢？不得而知，那就自己动手吧

2、月光博客文章内容页并列的三个文章排行的效果实现方法

对于ASP的程序代码，微知还是比较会模仿和修改的，至少可以仿得比较相似了吧，只不过费时间而已

那天微知花了一天的时间来研究那个代码到底是怎么放的，在这里告诉大家微知是怎么模仿对方的模板的

我一般是直接上他们的网站，到你要模仿的页面，右键-查看网站源代码，然后找到自己要模仿的部分代码

然后进行对比和分析，看看自己的网站页面缺少了什么，然后进行不断的测试，最后实现同样的效果

月光博客文章内容页并列的三个文章排行的效果实现具体步骤：

1、下载我们需要调用的JS文件

我查看月光博客的源代码，发现在月光博客文章内容页面下方“文章排行”部分的代码是调用的

请大家下载他调用的JS文件，点击下载，然后大家看到一个JS文件，右键选择打开方式，用记事本打开

可以看到，月光博客的这个调用文件，其实就是一个HTML代码，并不是一个真正意义上的JS代码

我最疑惑的是，这个调用竟然是静态的，我的神啊，以后要想变更就要手动修改文章排行的变动！

开始的时候，我以为我错了，月光博客的文章排行怎么可能是静态的呢？应该能自动更新才对啊

微知不断的进行测试，经过几个小时的测试，最后不得不放弃这种猜想，即使他是动态的，我也实现不了

2、找到文章排行插入代码，插入文章内容页面模板

将下载的blog.js这个文件放在任意的网址和目录里，修改代码中红色部分为你的文件地址，然后复制代码

打开模板里的b_article-single.html文件，找到倒数第三行的<#template:article_trackback#>标签

将文章排行代码粘贴到此标签上方，保存退出，上传覆盖网站原文件即可看到效果

3、修改Blog.js调用文件里的文章排行信息

上面第二步，微知所说的效果，是指的你直接调用的效果，当然你没有修改Blog.js文件里的信息

所以你看到的调用的文章排行是月光博客的文章排行，你可以对比月光博客内容页面的排行看看是不是一样

那我们要修改成自己的文章排行怎么办？很简单，将你要排行的文章标题和网址替换进去

对！你没有想错，就是手动的替换掉Blog.js文件里所有的月光博客文章排行标题和网址，很累？没办法

如果你安装了“文章列表排行”插件，在首页侧边栏实现了排行的话，你只需要将那些文章标题和链接复制进去

关于用户推荐文章排行怎么实现，月光博客上说得很清楚了，微知就不在赘述了，你修改好了以后

上传覆盖原JS文件，因为是JS调用的，使用不用重建也可以看到效果，以后修改直接修改Blog.js文件即可

转自：微知博客 http://www.wiseboke.com/