DedeCMS文章页插入PDF文件,并实时浏览

织梦教程 0 来源:老K模板网 收藏

最近有用户想给自家企业官网上的“产品信息”栏目下的某些产品,插入一个PDF文件,用来展示该产品的各项参数。 使用 DedeCMS ,来实现这个需求,依旧是轻松加愉快! 一起来看一下:

首先,我们找到产品栏目,确认一下产品栏目是使用的哪个内容模型。一般情况,要么是“普通文章”,要么就是“图片集”。

这里,我使用“普通文章”来做演示,“图片集”或其它内容模型也是同样适用的。

接下来,我们到内容模型管理里,去给产品栏目所使用的的模型,也就是普通文章,增加一个字段。

数据类型这里选择“附件类型”,提示文字和字段名可以随意,但是不要太随意。

点击确定,保存字段后,是这样的。

接下来,我们就可以去产品栏目下,添加新的产品,或者是修改之前的产品信息了。

如上图所示,多了一个**“PDF文件”**的框框,我们可以在这里上传一个PDF文件,用作该产品的说明书、产品手册等。

需要说明的是,DedeCMS 默认是不允许上传 pdf 文件的,我们需要到附件设置里设置一下。

先上传一个 pdf 文件,用作测试。接下来,我们演示如何调用、展示这个 pdf 文件。

我们首先需要找到产品栏目所使用的的文章模板是哪个。

然后,我们直接去修改这个模板文件。在合适的位置,增加以下代码:

<button title="Copy Code" class="copy" style="touch-action: manipulation; border: 1px solid var(--vp-code-copy-code-border-color); padding: 0px; background-image: var(--vp-icon-copy); direction: ltr; position: absolute; top: 12px; right: 12px; z-index: 3; border-radius: 4px; width: 40px; height: 40px; opacity: 0; background-position: 50% center; background-size: 20px; background-repeat: no-repeat; transition: border-color 0.25s, background-color 0.25s, opacity 0.25s;"></button>html
{dede:field.pdffile/}

注意字段名一定不要写错了!

看效果。

点击蓝色超链接,已经可以在浏览器新窗口浏览 pdf 文件了。但是我们想要的效果,是可以直接浏览。

重点来了,我们需要修改 /templets/system/channel_addon.htm 文件。删掉所有的代码,只保留一个 ~link~ 即可。

然后,我们再去修改一下,上边修改过的那个模板文件。在合适的位置,嵌入一下代码:

<button title="Copy Code" class="copy" style="touch-action: manipulation; border: 1px solid var(--vp-code-copy-code-border-color); padding: 0px; background-image: var(--vp-icon-copy); direction: ltr; position: absolute; top: 12px; right: 12px; z-index: 3; border-radius: 4px; width: 40px; height: 40px; opacity: 0; background-position: 50% center; background-size: 20px; background-repeat: no-repeat; transition: border-color 0.25s, background-color 0.25s, opacity 0.25s;"></button>html
<iframe src="{dede:field.pdffile/}" width="100%" height="600px" frameborder="0"></iframe>

再看下效果。

完美实现!

DedeCMS,轻松建站的利器!


免责声明:1.凡本站注明“来源:XXX(非老K模板网)”的作品,均转载自其它媒体,所载的文章、图片、音频视频文件等资料的版权归版权所有人所有,如有侵权,请联系laokcms#126.com处理;2.凡本站转载内容仅代表作者本人观点,与老K模板网无关。
0 条评论

网友留言