使用Share.js在帝国CMS内容页添加社交分享功能,通过引入CDN资源并插入模板标签即可实现,支持微信、微博等国内平台,需注意变量正确调用与HTTPS兼容性。

帝国CMS本身没有内置社交分享功能,但可以通过引入第三方分享插件或手动添加代码的方式,在内容页快速实现分享功能。操作简单,效果明显,适合大多数网站使用。
选择合适的社交分享工具
目前主流的社交分享服务有:
推荐使用 Share.js,轻量、免费、支持微信、QQ、微博、头条等国内常用平台。
手动添加Share.js分享按钮
以下是具体实现步骤:
-
1. 下载 Share.js 或使用 CDN 引入
在页面底部(通常在内容模板的 </body> 前)加入以下代码:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/share.min.js"></script>
-
2. 在内容模板中添加容器代码
进入帝国CMS后台 → 模板管理 → 内容模板 → 修改对应的内容页模板,在需要显示分享按钮的位置插入:
<div class="social-share" data-title="[$title]" data-url="[$news.url]" data-image="[$titlepic]"></div>
说明:[$title]、[$news.url]、[$titlepic] 是帝国CMS的标签,分别代表标题、当前页面URL和缩略图,系统会自动替换。
自定义分享样式与平台
如果想控制显示哪些平台或调整样式,可以在初始化时配置:
<script>
window.$ = window.jQuery = require('jquery');
$('.social-share').share({
sites: ['weibo', 'qq', 'wechat', 'douban', 'qzone'] // 只显示这些平台
});
</script>
常见可选平台包括:weibo(微博)、wechat(微信二维码)、qzone(QQ空间)、qq(QQ好友)、tencent(腾讯微博)、douban(豆瓣)等。
注意事项
• 确保内容页模板正确调用动态变量,否则分享链接或图片可能出错。
• 微信分享需弹出二维码,用户自行扫码,不能直接跳转。
• 静态页生成后,检查分享链接是否为真实URL,避免出现“index.html”类静态路径错误。
• 如使用HTTPS站点,确保引用的资源也支持HTTPS。
基本上就这些,不复杂但容易忽略细节。只要标签正确、脚本加载成功,分享功能就能正常运行。









