Drupal 7.x. How to use shortcodes

Amina Freinger April 8, 2015

drupal shortcode

Rating: 5.0/5. From 2 votes.

Please wait...

本教程将向您解释如何在Drupal 7中使用短代码.x templates.

Drupal 7.x. How to use shortcodes

短代码实际上是在内容文本中使用的宏. 这些宏通过主题引擎更改内容的文本和给定部分的格式. 使用短代码来代替编写几十行代码来执行某些功能.

要使用短代码，请确保 Shortcode 和TM Shortcodes模块已启用.

您可以在文本格式(完整)中查看所有可用短代码的完整列表 HTML) section while creating a node:

让我们仔细看看这些短代码:

[clear][/clear] inserts a float-clearing html 项(div或span)围绕给定文本，这种方式清除浮动块. The shortcode 包含以下属性:
- class – an additional class;
- id – an element indicator (id);
- type -元素类型:block (div, d)或in-line (span, s).
You can use the simple [clear /] to add a space in text. It works as the HTML
插入单个换行符的标记.
[col][/col] displays content in columns. The shortcode 包含以下属性:
- align – columns alignment: right 外部方块的右侧会出现一列 center 外部方块的中心会出现一列
- class – an additional element class;
- clear – clears floated blocks: clear-both – on both sides, clear-left – on the left side only, clear-right – on the left right only;
- last -应该有“1”值的最后一列;
- width – column width: 1-2 – a half, 1-3 – a third, 2-3 – two thirds, 1-4 – a fourth, 3-4 – three fourths, 1-5 – a fifth, 2-5 – two fifths, 3-5 – three fifths, 4-5 – four fifths, 1-6 – a sixth or 5-6 – five sixths external blocks.
建议您使用这个 shortcode inside [clear][/clear] shortcode.

For example:
```
[clear type="div"]
	[col width="1-2"]列内容[/col]
	[col width="1-2"]列内容[/col]
	[col width="1-3"]列内容[/col]
	[col width="2-3"]栏目内容[/col]
	[col width="1-4"]列内容[/col]
	[col width="3-4"]栏目内容[/col]
	[col width="1-5"]列内容[/col]
	[col width="4-5"]列内容[/col]
	[col width="2-5"]栏目内容[/col]
	[col width="3-5"]栏目内容[/col]
	[col width="1-6"]列内容[/col]
	[col width="5-6" last="1"]列内容[/col]
[/clear]
```
[counter][/counter] displays animated counters. The shortcode 包含以下属性:
- class – an additional class;
- number – any integer number;
- timer - count从0到指定日期的速度，以毫秒为单位.
The shortcode content serves as a title.

For example:
```
[counter number="300" timer="30" class="custom-class1"] counter [/counter]
[counter number="600" timer="30" class="custom-class2"]Counter2[/counter]
[counter number="900" timer="30" class="custom-class3"] counter [/counter]
```
In this shortcode 我们通过为“custom-class”附加类添加带有“color”属性的CSS规则来改变计数器的颜色. See the screenshot below:
[icon][/icon] displays FontAwesome icons. The framework uses FontAwesome 4.1.0 version. The shortcode 包含以下属性:
- class – FontAwesome icon class;
- number - URL-address，如果您想添加一个链接到图标.
For example:
```
[icon class="fa-smile-o"]每天微笑[/icon]
[icon class="fa-star"] [/icon]
[icon class="fa-coffee"]休息时间[/icon]
```
可用图标的完整列表 this page.
[piegraph][/piegraph] 显示循环进度指示器. The shortcode 包含以下属性:
- barcolor – a color of the bar line;
- class – an additional element class;
- linewidth -线宽，任意整数;
- percent -百分数(0-100);
- trackcolor -轨道线(进度线)的颜色;
- width -进度条的直径，任意整数.
The shortcode content serves as a title.

For example:
```
[piegraph percent="30" width="200" barcolor="#D864D8" trackcolor="#cccccc" linewidth="3"]Piegraph1[/piegraph]
[piegraph percent="60" width="200" barcolor="#95E495" trackcolor="#cccccc" linewidth="3"] piegraph [/piegraph]
[piegraph percent="90" width="200" barcolor="#33CCCC" trackcolor="#cccccc" linewidth="3"]Piegraph3[/piegraph]
```
[progressbar][/progressbar] displays a progress bar. The shortcode 包含以下属性:
- class – an additional element class;
- percent -百分制的进步(0-100).
For example:
```
[progressbar % = " 30 "] Progress1 [/ progressbar]
[progressbar % = " 60 "] Progress2 [/ progressbar]
[progressbar % = " 90 "] Progress3 [/ progressbar]
```
[gmap][/gmap] inserts a Google map. The shortcode 包含以下属性:
- class – additional class;
- lat_coord – latitude coordinate;
- lng_coord – longitude coordinate;
- zoom_value – initial zoom level of the map. Use values from 1 to 20;
- zoom_wheel -在地图上增加一个滚轮. Use “yes” or “no” value.
For example:
```
[gmap lat_coord="55.861263" lng_coord="-4.251604" zoom_value="15" zoom_wheel="no"][/gmap]
```
您可以遵循本教程为您的Google地图找到合适的坐标 shortcode: Drupal 7.x. Google Map configuration.