diy样式代码，显示缩略图和显示原图

𝕷𝖎𝖑𝖏𝖆𝖈𝖐 · 发表于 2023-10-7 16:46:09

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

首页diy文章的时候，想图文显示，但是图片有时候调出来的是缩略图，有时候是原图，自定义样式代码，怎么写能调出缩略图啊？我知道答案回答被采纳将会获得1 贡献已有0人回答

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-17 12:10:39

在Discuz中，首页DIY文章模块的图片显示可以通过自定义样式代码来控制。如果你希望始终显示缩略图而不是原图，可以通过以下方式来实现。

### 1. 使用Discuz的缩略图功能
Discuz默认会为上传的图片生成缩略图，缩略图的路径通常是在原图路径的基础上加上 `_thumb` 后缀。例如，原图路径为 `data/attachment/forum/202310/01/123456.jpg`，缩略图路径则为 `data/attachment/forum/202310/01/123456_thumb.jpg`。

### 2. 自定义DIY模块的样式代码
在DIY模块中，你可以通过自定义样式代码来指定显示缩略图。以下是一个示例代码，假设你使用的是 `{pic}` 变量来调用图片：

<div class="article-item">
<div class="article-thumb">
<img src="{pic}_thumb.jpg" alt="{title}" />
</div>
<div class="article-content">
<h3>{title}</h3>
<p>{summary}</p>
</div>
</div>

复制代码

在这个代码中，`{pic}` 是图片的路径变量，我们通过在其后加上 `_thumb.jpg` 来强制调用缩略图。

### 3. 确保缩略图存在
在调用缩略图之前，确保Discuz已经生成了缩略图。如果没有生成缩略图，你可以通过以下方式手动生成：

- 在后台的“全局” -> “上传设置”中，确保启用了“生成缩略图”功能。
- 如果缩略图未生成，可以通过重新上传图片或使用Discuz的“工具” -> “更新统计”中的“重建缩略图”功能来生成缩略图。

### 4. 使用CSS控制图片显示
如果你希望进一步控制缩略图的显示效果，可以使用CSS来调整图片的大小、边框等样式。例如：

.article-thumb img {
width: 100px;
height: auto;
border: 1px solid #ccc;
border-radius: 5px;
}

复制代码

### 5. 完整示例
以下是一个完整的DIY模块样式代码示例：