图文并茂设置组件

名扬银河数字官网系统的前台页面信息的图文并茂设置组件文档：

一、组件名称：图文并茂设置组件。

二、组件作用：将前台页面上需要很多文本和图片信息结合着展示的模块，作为管理后台的一个设置编辑项，方便管理员维护更新。常用的场景有：产品详情内容、成功案例详情内容、新闻资讯详情内容、关于我们页介绍内容、联系我们页详情内容、企业荣誉详情展示，品牌信息介绍等。

三、组件写法：

写法包含了文本内容段落、图片信息的获取处理，数据根据管理后台所设置的内容段落和图片情况决定。其中，$n$ 为系统固定的，表示设置的每个文本段落的内容。$link$表示设置的每一张图片可打开的链接地址。$url$表示设置的每一张图片的url地址。 $name$ 表示设置的每一张图片的名称。调用$n$ 、$link$、$url$、$name$时可嵌套使用自定义的html标签。[row_text][/row_text] 用于定义文本段落部分， [row_pic][/row_pic]用于定义图片信息部分。

图文并茂设置组件的写法分解：

• 1、[textpicbox - 开头部分。

• 2、#id - 表示唯一名称码部分，用于定义该文本项在页面中的唯一性，id后名称只能使用英文字母、数字、下划线、短横线。比如：#combrand。

• 3、@name - 表示唯一中文名称部分，用于定义该文本项在当前页面中的唯一中文名称，应尽量简洁化，须8个字以内。以@号开头，@后名称只能使用中文、字母、数字、下划线、短横线。比如：@品牌介绍。

• 4、{备注说明} - 表示该文本项的备注说明：以{开头，以}结尾，在其间为备注说明内容，备注内容只能使用中文、字母、数字、下划线、短横线、中文特殊符号。比如：{图文并茂的展现公司品牌信息}。

• 5、扩展属性refpage - 表示直接引用使用前台其他页面中所配置的相同#id的单行文本设置组件的数据内容，refpage=原定义此组件的页面文件名称，比如：refpage=index。使用此引用方式可共享前台的某些页面上模块的数据内容。网站管理后台只有原定义页面可编辑数据，其他引用页面不再进行编辑设置项管理，只需一处编辑数据，多处使用。主要用于前台页面之间存在相同数据内容模块的编辑和调用处理问题。

• 6、封闭前半段使用：]

• 7、使用[row_text]......[/row_text] 对，定义文本段落内容。其中可嵌套加入[ln]....[/ln]对，对文本段落中的换行情况做出处理，不使用，则不做处理。

  若使用[ln=br]$n$[/ln]，表示每个文本段落中使用<br/>来分割换行内容。若使用[ln]<span>$n$</span>[/ln]，表示每个文本段落中使用html标签span来嵌套每行内容。

• 8、使用[row_pic]......[/row_pic] 对，定义图片信息部分。其中需嵌套加入<img>标签呈现图片，加入<a>标签应用图片的链接信息，还可加入html标签进行图片嵌套使用。

• 9、具体内容调用使用：$n$ - 代表每个文本段落的内容(仅在不处理换行时。若处理换行则表示每行内容)；须在[row_text]....[/row_text]中应用。$link$ - 表示每张图片可打开的链接地址，$url$ - 表示每张图片的url地址， $name$ - 表示每张图片的名称，须在[row_pic]......[/row_pic]中应用。具体应用参考第10点说明。

• 10、结尾：[/textpicbox]

• 11、完整示例：

  [textpicbox #combrand @品牌介绍 {图文并茂的展现公司品牌信息}]

  [row_text][ln]<p>$n$</p>[/ln][/row_text]

  [row_pic]<p><a href="$link$" target="_blank"><img src="$url$" /></p>[/row_pic]

  [/textpicbox]

• 12、组件写法的补充：

  (1)、直接使用html标签中的<p></p>来嵌套输出文本段落信息或图片信息。此时不会处理文本段落中的换行情况：

  [textpicbox #id @name {备注说明} ]

  [row_text]<p>$n$</p>[/row_text]

  [row_pic]<p><a href="$link$" target="_blannk"><img src="$url$" alt="$name$" /></a></p>[/row_pic]

  [/textpicbox]

  (2)、直接使用html标签中的<p></p>来嵌套输出每个独立的文本段落信息或图片信息。并且处理换行操作：用[ln=br]$n$[/ln]方式来处理文本换行情况，每个独立的文本段落中使用<br/>来分割换行。

  [textpicbox #id @name {备注说明} ]

  [row_text]<p>[ln=br]$n$[/ln]</p>[/row_text]

  [row_pic]<p><img src="$url$" /></p>[/row_pic]

  [/textpicbox]

  (3)、直接使用html标签中的<p></p>来嵌套输出每个独立的文本段落信息或图片信息。并且处理换行操作：用[ln]<span>$n$</span>[/ln]方式来处理文本换行情况，每个独立的文本段落中使用html标签span来包含每行文本内容。

  [textpicbox #id @name {备注说明} ]

  [row_text]<p>[ln]<span>$n$</span>[/ln]</p>[/row_text]

  [row_pic]<p><img src="$url$" /></p>[/row_pic]

  [/textpicbox]

  (4)、直接使用html标签中的<p></p>来嵌套输出每个独立图片信息。并且处理换行操作：用[ln]<p>$n$</p>[/ln]方式来处理文本换行情况，对文本内容按每行都使用html标签p来包含输出。

  [textpicbox #id @name {备注说明} ]

  [row_text][ln]<p>$n$</p>[/ln][/row_text]

  [row_pic]<p><img src="$url$" /></p>[/row_pic]

  [/textpicbox]

• 13、输出结果形式：用户在管理后台编辑的无数个文本段落、图片信息，按实际页面代码中的结合嵌套信息得到各文本段落内容或图片的url地址、名称、链接信息结果。

四、组件用法：请将完整的图文并茂设置组件，放置于前台具体某个页面代码中，结合自定义html标签灵活使用。浏览前台页面将呈现各文本段落内容、图片展现。在后台设置管理图文信息。前台展现的文本段落内容和图片样式效果，需要据情况自定义改变。

五、图文并茂设置组件中SEO优化处理：

1、SEO优化处理是针对在图文并茂设置组件中，对文本段落中某些使用了{h2}{h3}{h4}相关的重要行的嵌套情况，为了让前台页面中html标签里的<h2>等更加突出，并且忽略段落自定义嵌套的html标签，而独立存在。此效果只在对文本段落有换行处理时有效。

2、实例说明：[textpicbox #aboutinfo @关于我们详情 {请编辑关于我们的信息详情}] [row_text][ln]<p>$n$</p>[/ln][/row_text] [row_pic]...[/row_pic][/textpicbox]，此图文并茂设置组件中没有使用SEO优化处理方式的，当网站管理后台在“关于我们详情 ”的某文本段落中使用了一行{h2}xxxxx{/h2}优化对，前台页面此段落行信息的html源代码将会是：<p><h2>xxxx</h2></p>。但如果进行了SEO优化处理后，其html源代码将会是：<h2>xxxx</h2>。

3、使用SEO优化处理的方法为：在[textpicbox ...] [seoln] ....... [/textpicbox]中加入[seoln]即可。

六、图文并茂设置组件的文本段落中，想对某些文本信息加上超链接，那么请使用{link...}定义：加超链接需要使用文本，加超链接的形式为：以闭合前半段，然后是文本信息，最后以结尾。比如：{link=https://www.mingyangyinhe.com/doc/}名扬银河数字系统文档{link}。前台页面上会出现此超链接效果，以新窗口打开其链接。注意：有换行处理时，不能跨行加链接，加链接效果只对所在行内有效果。

七、图文并茂设置组件的文本段落中，想对某些文本信息使用个性化的css样式效果，那么请使用css样式类效果引用外部的css定义：加样式类需要使用文本，加样式类的形式为：以闭合前半段，然后是文本信息，最后以结尾。比如：系统须知。注意：有换行处理时，不能跨行加样式，加样式效果只对所在行内有效果。无换行处理时，加样式对所在段落内有效。

八、图文并茂设置组件的文本段落中，可以使用独立一行的方式，将某些html标签运用于详情内容的SEO和布局效果中。支持在文本段落中独立一行的布局html标签有div、ul、li、ol。用法说明：

写法举例：

实战前台页面效果：

九、使用范围：图文并茂设置组件只能在所在的页面中有效，在前台本页面中呈现，在系统后台此页面信息设置中设置文本内容和图片信息。

十、网站系统后台在哪里对各页面信息设置项进行内容编辑呢？具体操作请详见后台文档中的【前台页面信息设置功能文档】。