DiscuzQ3.0尝鲜版发布仅三天,论坛中的大佬张安冠就首发了全网第一款二开组件——幻灯海报组件。
一起来了解一下吧!
一、幻灯海报组件介绍:
组件名称:PC端 幻灯海报组件
组件作者:张安冠(产品经理)
分享性质:免费分享
二、版本1:静态类——未发布
简要说明:图片和网址是手动添加到模板后,生成了固定的状态,不需要在帖子设置。
功能:设计好图片大小,直接放在模板是用即可。
图片:png,jpg,gif 大小为:800*300像素
暂时不发布。
可能是考虑后续更新会覆盖掉
三、版本2:动态类
简要说明:图片和链接是调用帖子里上传的图片。
功能:在帖子里面上传图片为 800*300 像素的图片,幻灯插件自动获取第一张图片作为展示,帖子必须增加“精华”
图片:png,jpg,gif 大小为:800*300 像素
完整版,是直接覆盖 DiscuzQ 原来文件就可以。
简约版,是需要直接手动添加代码。
简约版,是需要直接手动添加代码。
3.1 完整版安装方法:
第一步:安装组件库,执行: yarn add antd
或者 npm add antd
第二步:覆盖文件(如图)
说明:下载完整版后,解压出来有三个文件包,分别为:components,layout,pages。把这三个文件包覆盖到 DiscuzQ 前端 web 代码下面即可。
3.2 简约版安装方法:
第一步:安装组件库,执行: yarn add antd
第二步:在 web/pages/_app.jsx 文件添加代码:添加在13行
// 引入antdesgin
import 'antd/dist/antd.css';
第三步:在 web/layout/index/pc/index.jsx 文件添加代码:添加在9行
// 引入幻灯组件
import XuemaHuandeng from '@components/xuema-huandeng';
第四步:把 xuema-huandeng 文件包放在 web/components 文件包里面。
四、幻灯使用方法:
第一步:在帖子里面发布为800*300像素的图片。
第二步:在帖子里面右上角点击“管理”》》点击:“精华”。
原文发布于安冠大佬的学码网:https://xuema.cc/thread/269
本文地址:https://www.dzq3.com/308.html,转载请注明!
© 版权声明
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
THE END
请登录后发表评论
注册
社交帐号登录