wave banner

标签

Featurettes组件修改指南



修改指南

这个组件包含三个信息展示框，您可以轻松修改内容而无需懂代码。

以下是详细说明：

备份组件

修改前将整个组件的全部代码copy到notepad或其它纯文本文件编辑器的新建的文件中。如果修改过后出现任何问题，将copy出来的代码粘贴回组件中，即可恢复组件原有的内容。请在修改前一定备份！

可修改内容

  1. 文字部分（标题、副标题、正文）

  2. 图片（替换成自己的图片）

  3. 按钮链接（修改按钮跳转的网址）

逐步修改说明

1. 找到数据区域

在代码开头部分找到这段内容（有中文字的部分）：

javascript
const featurettesData = [
    {
        heading: "Facebook专页",
        text1: "为有效利用时间...",
        image: "图片网址",
        // ...其他内容...
    },
    // ...更多展示框...
]

2. 修改每个展示框

每个 { } 包含一个信息框的设置，只需修改这些部分：

  • heading: - 主标题（例如："Facebook专页"）

  • subheading: - 小标题（不需要可留空 ""）

  • text1: 和 text2: - 正文段落文字

  • image: - 替换成您的图片网址

3. 修改按钮（可选）

找到每个框内的链接设置：

javascript
link: {
    text: "按钮文字",
    url: "https://..."
}

  • 修改 text: 为按钮显示文字

  • 修改 url: 为要跳转的网址

4. 图片替换技巧

  • 建议先将图片上传到Blogger获取网址

  • 保持 https:// 开头不变

  • 网址需以 .jpg 或 .png 结尾

5. 保存注意事项

  • 不要删除任何逗号 , 或大括号 { }

  • 只修改引号 "" 内的内容

  • 修改后刷新网页即可看到效果

修改示例

修改前：

javascript
heading: "Facebook专页",
text1: "为有效利用时间...",
image: "https://...旧图片.jpg"

修改后：

javascript
heading: "联系我们",
text1: "可通过Messenger在线咨询",
image: "https://...新图片.jpg"

常见问题

  1. 图片不显示？ 检查网址是否正确且包含 https://

  2. 内容错位？ 检查是否误删了逗号或括号

  3. 需要恢复？ 提前备份原始代码即可还原

  4. 中文标点符号出现乱码：文字部分标点符号必须是英文格式，如输入中文标点符号会显示一个乱码。请避免在text内容中使用中文标点符号。

只需修改引号内的文字/网址，其他代码结构请保持原样！如有疑问，可将要修改的内容发给技术人员协助处理。