微知的互联网笔记

专注于游戏和电脑网络的分享日记

« 做网站需要盈利,开源比节流更重要免费虚拟主机空间-主机屋测评报告 »

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<ul class="msg trackback">
<li class="tbname">文章排行:</li>
<li class="mutualityurl">
<script type="text/javascript" src="http://www.wiseboke.com/cache/blog.js"></script>
</li>
<li class="msgtime"> </li>
</ul>

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

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

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

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

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

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

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

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

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

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

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



原创文章如转载,请注明:转载自微知博客 [ http://www.wiseboke.com/ ]

本文链接地址:http://www.wiseboke.com/post/282.html
  • 文章排行:
  • 文章月度排行
    文章年度排行
    完全随机推荐
  • quote 11.joojen
  • http://www.keege.com
  • 月光博客的优化做的确实很到位,这大概也是月光迟迟不愿换成wp的缘故吧
    shareking 于 2010-1-5 9:44:42 回复
    我发现Zblog的自动SEO插件很好,特别是留言本,竟然都很靠前
  • 2010-1-5 8:46:07 回复该留言
  • quote 7.白银时代
  • http://www.llsilver.com
  • 折腾来折腾去,折腾个鸡鸡啊。
    人人网也被人日了,被暴了菊花。
    http://www.llsilver.com/wwwnet/renren-ruqin.html
    网络很危险,大家一起回火星吧。
    shareking 于 2010-1-3 20:19:10 回复
    报复性攻击啊
    ooaixt 于 2010-1-4 13:11:41 回复
    人人网也被搞了?
  • 2010-1-3 19:40:36 回复该留言
  • quote 6.Jacse
  • http://www.jacse.com
  • 这个模仿很好,排的很紧凑,很有内容的感觉。

    这下真正有月光的感觉了。
    shareking 于 2010-1-3 18:28:15 回复
    恩,以后除了感觉还要做点内容
  • 2010-1-3 18:12:46 回复该留言
  • quote 5.快乐岛博客
  • http://kuailedao.org/
  • 这个技术难度高,看起来更花
    shareking 于 2010-1-3 17:38:22 回复
    呵呵,一个月没见了吧
    快乐岛博客 于 2010-1-3 19:55:39 回复
    是啊,非常相信你和各位朋友!
  • 2010-1-3 17:24:14 回复该留言
  • quote 4.笨笨
  • http://www.piaoboyizu.com
  • 笨笨不在乎模板怎么怎么样,有一个用那就ok...踏踏实实做站才是硬道理。

    笨笨的漂泊一族开博一个月,谢谢兄弟的大力支持和鼓励。

    博客每天更新有空常来扯淡,笨笨拒绝潜水。

    在这个寒冷的冬天里希望哥留的是言而不是寂寞。
    shareking 于 2010-1-3 17:38:04 回复
    我并没有更换模板啊,只是添加功能
  • 2010-1-3 17:02:07 回复该留言
  • quote 2.dev
  • http://www.fendou.info
  • 排的太紧凑了
    shareking 于 2010-1-3 16:53:37 回复
    那怎么办呢,调用就这样了
    记忆盒子 于 2010-1-3 23:14:11 回复
    我早就说文章标题每行显示字数太多了,密密麻麻的完全没有了美感。你就不可以把那个table的宽度改小一点吗?width="175"
    shareking 于 2010-1-5 9:45:06 回复
    改小了不是更拥挤吗
  • 2010-1-3 16:13:24 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

  • 订阅我的博客:订阅我的博客
    通过Google订阅本站
    通过鲜果订阅本站
    通过邮件订阅本站

站内搜索

热文排行

最新评论及回复

最近发表

网站收藏

赞助商广告

联系我们:xjpolgzzjjl@gmail.com 桂ICP备10004893号Powered By Z-Blog1.8 Walle Build 100427convert m4v to avi

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.
- This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.