欢迎来到我的网上家园,谢谢关心和支持!

帝国模板制作笔记(仿phpabc.cn)首页右侧

2019-03-13 20:10:19 帝国CMS 帝国
接下来我们来仿主页的右侧.
phpabc的右侧分成了几块,我们先看最外层框架<aside id="sidebar">
</aside>
然后,是
<div class="widget tux_social">
<div class="wid_social">
<a href="http://weibo.com/linuxbyte" rel="external nofollow" title="新浪微博" target="_blank"><i class="iconfont_social weibo">&#xe607;</i></a>
<a href="https://github.com/phpabc/simple-tux" rel="external nofollow" title="GitHub" target="_blank"><i class="iconfont_social github">&#xe620;</i></a>
<a class="weixin"><i class="iconfont_social weixin">&#xe619;</i>
<div class="weixin-popover">
<div class="popover bottom in">
<div class="popover-title">订阅号“linuxbyte”</div>
<div class="popover-content"><img width="200px" height="200px" src="http://www.phpabc.cn/uploads/2016/08/weixin-300x300.jpg" ></div>
</div>
</div>
</a>
<a class="weixin"><i class="iconfont_social weixin">&#xe601;</i>
<div class="weixin-popover">
<div class="popover bottom in">
<div class="popover-title">支付宝“haibo.d@gmail.com”</div>
<div class="popover-content"><img width="200px" height="200px" src="http://www.phpabc.cn/uploads/2016/08/alipay-300x300.jpg" ></div>
</div>
</div>
</a>
<a href="tencent://message/?uin=5130997&Site=&Menu=yes " rel="external nofollow" title="联系QQ" target="_blank"><i class="iconfont_social  qq">&#xe600;</i></a>
<a href="http://www.phpabc.cn/feed" rel="external nofollow" target="_blank"  title="订阅本站"><i class="iconfont_social rss">&#xe608;</i></a>
</div>
</div>
这些内容只需要把链接和图片换成自己的就行了。
<div class="widget tux_social">
<div class="wid_social">
<a href="[!--news.url--]" rel="external nofollow" title="新浪微博" target="_blank"><i class="iconfont_social weibo">&#xe607;</i></a>
<a href="[!--news.url--]" rel="external nofollow" title="GitHub" target="_blank"><i class="iconfont_social github">&#xe620;</i></a>
<a class="weixin"><i class="iconfont_social weixin">&#xe619;</i>
<div class="weixin-popover">
<div class="popover bottom in">
<div class="popover-title">订阅号“linuxbyte”</div>
<div class="popover-content"><img width="200px" height="200px" src="[!--news.url--]images/weixin-300x300.jpg" ></div>
</div>
</div>
</a>
<a class="weixin"><i class="iconfont_social weixin">&#xe601;</i>
<div class="weixin-popover">
<div class="popover bottom in">
<div class="popover-title">支付宝“haibo.d@gmail.com”</div>
<div class="popover-content"><img width="200px" height="200px" src="[!--news.url--]images/alipay-300x300.jpg" ></div>
</div>
</div>
</a>
<a href="tencent://message/?uin=5130997&Site=&Menu=yes " rel="external nofollow" title="联系QQ" target="_blank"><i class="iconfont_social  qq">&#xe600;</i></a>
<a href="[!--news.url--]e/web/?type=rss2&classid=[!--self.classid--]" rel="external nofollow" target="_blank"  title="订阅本站"><i class="iconfont_social rss">&#xe608;</i></a>
</div>
</div>

下面这段代码是它的模板简介和广告代码,可以删除,也可以改成自己的。
<div class="widget tux_textbanner"><h3>Simple Tux 主题</h3><a href="http://www.phpabc.cn/simple-tux.html" target="_blank"><p>Simple Tux 是PHPABC 当前使用的原创博客主题。目前先放出一个基本版本,以后一边用一边改,一边加功能。但总体不会改成那种特复杂的主题,力求简洁高效</p></a></div><div class="widget widget_text">   <div class="textwidget"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><!-- phpabc 首页侧栏 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:320px;height:100px"
     data-ad-client="ca-pub-4170682641544866"
     data-ad-slot="3387239000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
  </div>

下面这段代码是我们要模仿的:
<div class="widget widget_tux_tab">/*外框*/
<ul class="tab_menu btn">
<li class="current">热门文章</li><li>最新发布</li><li>随机推荐</li>
</ul>/*标题框,三个选项*/
<div class="tab_content" style="clear:both;">/*放置列表的内框*/
<ul>
<li><a href="http://www.phpabc.cn/nvme-ssd-an-zhuang-win10-fang-fa.html" rel="external">nvme ssd 安装win10 方法</a></li>
<li><a href="http://www.phpabc.cn/net-framework-4-7-2-an-zhuang-shi-bai.html" rel="external">.Net Framework 4.7.2安装失败</a></li>
</ul>/*默认显示出来的,热门文章的标题列表*/
<ul class="hide"><li><a href="http://www.phpabc.cn/net-framework-4-7-2-an-zhuang-shi-bai.html" rel="external">.Net Framework 4.7.2安装失败</a></li>
<li><a href="http://www.phpabc.cn/nvme-ssd-an-zhuang-win10-fang-fa.html" rel="external">nvme ssd 安装win10 方法</a></li>
<li><a href="http://www.phpabc.cn/centos6-an-zhuang-nslookup.html" rel="external">Centos 6.x 安装nslookup</a></li>
<li><a href="http://www.phpabc.cn/yi-gou-shu-ju-ku-biao-zai-xian-tong-bu.html" rel="external">异构数据库表在线同步</a></li>
<li><a href="http://www.phpabc.cn/wordpress-database-repair.html" rel="external">WordPress自带数据库修复工具</a></li>
<li><a href="http://www.phpabc.cn/wordpress-wang-ji-mi-ma-de-jie-jue-ban-fa.html" rel="external">WordPress忘记密码的解决办法</a></li>
<li><a href="http://www.phpabc.cn/javascript-chang-yong-dai-ma.html" rel="external">javascript 常用代码</a></li>
<li><a href="http://www.phpabc.cn/bian-yi-an-zhuang-nginx-shi-yu-dao-de-chang-jian-cuo-wu-fen-xi.html" rel="external">编译安装Nginx时遇到的常见错误分析</a></li>
<li><a href="http://www.phpabc.cn/nginx-fu-wu-qi-dong-ting-zhi-chong-qi-jiao-ben.html" rel="external">Nginx服务启动、停止、重启脚本</a></li>
<li><a href="http://www.phpabc.cn/centos7-bian-yi-an-zhuang-nginx.html" rel="external">CentOS 7 编译安装Nginx1.9</a></li>
</ul>/*默认隐藏的,最新文章列表*/
<ul class="hide"><li><a href="http://www.phpabc.cn/window-open-chuang-kou-can-shu-xiang-jie.html" rel="external">window.open()--窗口参数详解!</a></li>
<li><a href="http://www.phpabc.cn/wei-wordpress-de-read-more-jia-shang-nofollow.html" rel="external">为 WordPress 的 Read more 加上 nofollow</a></li>
<li><a href="http://www.phpabc.cn/phpfan-bian-yi-jsde-bian-yi-han-shu-escape.html" rel="external">php反编译JS的编译函数escape  </a></li>
<li><a href="http://www.phpabc.cn/qian-tan-wordpress-bo-ke-seo-ji-qiao.html" rel="external">浅谈 Wordpress 博客 SEO 技巧</a></li>
<li><a href="http://www.phpabc.cn/directadmin-jiao-cheng-you-xiang-de-kai-tong-yu-shi-yong.html" rel="external">DirectAdmin 教程:邮箱的开通与使用</a></li>
<li><a href="http://www.phpabc.cn/innodb-wen-jian-biao-kong-jian-jie-gou.html" rel="external">Innodb 文件表空间结构</a></li>
<li><a href="http://www.phpabc.cn/li-yong-php-soap-shi-xian-web-service.html" rel="external">利用php soap实现web service</a></li>
<li><a href="http://www.phpabc.cn/hua-tu-jie-shi-sql-join-yu-ju.html" rel="external">画图解释 SQL join 语句</a></li>
<li><a href="http://www.phpabc.cn/nginx-nei-zhi-chang-yong-bian-liang.html" rel="external">nginx 内置常用变量</a></li>
<li><a href="http://www.phpabc.cn/javascript-cdn-lib-3071.html" rel="external">国内网站常用JS库CDN服务整理</a></li>
</ul>/*默认隐藏的,推荐文章列表*/
</div>
</div>
这部分比较简单,在标签模板中找到“标题列表模板”查看一下,模板里的链接和它的链接结构是一样的,所以不用作任何改动。直接用万能标签替换里面的列表内容。
<div class="widget widget_tux_tab"><ul class="tab_menu btn">
<li class="current">热门文章</li><li>最新发布</li><li>随机推荐</li>
</ul>
<div class="tab_content" style="clear:both;">
<ul>
[ecmsinfo]0,10,32,0,4,2,0[/ecmsinfo]
</ul>
<ul class="hide">
[ecmsinfo]0,10,32,0,3,2,0[/ecmsinfo]
</ul>
<ul class="hide">
[ecmsinfo]0,10,32,0,5,2,0[/ecmsinfo]
</ul>
</div>
</div>
这三个标签的模板都是用的标题列表模板,它们只是操作类型不同。

下面是评论调用:
<div class="widget widget_tux_comment"><h3>最新评论</h3>
<ul class="tux_comment">
<li>com:<br /> <a href="http://www.phpabc.cn/simple-tux.html#comment-1370999" title="评论来源: 自用 Simple Tux 主题">我用了你的主题在小工具里面添加了标签,但是首页不显示标签怎么办</a></li>
<li>iebukes:<br /> <a href="http://www.phpabc.cn/simple-tux.html#comment-1369478" title="评论来源: 自用 Simple Tux 主题">您好,请问如何向内容页侧栏添加“与本文暧昧的”小组件?</a></li>
<li>suifeng:<br /> <a href="http://www.phpabc.cn/simple-tux.html#comment-1369191" title="评论来源: 自用 Simple Tux 主题">为什么我自定义了侧边栏,但是却显示不出来呢?删除掉原有的前台就显示</a></li>
<li>wein:<br /> <a href="http://www.phpabc.cn/simple-tux.html#comment-1368138" title="评论来源: 自用 Simple Tux 主题">初始版的蓝色很好看呀,怎么变成灰色了,设置那能不能做成可选蓝色。</a></li>
<li>hahahou:<br /> <a href="http://www.phpabc.cn/simple-tux.html#comment-1367756" title="评论来源: 自用 Simple Tux 主题">分类和标签内容不止一页,你的网站也是如此,你用手机访问分类页和标签</a></li></ul>
</div>
这样的标签模板帝国没有现成的,所以要自己编辑一个。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表