實現月光博客文章內容頁并列的三個文章排行

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/

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈