首页 » 建站手册 » RAW主题文章页面添加分享模块

RAW主题文章页面添加分享模块

谷歌已收录,更新于2018年12月30日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,讨论各种问题!

说明

要换主题了,把以前魔改的RAW一部分代码就发出来。能写好几篇的感觉,有些太过复杂的就不发了。本篇为RAW文章页面添加分享按钮的方法,需要主题引入fontawesome字体,如果未引入,请勿使用本代码。如果不确定是否引入fontawesome,请按照本教程,引入下面的代码,看看是否正常。

代码

将以下代码添加到post.php文件中,添加到</article>,代码中的<?php if(!($this->fields->type=='1')): ?>表示,只显示在一般文章中,短文模式不显示。其他主题引用,请去掉下面代码中的第一行与最后一行。

<?php if(!($this->fields->type=='1')): ?>
<div style="text-align: center;">
<div class="share"><font style="font-size:18px;color:darkcyan;">分享到:</font>
<a class="social-share icon-google" target="_blank" href="https://plus.google.com/share?url=<?php $this->permalink() ?>" title="分享至Google Plus"><i class="fa fa-google"></i></a>
<a class="social-share icon-qzone"  target="_blank" href="https://connect.qq.com/widget/shareqq/index.html?url=<?php $this->permalink() ?>&title=<?php $this->title() ?>&summary=<?php $this->excerpt(100); ?>&pics=https://cdn.v2ex.com/gravatar/9924cdad2140a9f8570393bfebe411a8?s=200&r=X&d=&site=%E6%B2%A1%E6%84%8F%E6%80%9D&style=201&width=32&height=32" title="分享至QQ好友"><i class="fa fa-qq"></i></a>
<a class="social-share icon-weibo"  target="_blank" href="http://service.weibo.com/share/share.php?url=<?php $this->permalink() ?>/&appkey=<?php $this->options->title(); ?>/&title=<?php $this->title() ?>&pic=https://cdn.v2ex.com/gravatar/9924cdad2140a9f8570393bfebe411a8?s=200&r=X&d=" title="分享至新浪微博"><i class="fa fa-weibo"></i></a>
<a class="social-share icon-twitter"  target="_blank" href="https://twitter.com/intent/tweet?text=<?php $this->excerpt(100); ?>&amp;url=<?php $this->permalink() ?>&amp;via=https://black1ce.com"><i class="fa fa-twitter" title="分享至Twitter"></i></a>
</div>
</div>
<?php endif;?> 

CSS代码

请将以下代码放置于css文件中。

.social-share{display:inline-block;padding:5px;width:40px;height:40px;border-color:#db4437;border-radius:50%;font-size:1.2em}
.icon-google{border-color:#db4437;color:#db4437}
.icon-google:hover{border-color:#db4437;background-color:#db4437;color:#fff}
.icon-qzone{border-color:#fdbe3d;color:#fdbe3d}
.icon-qzone:hover{border-color:#fdbe3d;background-color:#fdbe3d;color:#fff}
.icon-weibo{border-color:#ff763b;color:#ff763b}
.icon-weibo:hover{border-color:#ff763b;background-color:#ff763b;color:#fff}
.icon-twitter{border-color:#55acee;color:#55acee}
.icon-twitter:hover{border-color:#55acee;background-color:#55acee;color:#fff}

预览

RAW主题文章页面添加分享模块

一个只会魔改主题,而不会制作主题的站长,专业扒各种网站的各种样式。希望每一位来到这里的访客,都能拿到你们需要的资源!

发表评论

返回主页看更多
赏杯咖啡给站长 支付宝 扫一扫