Typecho CSS3個(gè)性留言板之讀者墻頁(yè)面的實(shí)現(xiàn)方法
發(fā)布時(shí)間:2015-08-24 14:48:56 作者:佚名
我要評(píng)論

這篇文章主要介紹了Typecho CSS3個(gè)性留言板讀者墻頁(yè)面的添加方法,需要的朋友可以參考下
效果圖如下:
看到文章的首圖相信大家都不陌生,可能其他博客的讀者墻或者留言薄頁(yè)面都見(jiàn)過(guò),挺簡(jiǎn)約的真實(shí)記錄博客的訪客,留下的足跡,便于回訪,這也算是博客里面互動(dòng)的一個(gè)重要依據(jù)或者途徑,下面就來(lái)說(shuō)說(shuō)在Typecho下該如何實(shí)現(xiàn)這麼個(gè)性的訪問(wèn)記錄:
首先、把下面代碼粘貼到當(dāng)前主題的functions.php頁(yè)面
<?php
/**
* 自定義頁(yè)面模板
*
* @package custom
*/
?>
<?php $this->content(''); ?>
<div id="list-post">
<ul class='readers-list'>
<?php getFriendWall(); ?>
</ul></div>
.readers-list {line-height:16px;text-align:left;_zoom:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-o-text-}
.readers-list li{width:180px;float:left;*margin-right:-1px;list-style:none;}
.readers-list a,.readers-list a:hover strong{background-color:#f2f2f2;background-image:-webkit-linear-gradient(#f8f8f8,#f2f2f2);background-image:-moz-linear-gradient(#f8f8f8,#f2f2f2);background-image:linear-gradient(#f8f8f8,#f2f2f2);}
.readers-list a{position:relative;display:block;height:30px;margin:4px;padding:2px 4px 2px 44px;color:#999;overflow:hidden;border:#ccc 1px solid;border-radius:2px;box-shadow:#eee 0 0 2px;font-size:10px;line-height:14px;}
.readers-list .pic,.readers-list em,.readers-list strong{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out;}
.readers-list .pic{width:30px;height:30px;float:left;margin:0 8px 0 -40px;border-radius:2px;}
.readers-list em{color:#666;font-style:normal;margin-right:10px;font:bold 12px/16px microsoft yahei;}
.readers-list strong{color:#ddd;width:34px;text-align:right;position:absolute;right:6px;top:4px;font:bold 14px/16px microsoft yahei;}
.readers-list a:hover{border-color:#bbb;box-shadow:#ccc 0 0 2px;background-color:#fff;background-image:none;}
.readers-list a:hover .pic{opacity:.6;margin-left:0;}
.readers-list a:hover em{color:#EE8B17;font:bold 12px/36px microsoft yahei;}
.readers-list a:hover strong{color:#EE8B17;right:134px;top:0;text-align:center;border-right:#ccc 1px solid;height:34px;line-height:34px;}
看到文章的首圖相信大家都不陌生,可能其他博客的讀者墻或者留言薄頁(yè)面都見(jiàn)過(guò),挺簡(jiǎn)約的真實(shí)記錄博客的訪客,留下的足跡,便于回訪,這也算是博客里面互動(dòng)的一個(gè)重要依據(jù)或者途徑,下面就來(lái)說(shuō)說(shuō)在Typecho下該如何實(shí)現(xiàn)這麼個(gè)性的訪問(wèn)記錄:
首先、把下面代碼粘貼到當(dāng)前主題的functions.php頁(yè)面
PHP Code復(fù)制內(nèi)容到剪貼板
- //獲得讀者墻
- function getFriendWall()
- {
- $db = Typecho_Db::get();
- $sql = $db->select('COUNT(author) AS cnt', 'author', 'url', 'mail')
- ->from('table.comments')
- ->where('status = ?', 'approved')
- ->where('type = ?', 'comment')
- ->where('authorId = ?', '0')
- ->where('mail != ?', 'admin@ben-lab.com') //排除自己上墻
- ->group('author')
- ->order('cnt', Typecho_Db::SORT_DESC)
- ->limit('15'); //讀取幾位用戶的信息
- $result = $db->fetchAll($sql);
- if (count($result) > 0) {
- $maxNum = $result[0]['cnt'];
- foreach ($result as $value) {
- $mostactive .= '<li><a target="_blank" rel="nofollow" href="' . $value['url'] . '"><span class="pic" style="background: url(http://1.gravatar.com/avatar/'.md5(strtolower($value['mail'])).'?s=36&d=&r=G) no-repeat; "></span><em>' . $value['author'] . '</em><strong>+' . $value['cnt'] . '</strong><br />' . $value['url'] . '</a></li>';
- }
- echo $mostactive;
- }
- }
其次、在主題目錄裏新建一個(gè)guestbook.php,粘貼以下代碼,當(dāng)然,新建頁(yè)面的名稱可以自己填寫(xiě),本篇是以guestbook為例,你懂的
復(fù)制代碼
代碼如下:<?php
/**
* 自定義頁(yè)面模板
*
* @package custom
*/
?>
第三、打開(kāi)當(dāng)前主題的page.php,復(fù)制全部代碼.然后粘貼到guestbook.php,接著其次那步下面的代碼
第四、替換代碼,搜索下面代碼替換成再下面內(nèi)容
復(fù)制代碼
代碼如下:<?php $this->content(''); ?>
替換成
復(fù)制代碼
代碼如下:<div id="list-post">
<ul class='readers-list'>
<?php getFriendWall(); ?>
</ul></div>
第五、打開(kāi)主題的style.css,粘貼以下代碼
復(fù)制代碼
代碼如下:.readers-list {line-height:16px;text-align:left;_zoom:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-o-text-}
.readers-list li{width:180px;float:left;*margin-right:-1px;list-style:none;}
.readers-list a,.readers-list a:hover strong{background-color:#f2f2f2;background-image:-webkit-linear-gradient(#f8f8f8,#f2f2f2);background-image:-moz-linear-gradient(#f8f8f8,#f2f2f2);background-image:linear-gradient(#f8f8f8,#f2f2f2);}
.readers-list a{position:relative;display:block;height:30px;margin:4px;padding:2px 4px 2px 44px;color:#999;overflow:hidden;border:#ccc 1px solid;border-radius:2px;box-shadow:#eee 0 0 2px;font-size:10px;line-height:14px;}
.readers-list .pic,.readers-list em,.readers-list strong{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out;}
.readers-list .pic{width:30px;height:30px;float:left;margin:0 8px 0 -40px;border-radius:2px;}
.readers-list em{color:#666;font-style:normal;margin-right:10px;font:bold 12px/16px microsoft yahei;}
.readers-list strong{color:#ddd;width:34px;text-align:right;position:absolute;right:6px;top:4px;font:bold 14px/16px microsoft yahei;}
.readers-list a:hover{border-color:#bbb;box-shadow:#ccc 0 0 2px;background-color:#fff;background-image:none;}
.readers-list a:hover .pic{opacity:.6;margin-left:0;}
.readers-list a:hover em{color:#EE8B17;font:bold 12px/36px microsoft yahei;}
.readers-list a:hover strong{color:#EE8B17;right:134px;top:0;text-align:center;border-right:#ccc 1px solid;height:34px;line-height:34px;}
第六、新建頁(yè)面或者編輯你的讀者墻頁(yè)面,點(diǎn)擊底部高級(jí)選項(xiàng),在自定義模版選擇"自定義頁(yè)面模版"發(fā)布即可!
相關(guān)文章
- 這篇文章主要介紹了Fastadmin的安裝與使用方法,需要的朋友可以參考下2020-08-06
安裝FastAdmin時(shí)報(bào)1146 Table 'fastadmin.fa_admin' doesn't exist錯(cuò)誤
有部分小伙伴在安裝FastAdmin時(shí)報(bào)以下錯(cuò)誤,SQLSTATE[42S02]: Base table or view not found: 1146 Table 'fastadmin.fa_admin' doesn't exist2020-08-05UTF-8文件BOM信息自動(dòng)檢測(cè)和自動(dòng)清除源碼
BOM信息是文件開(kāi)頭的一串隱藏的字符,用于讓某些編輯器識(shí)別這是個(gè)UTF-8編碼的文件,也編輯器自動(dòng)加上的這個(gè)會(huì)導(dǎo)致頁(yè)面頭部會(huì)出現(xiàn)一個(gè)空白行;如果是織夢(mèng)的程序也會(huì)引起驗(yàn)證2020-02-17- 在本篇文章里小編給大家整理的是關(guān)于蘋(píng)果cms采集插件安裝的步驟和方法,有需要的朋友們可以學(xué)習(xí)下。2019-12-05
- 在本篇文章里小編給大家整理的是關(guān)于蘋(píng)果cms添加播放器的方法步驟,對(duì)此有需要的朋友們可以學(xué)習(xí)下。2019-12-05
- 在本篇文章里小編給大家分享的是關(guān)于蘋(píng)果cms更換logo的方法和步驟,有需要的朋友們可以學(xué)習(xí)參考下。2019-12-05
- 在本篇文章里小編給大家整理的是關(guān)于海洋cms電影源碼安裝步驟方法以及相關(guān)知識(shí)點(diǎn),有興趣的朋友們學(xué)習(xí)下。2019-12-05
蘋(píng)果CMS自適應(yīng)手模板設(shè)置方法
在本篇文章里小編給大家整理的是關(guān)于蘋(píng)果CMS自適應(yīng)手模板設(shè)置方法,有需要的朋友們參考學(xué)習(xí)下。2019-12-05- 在本篇文章里小編給大家整理的是關(guān)于蘋(píng)果海洋CMS自定義采集助手設(shè)置方法,有需要的朋友們學(xué)習(xí)下。2019-12-05
- 這篇文章主要為大家介紹了蘋(píng)果cms添加幻燈片的操作方法,步驟很簡(jiǎn)單,有需要的朋友們跟著操作下。2019-12-02