Pro mode manual

Introduction Pro Mode Overview

WOX is a service that allows you to easily create homepages and blogs without the knowledge of HTML and CSS, but for those who want to customize more seriously, we also provide a customization method for advanced users called "Pro Mode" We are.

To start Pro mode
To start Pro mode, go to "Admin screen> Preferences> Customize mode switch", select the mode as "Pro" and save the settings. To return to the previous mode, select "Normal" and save the settings. If you change to Pro mode, the initial design (template) will be automatically assigned only if you have never used Pro mode in the past, so you can start immediately just by switching. As with the normal mode, you can also use the "Preferences> Template Management" template for the professional mode template, and you can select from multiple professional mode templates. My templates can also be used in the same way, so you can save them at a save point in the middle of customization, or save them when you have completed your favorite template.

What you can do in Pro mode
In terms of design, it is 100% freely customizable using HTML and CSS. Even error pages such as 404 Not Found can be created on the user side. In addition, all functions such as environment settings can be used as before.

Administration menu
The customization in Pro mode is done in "Management screen> Customize". Customization is mainly divided into settings for common parts called "whole" and other "main" settings.
The following is a brief explanation.

[Overall]
  • Content information and basic settings
    Add page titles and content menus.
  • Common HTML block
    You can create common HTML such as header and footer.
  • Sub page
    The following screens used in the system can be customized.
    • Footmark
    • List of WOX friends
    • WOX friend application
    • Delete parent and child articles * This is the bulletin board article deletion screen. (Can be set when using bulletin board or website)
    • Delete comment * It is a comment deletion screen of the plugin. (Can be set when using blog, review, novel, gallery, homepage)
    • Authentication * This is the authentication screen when the password is restricted.
    • error * It is an error screen such as 404 Not Found.
  • CSS settings
    CSS can be created.
  • File management
    If you need images etc. in content creation, upload them here and manage them.

[Maine]
  • HTML editing
    Write the main HTML.
  • Advanced Setting
    In the settings related to the functions, management of plugins etc. is also performed here.

Overview of template variables

In WOX Pro mode, you can customize it freely using HTML and CSS, but use a special character string called "template variable" in HTML.
There are three types of template variables, and you need to understand the concept to customize them.
  1. variable
  2. Block variables
  3. Loop variable

1.variable
Variables have a role to display individual information such as setting contents and article contents.
Below are some examples.
Variable name Example of display in content
{SiteTitle} Taro's homepage
{SiteUrl} https://sample.web.wox.cc
Thus, variables are represented by strings enclosed in { and } (curly braces).
For example, if you combine these variables and write "<a href="{SiteUrl}">{SiteTitle}</a>", you can display a link like "Taro's homepage".

2.Block variables
Block variables are variables used for information displayed under certain conditions, and consist of a start variable {block:xxxxx} and an end variable {/block:xxxxx}. Together these two variables are called "block variables". Many variables need to be hidden if they do not meet certain conditions and must be described in block variables. (The xxxxx part changes depending on the type of variable.)
Below are some examples.
Below are some examples. Description
{block:SiteSubTitle}
	{SiteSubTitle}
{/block:SiteSubTitle}
The variable {SiteTitle} that displays the site name introduced in the previous section can be used alone, but the subtitle {SiteSubTitle} etc. does not function alone, such a variable is a start variable {block:SiteSubTitle} and an end variable {/block:SiteSubTitle}. In this state, it becomes a conditional block of "Display information if there is a subtitle setting".
{block:Counter}
	{Counter}
{/block:Counter}
By writing {Counter} in {block:Counter} and {/block:Counter}, it means "display counter if there is a counter setting". The counter needs to be described in a block variable because there is an item of "use / do not use" in the setting.

3.Loop variable
Loop variables are used to repeatedly display multiple pieces of information such as menu information and articles. Similar to a block variable, except that it uses loop: instead of block: and consists of a start variable {loop:xxxxx} and an end variable {/loop:xxxxx}. Together these two variables are called a "loop variable". Within the loop variable, the information in it is repeated a certain number of times (for example, the number of articles). (The xxxxx part changes depending on the type of variable.)
Here is an example of HTML in Displaying a Menu.
Loop variables and variables in them Description
{block:ContentMenu}
	<ul>
		{loop:ContentMenu}
			<li><a href="{MenuUrl}">{MenuName}</a></li>
		{/loop:ContentMenu}
	</ul>
{/block:ContentMenu}
If you write in HTML like this, the menu link that exists in the setting will be displayed with the list tag. The contents described in the start variable {loop:ContentMenu} and the end variable {/loop:ContentMenu} will be displayed in a "loop (repeat)" for the number of menus. Since menus are information displayed under certain conditions, it is necessary to enclose menu-related descriptions including {loop:ContentMenu} between {block:ContentMenu} and {/block:ContentMenu}.

That is all for the overview.
From the following chapters, we will explain the variables that can be actually used for each service.

Common variables that can be used anywhere

Variables frequently used in the head
It is a variable used between <head> and </head> of html.
Variable name Illustration Description
{ServiceBaseUrl} <script src="{ServiceBaseUrl}/lib/js/jquery/1.8.2.js"></script> This is the URL of the service provider (WOX). WOX hosts and provides libraries such as jquery, so you can use it in such cases. The list of js libraries is as follows.
{ServiceBaseUrl}/lib/js/jquery/1.8.2.js
{ServiceBaseUrl}/lib/js/jquery/3.2.1.js
Please use https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js etc. for those that do not exist in the library.
{PageTitle} <title>{PageTitle}</title> Basically, "site name" is displayed, but it changes depending on the situation. For example, when browsing an article URL on a blog, information such as "article title-blog-site name" is output. We recommend that you use this variable in the head title tag. * If you want to output only the site name, use {SiteTitle}.
{Keywords}
{block:Keywords}
	<meta name="keywords" content="{Keywords}">
{/block:Keywords}
Search engine keywords. The settings are made in the "Meta element" of "Customize > Main > Detailed settings".
{Description}
{block:Description}
	<meta name="description" content="{Description}">
{/block:Description}
A description of the content. The settings are made in the "Meta element" of "Customize > Main > Detailed settings".
{Robots}
{block:Robots}
	<meta name="robots" content="{Robots}">
{/block:Robots}
It is a meta tag to avoid robots (reject indexing to crawlers). The settings are made in the "Meta element" of "Customize > Main > Detailed settings". If the setting to avoid robots is enabled, "noindex, nofollow" is output to {Robots}.
{FaviconUrl}
{block:FaviconUrl}
	<link rel="icon" href="{FaviconUrl}">
{/block:FaviconUrl}
This icon is displayed on the address bar or tab of the web browser. The settings are made in "Preferences > Favicon Settings".
{RssUrl}
{block:RssUrl}
	<link rel="alternate" type="application/rss+xml" href="{RssUrl}">
{/block:RssUrl}
The URL of the RSS feed. The settings can be made with the RSS of "Accessories" in "Customize > Overall > Content Information and Basic Settings", and are output when the settings are enabled.
{CssUrl1}
... omitted
{CssUrl9}
<link rel="stylesheet" href="{CssUrl1}">
... omitted
<link rel="stylesheet" href="{CssUrl9}">
URL of CSS file. Settings can be made in "Customize > Overall > CSS settings". {CssUrl1} to {CssUrl9} are associated with CSS1 to CSS9 of each CSS setting. Please use {CssUrl2} to output CSS2 settings, {CssUrl3} to output CSS3 settings, and so on.

Menu-related variables
Function for displaying a menu.
Variable name Illustration Description
{MenuUrl}
{MenuName}
{block:ContentMenu}
	<ul>
		{loop:ContentMenu}
			<li><a href="{MenuUrl}">{MenuName}</a></li>
		{/loop:ContentMenu}
	</ul>
{/block:ContentMenu}
The menu URL and name set in "Menu" of "Customize > Overall > Content Information and Basic Settings".
{block:CurrentPage}
{/block:CurrentPage}
... omitted
<li>
	<a href="{MenuUrl}"{block:CurrentPage} class="current"{/block:CurrentPage}>
		{MenuName}
	</a>
</li>
... omitted
A block variable that determines whether the page is current. In the actual example, the css class name of current is output to the a element of the menu, and the style different from other menu links is dynamically assigned.

Variables often used in body
Variable that can be used anywhere in html and used in the body tag.
Variable name Illustration Description
{BaseUrl} <a href="{BaseUrl}/entry{No}.html">COM({CommentNum})</a> This is the base URL for the content. An example is a link to a comment.
{FileBaseUrl} <img src="{FileBaseUrl}/filename.jpg" alt="filename"> File base URL for images uploaded in "Customize > Overall > File Management".
{SiteTitle} <h1>{SiteTitle}</h1> This is the "Main Title" set in "Page Title" of "Customize > Overall > Content Information and Basic Settings".
{SiteSubTitle}
{block:SiteSubTitle}
	{SiteSubTitle}
{/block:SiteSubTitle}
"Subtitle" is set in "Page Title" of "Customize > Overall > Content Information and Basic Settings".
{SiteUrl} <h1><a href="{SiteUrl}">{SiteTitle}</a></h1> Site URL. (TOP page)
{Copyright}
{block:Copyright}
	{Copyright}
{/block:Copyright}
User copyright notice. The setting can be found in "Customer Display" in "Copyright" in "Customize > Overall > Content Information and Basic Settings".
{WoxCopyright}
{block:WoxCopyright}
	{WoxCopyright}
{/block:WoxCopyright}
WOX copyright notice. The setting is "WOX copyright display" of "Copyright display" of "Customize > Overall > Content information and basic settings", and can be hidden and unchecked only for premium users.
{HTML1}
... omitted
{HTML9}
{HTML1}
... omitted
{HTML9}
Output common HTML block. Common HTML settings can be made in "Customize > All > Common HTML block". {HTML1} to {HTML9} are linked with HTML1 to HTML9 of each common HTML block setting. Use {HTML2} to output HTML2 settings, {HTML3} to output HTML3 settings, and so on.

Accessory-related variables
Variables that are often used in content footers.
Variable name Illustration Description
{Url}
{ImgUrl}
{block:AccFootMark}
	<a href="{Url}"><img src="{ImgUrl}" alt="Footmark" width="16" height="16"></a>
{/block:AccFootMark}
The page URL and icon image URL of the footmark. The footmark function can be set in "Accessories" > "Footmark" in "Customize > Overall > Content Information and Basic Settings".
Same as above
{block:AccFriend}
	<a href="{Url}"><img src="{ImgUrl}" alt="WOX friend" width="16" height="16"></a>
{/block:AccFriend}
The URL of the WOX friend list screen and the icon image URL. WOX Friend function can be set in "WOX Friend" which is set in "Accessories" of "Customize > Overall > Content Information and Basic Settings".
Same as above
{block:AccRss}
	<a href="{Url}"><img src="{ImgUrl}" alt="RSS" width="16" height="16"></a>
{/block:AccRss}
RSS feed URL and icon image URL. The RSS function can be set by "RSS" of "Accessory" of "Customize > Overall > Content Information and Basic Settings".
Same as above
{block:AccAdmin}
	<a href="{Url}"><img src="{ImgUrl}" alt="Management screen" width="16" height="16"></a>
{/block:AccAdmin}
It is a management screen URL and an icon image URL. The presence or absence of the display can be set in the "Administration screen" of "Accessories" in "Customize > Overall > Content information and basic settings".
{Counter}
{block:AccCounter}
	{Counter}
{/block:AccCounter}
Display counter. Whether or not to display can be set in "Accessories" of "Customize > Overall > Content information and basic settings".
{Analyzer}
{block:AccAnalyzer}
	{Analyzer}
{/block:AccAnalyzer}
Displays access analysis. The display can be set in "Accessories" of "Customize > Overall > Content Information and Basic Settings".

Time related variables

The following time variables are available in each service article (in loop variables).
Variable name Description example Output example Description
{YYYY} {YYYY} 2017 Displays the year (4-digit year).
{YY} {YY} 17 Displays the year (last two digits of the Christian era).
{Month} {Month} January Displays the month (full spelling).January to December
{ShortMonth} {ShortMonth} Jan Displays the month (abbreviated spelling).Jan to Dec
{M} {M} January Displays the month (number).1 to 12
{MM} {MM} 01 Displays the month (zero-padded numbers).01 to 12
{D} {D} 1 Displays the day.1 to 31
{DD} {DD} 01 Displays the day (zero-padded numbers).01 to 31
{H} {H} 1 Displays the time.0 to 23
{HH} {HH} 01 Displays the hour (24-hour units, zero-padded numbers).00 to 23
{H12} {H12} 1 Displays the hour (in units of 12 hours). 1 to 12
{HH12} {HH12} 01 Displays the hour (12-hour unit, zero-padded numbers).01 to 12
{II} {II} 01 Displays minutes.00 to 59
{SS} {SS} 01 Displays seconds.00 to 59
{WeekJa} {WeekJa}曜日 月曜日 Displays the day of the week (Japanese). 月 to 日
{Week} {Week} Monday Displays the day of the week (full spelling).Monday to Sunday
{W1} {W1} Mon Displays the day of the week (3 short abbreviations).Mon to Sun
{W2} {W2} Mo Displays the day of the week (two short spellings).Mo to Su
{W3} {W3} M Displays the day of the week (one short spelling).M to S

By combining these variables, you can display the post date and time of the article as shown below.
Example of variable combination description Output example
{YYYY}{MM}{DD}日({WeekJa}) {HH}:{II}:{SS} 2017年07月08日(土) 13:10:02
{YYYY}/{MM}/{DD}({W1}) {HH}:{II} 2017/07/08(Sat) 13:10

Variables that can be used in each plugin

Each plugin can also be described and displayed using variables. This manual describes the list of variables that can be used in the plugin.
See the following manual page for a basic description of the plugin.
User Manual > Service Common > Plugin
In addition, as a common rule of the plugin, it must be composed of the start variable {block:Plug plugin name} and the end variable {/block:Plug plugin name}.

Mini profile
Variable name Description Illustration
{PlugTitle} title
{block:PlugMiniProfile}
	<section>
		{block:PlugTitle}
			<h3>{PlugTitle}</h3>
		{/block:PlugTitle}
		{block:Image}
			<img src="{Url}" alt="profile" width="{Width}" height="{Height}">
		{/block:Image}
		{Body}
	</section>
{/block:PlugMiniProfile}
{Url} Image URL
{Width} Image width
{Height} Image height
{Body} Introduction

New article
Variable name Description Illustration
{PlugTitle} title
{block:PlugNewArticle}
	<section>
		{block:PlugTitle}
			<h3>{PlugTitle}</h3>
		{/block:PlugTitle}
		<ul>
			{loop:Article}
				<li><a href="{BaseUrl}/entry{No}.html#no{No}">{Title}</a>{block:ResNum} ({ResNum}){/block:ResNum}</li>
			{/loop:Article}
		</ul>
	</section>
{/block:PlugNewArticle}
{No}
* Not available for bookmarks
Article No
{Title}
* Not available for bookmarks
title
{ResNum}
* Not available for bookmarks
Replies
{Url}
* Bookmark only
URL
{SiteName}
* Bookmark only
Site name

New arrival less
Variable name Description Illustration
{PlugTitle} title
{block:PlugNewReply}
	<section>
		{block:PlugTitle}
			<h3>{PlugTitle}</h3>
		{/block:PlugTitle}
		<ul>
			{loop:Reply}
				{block:Reply}
					<li><a href="{BaseUrl}/entry{No}.html#rno{ResNo}">{Name}</a> ⇒ <a href="{BaseUrl}/entry{No}.html#no{No}">{Title}</a></li>
				{/block:Reply}
	 		{/loop:Reply}
		</ul>
	</section>
{/block:PlugNewReply}
{No} Article No
{ResNo} Reply No
{Name} Contributor name
{Title} Article title

Yearly Archive
Variable name Description Illustration
{PlugTitle} title
{block:PlugYearlyArchive}
	<section>
		{block:PlugTitle}
			<h3>{PlugTitle}</h3>
		{/block:PlugTitle}
		<ul>
			{loop:Archive}
				<li><a href="{BaseUrl}/{YYYY}.html">{YYYY}</a> ({ArticleNum})</li>
 			{/loop:Archive}
		</ul>
	</section>
{/block:PlugYearlyArchive}
{ArticleNum} Article count

Monthly archive
Variable name Description Illustration
{PlugTitle} title
{block:PlugMonthlyArchive}
	<section>
		{block:PlugTitle}
			<h3>{PlugTitle}</h3>
		{/block:PlugTitle}
		<ul>
			{loop:Archive}
				<li><a href="{BaseUrl}/{YYYY}-{MM}.html">{YYYY}.{MM}</a> ({ArticleNum})</li>
 			{/loop:Archive}
		</ul>
	</section>
{/block:PlugMonthlyArchive}
{ArticleNum} Article count

calendar
Variable name Description Illustration
{PlugTitle} title
{block:PlugCalendar}
	<section>
		{block:PlugTitle}
			<h3>{PlugTitle}</h3>
		{/block:PlugTitle}
		{Calendar}
	</section>
{/block:PlugCalendar}
{Calendar} calendar

In addition, the generated calendar has several classes and can be designed with CSS. The available CSS class names are: calendar table ".calendar", year and month part ".calendar-month", previous month mark ".calendar-back", next month mark ".calendar-next", week part Saturday color ".calendar-week-sat", Sunday color ".calendar-week-sun", Saturday color of day part ".calendar-day-sat", Sunday color ".calendar-day-sun", holiday color " .calendar-day-hol ", today's background color" .calendar-today ", and today's link part" .calendar-day-link ". For more details, please check the HTML source and customize.
The following is a CSS sample of the calendar, please use it on a custom basis.
CSS sample
.calendar {
	width: 100%;
	font-size: 1.6rem;
	text-align: center;
}
.calendar th {
	font-weight: normal;
	padding: 0 2px;
}
.calendar td {
	padding: 0 2px;
}
.calendar-month {

}
.calendar-week {

}
.calendar-week-sat {
	color: #00a0fb;
}
.calendar-week-sun {
	color: #ff3100;
}
.calendar-day {

}
.calendar-day-link {

}
.calendar-day-sat {
	color: #00a0fb;
}
.calendar-day-sun {
	color: #ff3100;
}
.calendar-day-hol {
	color: #ff3100;
}
.calendar-today {
	background: #ccc;
}
.calendar-day-link a:link,
.calendar-today a:link {
	text-decoration: underline;
}
.calendar-day-link a:visited,
.calendar-today a:visited {
	text-decoration: underline;
}
.calendar-day-link a:hover,
.calendar-today a:hover {
	text-decoration: underline;
}
.calendar-day-link a:active,
.calendar-today a:active {
	text-decoration: underline;
}

Friends list
Variable name Description Illustration
{PlugTitle} title
{block:PlugFriendsList}
	<section class="friend">
		{block:PlugTitle}
			<h3>{PlugTitle}</h3>
		{/block:PlugTitle}
		<ul class="flex">
			{loop:List}
				<li><a href="{UserPageUrl}"><img src="{UserImgUrl}" alt="{UserID}" width="64" height="64"></a></li>
			{/loop:List}
		</ul>
		{block:MoreLink}
			<div class="foot">
				<a href="{Url}">VIEW ALL</a>
			</div>
		{/block:MoreLink}
	</section>
{/block:PlugFriendsList}
{UserPageUrl} Friend user page URL
{UserID} Friend User ID
{UserImgUrl} Friend user image
{Url} View All URL

In addition, the following is a CSS sample of the friend list, please use it as a base when customizing.
CSS sample
#aside > section.friend > ul > li {
	margin: 0 0 0.8rem 0.8rem;
}
#aside > section.friend > ul > li:first-child {
	margin-left: 0;
}
#aside > section.friend > div.foot {
	margin-top: 0.8rem;
	font-size: 1.4rem;
	text-align: right;
}

Search form
Variable name Description Illustration
{PlugTitle} title
{block:PlugSearchForm}
	<section>
		{block:PlugTitle}
			<h3>{PlugTitle}</h3>
		{/block:PlugTitle}
		<form action="{Action}" method="{Method}">
			<input type="search" name="{NameValueSearch}" style="width:18rem;" required><button class="button inline search">Search</button>
		</form>
	</section>
{/block:PlugSearchForm}
{Action} action in form tag
{Method} method in form tag
{NameValueSearch} Name value of search input field

My Links
Variable name Description Illustration
{PlugTitle} title
{block:PlugMyLink}
	<section>
		{block:PlugTitle}
			<h3>{PlugTitle}</h3>
		{/block:PlugTitle}
		<ul>
			{loop:Link}
				<li><a href="{Url}">{Name}</a></li>
			{/loop:Link}
		</ul>
	</section>
{/block:PlugMyLink}
{Url} URL
{Name} Page name

Mini mail form
Variable name Description Illustration
General
{block:PlugMiniMailForm}
	<section>
		{block:PlugTitle}
			<h3>{PlugTitle}</h3>
		{/block:PlugTitle}
		<form action="{Action}" method="{Method}">
			{HiddenTag}
			
			{block:FormMes}
				<p class="message mb6">{FormMes}</p>
			{/block:FormMes}
			
			{block:Error}
				<div id="mini-mail-form-error" class="error mb6">
					<div class="head">Your input is incorrect</div>
					<ul>
						{loop:Message}
							<li>{Message}</li>
						{/loop:Message}
					</ul>
				</div>
				<script>window.onload = function() { scrollTo('#mini-mail-form-error'); }</script>
			{/block:Error}
			
			{block:Success}
				<p id="mini-mail-form-success" class="success">Submission completed</p>
				<script>window.onload = function() { scrollTo('#mini-mail-form-success','fadeOut'); }</script>
			{/block:Success}
			
			<p>
				<label for="mini-label-title" class="label">{LabelTitle}</label>
				<input type="text" name="{NameValueTitle}" id="mini-label-title" value="{FormValueTitle}">
			</p>
			<p>
				<label for="mini-label-name" class="label">{LabelName}</label>
				<input type="text" name="{NameValueName}" id="mini-label-name" value="{FormValueName}">
			</p>
			<p>
				<label for="mini-label-mail" class="label">{LabelMail}</label>
				<input type="text" name="{NameValueMail}" id="mini-label-mail" value="{FormValueMail}">
			</p>
			<p>
				<label for="mini-label-comment" class="label">{LabelComment}</label>
				<textarea name="{NameValueComment}" id="mini-label-comment" style="height:12rem;">{FormValueComment}</textarea>
			</p>
			<p>
				<label for="mini-label-captcha" class="label">{LabelCaptcha}<img src="{CaptchaImageUrl}" class="captcha-img"></label>
				<input type="text" name="{NameValueCaptcha}" id="mini-label-captcha" value="{FormValueCaptcha}">
			</p>
			<p>
				<label class="label">
					<input type="checkbox" name="{NameValueCookie}" id="mini-input-cookie" class="checkbox" value="{FormValueCookie}"{CheckedCookie}>
					<span id="mini-label-cookie">{LabelCookie}</span>
				</label>
			</p>
			<button class="button">Submit</button>
		</form>
	</section>
	
	<script>
		//Validate		
		{block:RequiredTitle}
			$('label[for="mini-label-title"]').addClass('required');
			$('#mini-label-title').attr('required', 'true');
		{/block:RequiredTitle}
		
		{block:RequiredName}
			$('label[for="mini-label-name"]').addClass('required');
			$('#mini-label-name').attr('required', 'true');
		{/block:RequiredName}
		
		{block:RequiredMail}
			$('label[for="mini-label-mail"]').addClass('required');
			$('#mini-label-mail').attr('required', 'true');
		{/block:RequiredMail}
		
		{block:RequiredComment}
			$('label[for="mini-label-comment"]').addClass('required');
			$('#mini-label-comment').attr('required', 'true');
		{/block:RequiredComment}
		
		{block:RequiredCaptcha}
			$('label[for="mini-label-captcha"]').addClass('required');
			$('#mini-label-captcha').attr('required', 'true');
		{/block:RequiredCaptcha}
		
		{block:RequiredCookie}
			$('#mini-label-cookie').addClass('required');
			$('#mini-input-cookie').attr('required', 'true');
		{/block:RequiredCookie}
	</script>
{/block:PlugMiniMailForm}
{PlugTitle} title
{Action} action in form tag
{Method} method in form tag
{HiddenTag} Hidden tag for system
{FormMes} message
{Message} Error message
{CaptchaImageUrl} Image URL for image authentication
label
{LabelName} Name label
{LabelTitle} Title label
{LabelMail} Email label
{LabelComment} Comment label
{LabelCookie} Cookie label
{LabelCaptcha} Image authentication label
name value
{NameValueName} Name value in the name input field
{NameValueTitle} Name value of title input field
{NameValueMail} Name value in the email input field
{NameValueComment} Name value of comment input field
{NameValueCookie} Cookie checkbox name value
{NameValueCaptcha} Name value of image authentication input field
Values remaining in the form due to errors or cookies
{FormValueName} Value remaining in name input field
{FormValueTitle} Value remaining in title input field
{FormValueMail} Value remaining in email input field
{FormValueComment} Value remaining in comment input field
{FormValueCookie} Cookie sent value
{CheckedCookie} Cookie checkbox state
{FormValueCaptcha} Value remaining in image authentication input field
Used only with block variables
{block:Success}
{/block:Success}
Successful transmission block
{block:RequiredTitle}
{/block:RequiredTitle}
Required title block
{block:RequiredName}
{/block:RequiredName}
Required name block
{block:RequiredMail}
{/block:RequiredMail}
Required block for email address
{block:RequiredComment}
{/block:RequiredComment}
Required block for comments
{block:RequiredCaptcha}
{/block:RequiredCaptcha}
Required block for image authentication
{block:RequiredCookie}
{/block:RequiredCookie}
Required cookie block

Post form
Variable name Description Illustration
General
{block:PlugSubmitForm}

	{block:FormTitle}
		<h2 id="form" class="h3">{FormTitle}</h2>
	{/block:FormTitle}
	
	{block:FormMes}
		<p class="message mb5">{FormMes}</p>
	{/block:FormMes}

	{block:Success}
		<p id="submit-form-success" class="success mb5">Submission completed</p>
		<script>window.onload = function() { scrollTo('#submit-form-success','fadeOut'); }</script>
	{/block:Success}
	
	<form action="{Action}" method="{Method}" enctype="{Enctype}">
		{HiddenTag}
		
		{block:Error}
			<div id="submit-form-error" class="error mb6">
				<div class="head">Your input is incorrect</div>
				<ul>
					{loop:Message}
						<li>{Message}</li>
					{/loop:Message}
				</ul>
			</div>
			<script>window.onload = function() { scrollTo('#submit-form-error'); }</script>
		{/block:Error}
		
		
		<!--New submission form-->
		{block:New}
			<!--name-->
			<p>
				<label for="label-name" class="label">{LabelName}</label>
				<input type="text" name="{NameValueName}" id="label-name" value="{FormValueName}">
			</p>
			<!--Email-->
			<p>
				<label for="label-mail" class="label">{LabelMail}</label>
				<input type="email" name="{NameValueMail}" id="label-mail" value="{FormValueMail}">
			</p>
			<!--home-->
			<p>
				<label for="label-home" class="label">{LabelHome}</label>
				<input type="url" name="{NameValueHome}" id="label-home" value="{FormValueHome}">
			</p>
			<!--File-->
			<p>
				<label for="label-file" class="label">{LabelFile}</label>
				<input type="file" name="{NameValueFile}" id="label-file" value="">
			</p>
			<!--Character wrap-->
			<p>
				<span id="label-float" class="label">{LabelFloat}</span>
				{loop:PlugSubmitFormFloatRadio}
					<label class="float{Value}"><input type="radio" name="{NameValueFloat}" value="{Value}"{Checked}><span>{Name}</span></label>
				{/loop:PlugSubmitFormFloatRadio}
			</p>
			<!--comment-->
			<p>
				<label for="label-comment" class="label">{LabelComment}</label>
				<textarea name="{NameValueComment}" id="label-comment">{FormValueComment}</textarea></p>
			<div class="flex foot">
				<!--edit key-->
				<p>
					<label for="label-editkey" class="label">{LabelEditKey}</label>
					<input type="text" name="{NameValueEditKey}" id="label-editkey" value="{FormValueEditKey}">
				</p>
				<!--Captcha-->
				{block:Captcha}
					<p>
						<label for="label-captcha" class="label">{LabelCaptcha}<img src="{CaptchaImageUrl}" class="captcha-img"></label>
						<input type="text" name="{NameValueCaptcha}" id="label-captcha" value="{FormValueCaptcha}">
					</p>
				{/block:Captcha}
				<!--cookie-->
				<p>
					<label class="label">
						<input type="checkbox" name="{NameValueCookie}" id="input-cookie" class="checkbox" value="{FormValueCookie}"{CheckedCookie}>
						<span id="label-cookie">{LabelCookie}</span>
					</label>
				</p>
			</div>
			
			<script>
				//Validate				
				{block:RequiredName}
					$('label[for="label-name"]').addClass('required');
					$('#label-name').attr('required', 'true');
				{/block:RequiredName}
				
				{block:RequiredMail}
					$('label[for="label-mail"]').addClass('required');
					$('#label-mail').attr('required', 'true');
				{/block:RequiredMail}
		
				{block:RequiredHome}
					$('label[for="label-home"]').addClass('required');
					$('#label-home').attr('required', 'true');
				{/block:RequiredHome}
				
				{block:RequiredFile}
					$('label[for="label-file"]').addClass('required');
					$('#label-file').attr('required', 'true');
				{/block:RequiredFile}
				
				{block:RequiredFloat}
					$('#label-float').addClass('required');
				{/block:RequiredFloat}
				
				{block:RequiredComment}
					$('label[for="label-comment"]').addClass('required');
					$('#label-comment').attr('required', 'true');
				{/block:RequiredComment}
				
				{block:RequiredEditKey}
					$('label[for="label-editkey"]').addClass('required');
					$('#label-editkey').attr('required', 'true');
				{/block:RequiredEditKey}
				
				{block:RequiredCaptcha}
					$('label[for="label-captcha"]').addClass('required');
					$('#label-captcha').attr('required', 'true');
				{/block:RequiredCaptcha}
				
				{block:RequiredCookie}
					$('#label-cookie').addClass('required');
					$('#input-cookie').attr('required', 'true');
				{/block:RequiredCookie}
			</script>
		{/block:New}
		
		
		<!--Reply form-->
		{block:Res}
			<!--name-->
			<p>
				<label for="label-name" class="label">{LabelName}</label>
				<input type="text" name="{NameValueName}" id="label-name" value="{FormValueName}">
			</p>
			<!--Email-->
			<p>
				<label for="label-mail" class="label">{LabelMail}</label>
				<input type="email" name="{NameValueMail}" id="label-mail" value="{FormValueMail}">
			</p>
			<!--home-->
			<p>
				<label for="label-home" class="label">{LabelHome}</label>
				<input type="url" name="{NameValueHome}" id="label-home" value="{FormValueHome}">
			</p>
			<!--comment-->
			<p>
				<label for="label-comment" class="label">{LabelComment}</label>
				<textarea name="{NameValueComment}" id="label-comment">{FormValueComment}</textarea>
			</p>
			<div class="flex foot">
				<!--edit key-->
				<p>
					<label for="label-editkey" class="label">{LabelEditKey}</label>
					<input type="text" name="{NameValueEditKey}" id="label-editkey" value="{FormValueEditKey}">
				</p>
				<!--Captcha-->
				{block:Captcha}
					<p>
						<label for="label-captcha" class="label">{LabelCaptcha}<img src="{CaptchaImageUrl}" class="captcha-img"></label>
						<input type="text" name="{NameValueCaptcha}" id="label-captcha" value="{FormValueCaptcha}">
					</p>
				{/block:Captcha}
				<!--cookie-->
				<p>
					<label class="label">
						<input type="checkbox" name="{NameValueCookie}" id="input-cookie" class="checkbox" value="{FormValueCookie}"{CheckedCookie}>
						<span id="label-cookie">{LabelCookie}</span>
					</label>
				</p>
			</div>
			
			<script>
				//Validate				
				{block:RequiredName}
					$('label[for="label-name"]').addClass('required');
					$('#label-name').attr('required', 'true');
				{/block:RequiredName}
				
				{block:RequiredMail}
					$('label[for="label-mail"]').addClass('required');
					$('#label-mail').attr('required', 'true');
				{/block:RequiredMail}
		
				{block:RequiredHome}
					$('label[for="label-home"]').addClass('required');
					$('#label-home').attr('required', 'true');
				{/block:RequiredHome}
				
				{block:RequiredComment}
					$('label[for="label-comment"]').addClass('required');
					$('#label-comment').attr('required', 'true');
				{/block:RequiredComment}
				
				{block:RequiredEditKey}
					$('label[for="label-editkey"]').addClass('required');
					$('#label-editkey').attr('required', 'true');
				{/block:RequiredEditKey}
				
				{block:RequiredCaptcha}
					$('label[for="label-captcha"]').addClass('required');
					$('#label-captcha').attr('required', 'true');
				{/block:RequiredCaptcha}
				
				{block:RequiredCookie}
					$('#label-cookie').addClass('required');
					$('#input-cookie').attr('required', 'true');
				{/block:RequiredCookie}
			</script>
			
		{/block:Res}
		<button class="button">Submit</button>
	</form>
{/block:PlugSubmitForm}
{FormTitle} title
{FormMes} message
{Action} action in form tag
{Method} method in form tag
{Enctype} enctype in form tag
{HiddenTag} Hidden tag for system
{Message} Error message
Form type block
{block:New}
{/block:New}
Block new submission form
{block:Res}
{/block:Res}
Block reply form
label
{LabelName} Name label
{LabelTitle} Title label
{LabelMail} Email label
{LabelHome} Home label
{LabelFile} File label
{LabelFloat} Text wrap label
{LabelEditKey} Edit key label
{LabelCookie} Cookie label
{LabelFree1}
to
{LabelFree6}
Labels for free items 1 to 6
{LabelComment} Comment label
{LabelCaptcha} Image authentication label
{LabelPostKey} Post key label
{LabelCategory}
* Can be used only within the block of the new submission form
Category label
name value
{NameValueName} Name value in the name input field
{NameValueTitle} Name value of title input field
{NameValueMail} Name value in the email input field
{NameValueHome} Name value of home input field
{NameValueFile} Name value of file input field
{NameValueFloat} Name value for character wrap selection
{NameValueEditKey} Name value in edit key entry field
{NameValueCookie} Cookie checkbox name value
{NameValueFree1}
to
{NameValueFree6}
Name value of free field 1 to 6 input field
{NameValueComment} Name value of comment input field
{NameValueCaptcha} Name value of image authentication input field
{NameValuePostKey} Post key name value
{NameValueCategory}
* Can be used only within the block of the new submission form
Category name value
Values remaining in the form due to errors or cookies
{FormValueTitle} Value remaining in title input field
{FormValueName} Value remaining in name input field
{FormValueMail} Value remaining in email input field
{FormValueHome} Value left in home input field
{FormValueEditKey} Value remaining in edit key entry field
{FormValueCookie} Cookie sent value
{CheckedCookie} Cookie checkbox state
{FormValueFree1}
to
{FormValueFree6}
Value remaining in the input fields for free items 1 to 6
{FormValueComment} Value remaining in comment input field
{FormValueCaptcha} Value remaining in image authentication input field
{CaptchaImageUrl} Image URL for image authentication
{FormValuePostKey} Value remaining in post key field
Used only with block variables
{block:Success}
{/block:Success}
Successful transmission block
{block:RequiredTitle}
{/block:RequiredTitle}
Required title block
{block:RequiredName}
{/block:RequiredName}
Required name block
{block:RequiredMail}
{/block:RequiredMail}
Required block for email address
{block:RequiredHome}
{/block:RequiredHome}
Home required block
{block:RequiredFile}
{/block:RequiredFile}
Required file block
{block:RequiredFloat}
{/block:RequiredFloat}
Required block for character wrap selection
{block:RequiredFree1}
{/block:RequiredFree1}

to
{block:RequiredFree6}
{/block:RequiredFree6}
Mandatory designated blocks for free items 1 to 6
{block:RequiredComment}
{/block:RequiredComment}
Required block for comments
{block:RequiredPostKey}
{/block:RequiredPostKey}
Required block for post key
{block:RequiredEditKey}
{/block:RequiredEditKey}
Mandatory block for edit key
{block:RequiredCaptcha}
{/block:RequiredCaptcha}
Required block for image authentication
{block:RequiredCookie}
{/block:RequiredCookie}
Required cookie block
{block:RequiredCategory}
{/block:RequiredCategory}

* Can be used only within the block of the new submission form
Mandatory block for category
What to use in select and radio
{No} Numbering of elements in loop
{Value} Sent value
{Name} Select element
{Selected} Selection state remaining in the select element due to errors, cookies, etc.
{Checked} Selection state remaining in the radio element due to errors, cookies, etc.
These variables can be used in the loop variables of "Category, character wrap, free items 1 to 6", and each loop variable is as follows.

Categories(* Can be used only within the block of the new submission form)
[For select element]
{loop:PlugSubmitFormCategorySelect}
{/loop:PlugSubmitFormCategorySelect}


[For a radio element]
{loop:PlugSubmitFormCategoryRadio}
{/loop:PlugSubmitFormCategoryRadio}


Character wrap
[For select element]
{loop:PlugSubmitFormFloatSelect}
{/loop:PlugSubmitFormFloatSelect}


[For a radio element]
{loop:PlugSubmitFormFloatRadio}
{/loop:PlugSubmitFormFloatRadio}


Free items 1 to 6
[For select element]
{loop:PlugSubmitFormFree1Select}
{/loop:PlugSubmitFormFree1Select}

to
{loop:PlugSubmitFormFree6Select}
{/loop:PlugSubmitFormFree6Select}


[For a radio element]
{loop:PlugSubmitFormFree1Radio}
{/loop:PlugSubmitFormFree1Radio}

to
{loop:PlugSubmitFormFree6Radio}
{/loop:PlugSubmitFormFree6Radio}

The following is an installation example of elements that do not exist in the actual example, please refer to it.
Category installation example
(1) A category select form is set in the new post form {block:New}.
{block:Category} <p> <label for="label-category" class="label">{LabelCategory}</label> <select name="{NameValueCategory}" id="label-category"> {loop:PlugSubmitFormCategorySelect} <option value="{Value}"{Selected}>{Name}</option> {/loop:PlugSubmitFormCategorySelect} </select> </p> {/block:Category}
(2) Write the following description for validation in <script> of {block:New}.
{block:RequiredCategory} $('label[for="label-category"]').addClass('required'); {/block:RequiredCategory}

Post key installation example
(1) A post key entry field is set in the new post form {block:New}. (Same procedure for reply form)
{block:PostKey} <p> <label for="label-postkey" class="label">{LabelPostKey}</label> <input type="text" name="{NameValuePostKey}" id="label-postkey" value="{FormValuePostKey}"> </p> {/block:PostKey}
(2) Write the following description for validation in <script> of {block:New}. (Same procedure for reply form)
{block:RequiredPostKey} $('label[for="label-postkey"]').addClass('required'); $('#label-postkey').attr('required', 'true'); {/block:RequiredPostKey}

* If a syntax error is displayed during setting, check the following.
(1) Temporarily switch to "Normal" in "Preferences> Customize mode switch".
(2) If the item you want to use in "New Post Form Layout" of "Detailed Settings> Post Form" is unused, move it to "Top" or "Bottom" and save the settings.
(3) Return to “Pro mode” by “Preferences> Customize mode switch”.
In Pro mode, it is designed to ignore items that are "unused", so such a procedure is necessary in advance.

comment
The comment plugin is divided into a {block:PlugCommentForm} to {/block:PlugCommentForm} block, which is the comment form part, and a {block:PlugComment} to {/block:PlugComment} block, which is the posted comment article part.
Variable name Description Illustration
Form part:General
{block:PlugCommentForm}
	<section id="comment-form" class="mb2 mt2">

		{block:FormTitle}
			<h3>{FormTitle}</h3>
		{/block:FormTitle}
		
		<form action="{Action}" method="{Method}">
			{HiddenTag}

			{block:FormMes}
				<p class="message mb6">{FormMes}</p>
			{/block:FormMes}
						
			{block:Error}
				<div id="comment-error" class="error mb6">
					<div class="head">Your input is incorrect</div>
					<ul>
						{loop:Message}
							<li>{Message}</li>
						{/loop:Message}
					</ul>
				</div>
				<script>window.onload = function() { scrollTo('#comment-error'); }</script>
			{/block:Error}
	
			{block:Success}
				<p id="comment-success" class="success">Submission completed</p>
				<script>window.onload = function() { scrollTo('#comment-success','fadeOut'); }</script>
			{/block:Success}

			<p>
				<label for="label-name" class="label">{LabelName}</label>
				<input type="text" name="{NameValueName}" id="label-name" value="{FormValueName}">
			</p>
			<p>
				<label for="label-comment" class="label">{LabelComment}</label>
				<textarea name="{NameValueComment}" id="label-comment">{FormValueComment}</textarea>
			</p>
			
			<div class="flex foot">
				<p>
					<label for="label-editkey" class="label">{LabelEditKey}</label>
					<input type="text" name="{NameValueEditKey}" id="label-editkey" value="{FormValueEditKey}">
				</p>
				{block:Captcha}
					<p>
						<label for="label-captcha" class="label">{LabelCaptcha}<img src="{CaptchaImageUrl}" class="captcha-img"></label>
						<input type="text" name="{NameValueCaptcha}" id="label-captcha" value="{FormValueCaptcha}">
					</p>
				{/block:Captcha}
				<p>
					<label class="label">
						<input type="checkbox" name="{NameValueCookie}" id="input-cookie" class="checkbox" value="{FormValueCookie}"{CheckedCookie}>
						<span id="label-cookie">{LabelCookie}</span>
					</label>
				</p>
			</div>

			<button class="button">Submit</button>
		</form>
	</section>
	
	<script>
		//Validate		
		{block:RequiredName}
			$('label[for="label-name"]').addClass('required');
			$('#label-name').attr('required', 'true');
		{/block:RequiredName}
		
		{block:RequiredComment}
			$('label[for="label-comment"]').addClass('required');
			$('#label-comment').attr('required', 'true');
		{/block:RequiredComment}
		
		{block:RequiredEditKey}
			$('label[for="label-editkey"]').addClass('required');
			$('#label-editkey').attr('required', 'true');
		{/block:RequiredEditKey}
		
		{block:RequiredCaptcha}
			$('label[for="label-captcha"]').addClass('required');
			$('#label-captcha').attr('required', 'true');
		{/block:RequiredCaptcha}
		
		{block:RequiredCookie}
			$('#label-cookie').addClass('required');
			$('#input-cookie').attr('required', 'true');
		{/block:RequiredCookie}
	</script>
	
{/block:PlugCommentForm}

{block:PlugComment}
	<section id="comment">
		{block:PlugTitle}
			<h3>{PlugTitle}</h3>
		{/block:PlugTitle}
		{loop:Comment}
			{block:Comment}
				<div id="rno{ResNo}" class="section mbs5">
					{Body}
					<ul class="foot flex right">
						<li>{block:Name}{Name}{/block:Name}</li>
						<li><time datetime="{YYYY}-{MM}-{DD} {HH}:{II}">{YYYY}/{MM}/{DD} {HH}:{II}</time></li>
						<li><a href="{BaseUrl}/?mode=edit&no={No}&rno={ResNo}#comment-form" class="edit" rel="nofollow"><span>Edit</span></a></li>
						<li><a href ="{BaseUrl}/?pagename=delRes&no={No}&rno={ResNo}" class="del modal-open" rel="nofollow"><span>Delete</span></a></li>					
					</ul>
				</div>
			{/block:Comment}
		{/loop:Comment}
	</section>
{/block:PlugComment}
{FormTitle} title
{FormMes} message
{Action} action in form tag
{Method} method in form tag
{HiddenTag} Hidden tag for system
{Message} Error message
Form part:label
{LabelName} Name label
{LabelTitle} Title label
{LabelMail} Email label
{LabelHome} Home label
{LabelEditKey} Edit key label
{LabelCookie} Cookie label
{LabelFree1}
to
{LabelFree3}
Labels for free items 1 to 3
{LabelRate}
* Available only at Novell Gallery
Rating label
{LabelComment} Comment label
{LabelCaptcha} Image authentication label
{LabelPostKey} Post key label
Form part:name value
{NameValueName} Name value in the name input field
{NameValueTitle} Name value of title input field
{NameValueMail} Name value in the email input field
{NameValueHome} Name value of home input field
{NameValueEditKey} Name value in edit key entry field
{NameValueCookie} Cookie checkbox name value
{NameValueFree1}
to
{NameValueFree3}
Name value of free field 1 to 3 input field
{NameValueRate}
* Available only at Novell Gallery
Evaluation name value
{NameValueComment} Name value of comment input field
{NameValueCaptcha} Name value of image authentication input field
{NameValuePostKey} Post key name value
Form part:Values remaining in the form due to errors or cookies
{FormValueName} Value remaining in name input field
{FormValueTitle} Value remaining in title input field
{FormValueMail} Value remaining in email input field
{FormValueHome} Value left in home input field
{FormValueEditKey} Value remaining in edit key entry field
{FormValueCookie} Cookie sent value
{CheckedCookie} Cookie checkbox state
{FormValueFree1}
to
{FormValueFree3}
Values remaining in the input fields for free items 1 to 3
{FormValueRate}
* Available only at Novell Gallery
Value remaining in the evaluation column
{FormValueComment} Value remaining in comment input field
{FormValueCaptcha} Value remaining in image authentication input field
{CaptchaImageUrl} Image URL for image authentication
{FormValuePostKey} Value remaining in post key field
Form part:Used only with block variables
{block:Success}
{/block:Success}
Successful transmission block
{block:RequiredTitle}
{/block:RequiredTitle}
Required title block
{block:RequiredName}
{/block:RequiredName}
Required name block
{block:RequiredMail}
{/block:RequiredMail}
Required block for email address
{block:RequiredHome}
{/block:RequiredHome}
Home required block
{block:RequiredFree1}
{/block:RequiredFree1}

to
{block:RequiredFree3}
{/block:RequiredFree3}
Required block for free items 1 to 3
{block:RequiredRate}
{/block:RequiredRate}

* Available only at Novell Gallery
Required block for evaluation
{block:RequiredComment}
{/block:RequiredComment}
Required block for comments
{block:RequiredPostKey}
{/block:RequiredPostKey}
Required block for post key
{block:RequiredEditKey}
{/block:RequiredEditKey}
Mandatory block for edit key
{block:RequiredCaptcha}
{/block:RequiredCaptcha}
Required block for image authentication
{block:RequiredCookie}
{/block:RequiredCookie}
Required cookie block
Form part:What to use in select and radio
{No} Numbering of elements in loop
{Value} Sent value
{Name} Select element
{Selected} Selection state remaining in the select element due to errors, cookies, etc.
{Checked} Selection state remaining in the radio element due to errors, cookies, etc.
These variables can be used in the "free items 1-3, evaluation" loop variables, and each loop variable is as follows.

Free items 1 to 3
[For select element]
{loop:PlugCommentFormFree1Select}
{/loop:PlugCommentFormFree1Select}

to
{loop:PlugCommentFormFree3Select}
{/loop:PlugCommentFormFree3Select}


[For a radio element]
{loop:PlugCommentFormFree1Radio}
{/loop:PlugCommentFormFree1Radio}

to
{loop:PlugCommentFormFree3Radio}
{/loop:PlugCommentFormFree3Radio}


Evaluation(* Available only for Novell Gallery and select element)
{loop:PlugCommentFormRateSelect}
{/loop:PlugCommentFormRateSelect}
Comment part
{PlugTitle} Plugin title
{Name} name
{Title} title
{Home} home
{Mail} Email
{Free1}
to
{Free3}
Free items 1 to 3
{Rate}
* Available only at Novell Gallery
Evaluation
{ResNo} Comment No
{No} Article No
{Body} comment

Categories
Variable name Description Illustration
{PlugTitle} title
{block:PlugCategory}
	<section>
		{block:PlugTitle}
			<h3>{PlugTitle}</h3>
		{/block:PlugTitle}
		<ul>
			{loop:Category}
				<li><a href="{BaseUrl}/cate{Id}.html">{Name}</a> ({ArticleNum})</li>
	 		{/loop:Category}
		</ul>
	</section>
{/block:PlugCategory}
{Id} Category ID
{Name} Category name
{ArticleNum} number

Free area 1 to 6
The free area 1 is {block:PlugFreeArea1} to {/block:PlugFreeArea1}, the free area 2 is {block:PlugFreeArea2} to {/block:PlugFreeArea2}, etc. Please change.
Variable name Description Illustration
{PlugTitle} title
{block:PlugFreeArea1}
	<section>
		{block:PlugTitle}
			<h3>{PlugTitle}</h3>
		{/block:PlugTitle}
		{Contents}
	</section>
{/block:PlugFreeArea1}
{Contents} Content

image
Variable name Description Illustration
{Url} Image URL
{block:PlugImage}
	<img src="{Url}" alt="Top image" class="pict">
{/block:PlugImage}
{Width} Image width
{Height} Image height

Variables that can be used on subpages

Here are the variables that can be used in each setting of "Customize > Overall > Subpage".

Footmark
Variables that can be used on footmark pages.
Variable name Description Illustration
{FootMarkMax} Number of footmark displayed
<p class="message">
	The last {FootMarkMax} visits.	{block:InfoMes}<br>{InfoMes}{/block:InfoMes}
</p>
{block:FootMark}
	<ul class="mt5">
		{loop:FootMark}
			<li>
				<time datetime="{YYYY}-{MM}-{DD} {HH}:{II}">{YYYY}/{MM}/{DD} {HH}:{II}</time><a href="{UserPageUrl}" class="user">{UserID}</a><a href="{UserContentUrl}"><img src="{ServiceBaseUrl}/site/img/service/{UserUseService}.svg" alt="{UserUseService}" width="24" height="24"></a>
			</li>
		{/loop:FootMark}
	</ul>
{/block:FootMark}
{InfoMes} Top comment
{UserID} Visitor user ID
{UserPageUrl} Visitor user page URL
{UserUseService} Visitor service
{UserContentUrl} Visitor Content URL

List of WOX friends
Variables that can be used on the WOX Friends list page.
Variable name Description Illustration
{NumberOfUnapproved} Number of unauthenticated friends
{block:NumberOfUnapproved}
	<p class="message mb5">
		You have {NumberOfUnapproved} friends pending approval.<br>
		Please perform the approval work <a href="{ApprovalUrl}">here</a>.<br>
		* This message is displayed only to content managers.		
	</p>
{/block:NumberOfUnapproved}

<p class="message mb5">
	{block:InfoMes}{InfoMes}<br>{/block:InfoMes}
	Click <a href="{AddFriendUrl}" rel="nofollow">here</a> to request a friend.
</p>

{block:Friend}
	<ul class="flex friend">
		{loop:Friend}
			<li><a href="{UserPageUrl}"><img src="{UserImgUrl}" alt="{UserID}" width="64" height="64"><br>{UserID}</a></li>
		{/loop:Friend}
	</ul>
	{block:Pager}
		<ul class="pager flex mt2">
			{block:PreviousPage}<li><a href="{PreviousPageUrl}">&#8810; Previous page</a></li>{/block:PreviousPage}
			{block:NextPage}<li><a href="{NextPageUrl}">Following page &#8811;</a></li>{/block:NextPage}
		</ul>
	{/block:Pager}
{/block:Friend}
{ApprovalUrl} URL of friend approval page
{InfoMes} Top comment
{AddFriendUrl} URL of friend request page
{UserPageUrl} Friend user page URL
{UserID} Friend User ID
{UserImgUrl} Friend user image
{PreviousPageUrl} Previous page URL
{NextPageUrl} Next page URL

WOX friend application
It is a variable that can be used on the WOX friend application page.
Variable name Description Illustration
{InfoMes} Top comment
{block:InfoMes}
	<p class="message mb5">{InfoMes}</p>
{/block:InfoMes}
{block:Success}
	<p id="friend-form-success" class="success mb5">Submission completed</p>
	<script>window.onload = function() { scrollTo('#friend-form-success','fadeOut'); }</script>
{/block:Success}
<form action="{Action}" method="{Method}">
	{HiddenTag}
	{block:Error}
		<div id="friend-form-error" class="error mb6">
			<div class="head">Your input is incorrect</div>
			<ul>
				{loop:Message}
					<li>{Message}</li>
				{/loop:Message}
			</ul>
		</div>
		<script>window.onload = function() { scrollTo('#friend-form-error'); }</script>
	{/block:Error}
	<p>
		<label for="label-comment" class="label">message</label>
		<textarea name="{NameValueComment}" id="label-comment" required></textarea>
	</p>
	<button class="button">Apply for a Friend</button>
</form>
{block:Success}
{/block:Success}
Successful transmission block
{Action} action in form tag
{Method} method in form tag
{HiddenTag} Hidden tag for system
{Message} Error message
{NameValueComment} Name value of comment input field

Delete parent and child articles
It is a variable that can be used on the screen to delete parent articles and child articles used in bulletin boards etc.
Variable name Description Illustration
{block:Success}
{/block:Success}
Successful transmission block
{block:Success}
	<script>
		//Fade out modal and overlay		
		window.parent.$('.modal-content').fadeOut('slow');
		window.parent.$('.modal-overlay').fadeOut('slow',function(){
			window.parent.$('.modal-overlay').remove();
		});
		//Fade out article		
		//For parent articles		
		{block:Parent}
			parent.$('#no{No}').fadeOut(1000);
		{/block:Parent}
		//For child articles		
		{block:Child}
			parent.$('#no{No}-rno{ResNo}').fadeOut(1000);
		{/block:Child}
	</script>
{/block:Success}

<form action="{Action}" method="{Method}">
	{HiddenTag}
	{block:Error}
		<div class="error-single">{Message}</div>
	{/block:Error}
	<p>
		Enter edit key<br>
		<input type="text" name="{NameValueEditKey}" required>
	</p>
	<button class="button">Delete</button>
</form>
{block:Parent}
{/block:Parent}
Block successful transmission from parent article
{block:Child}
{/block:Child}
Successful block from child article
{No} Parent article number of reply article to be deleted
{ResNo} Reply No to delete
{Action} action in form tag
{Method} method in form tag
{HiddenTag} Hidden tag for system
{Message} Error message
{NameValueEditKey} Name value in edit key entry field

Delete comment
It is a variable that can be used on the comment deletion screen of blogs etc.
Variable name Description Illustration
{block:Success}
{/block:Success}
Successful transmission block
{block:Success}
	<script>
		//Fade out modal and overlay		
		window.parent.$('.modal-content').fadeOut('slow');
		window.parent.$('.modal-overlay').fadeOut('slow',function(){
			window.parent.$('.modal-overlay').remove();
		});
		//Fade out article		
		parent.$('#rno{ResNo}').fadeOut(1000);
	</script>
{/block:Success}

<form action="{Action}" method="{Method}">
	{HiddenTag}
	{block:Error}
		<div class="error-single">{Message}</div>
	{/block:Error}
	<p>
		Enter edit key<br>
		<input type="text" name="{NameValueEditKey}" required>
	</p>
	<button class="button">Delete</button>
</form>
{No} Parent article number of reply article to be deleted
{ResNo} Reply No to delete
{Action} action in form tag
{Method} method in form tag
{HiddenTag} Hidden tag for system
{Message} Error message
{NameValueEditKey} Name value in edit key entry field

Authentication
This is a variable that can be used on the page displayed when the publishing level is set to other than the entire Internet in "Preferences > Security > Content Publishing Settings".
Variable name Description Illustration
{InfoMes} Message displayed at the time of restriction
<h2 class="h3">Restricted</h2>
<p class="message">{InfoMes}</p>

{block:PwForm}
	<form action="{Action}" method="{Method}">
		{HiddenTag}
		{block:Error}
			<div id="pw-form-error" class="error-single mb6">{Message}</div>
			<script>window.onload = function() { scrollTo('#pw-form-error'); }</script>
		{/block:Error}
		<p>
			<label for="label-pw" class="label">password</label>
			<input type="password" name="{NameValuePw}" id="label-pw" required>
		</p>
		<p>
			<label class="label">
				<input type="checkbox" name="{NameValueAutoLogin}" class="checkbox" value="{FormValueAutoLogin}">
				Automatic login from next time			</label>
			<span class="cookie-mes">
				You can stay logged in for up to two weeks.<br>
				Uncheck the check box for shared PCs.			</span>
		</p>
		<button class="button">Authentication</button>
	</form>
{/block:PwForm}
{Action} action in form tag
{Method} method in form tag
{HiddenTag} Hidden tag for system
{Message} Error message
{NameValuePw} Name value in the password input field
{NameValueAutoLogin} Auto login name value
{FormValueAutoLogin} Auto Login Sent Value

error
Variables that can be used on error pages such as 404 Not Found.
Variable name Description Illustration
{ErrorMessage} Error message
<article>
	<h2 class="error-single">{PageTitle}</h2>
	{ErrorMessage}
</article>

Variables that can be used for each service

Here are the variables that can be used in each service.

Homepage (TOP)
This variable can be used in the update history of the homepage TOP.
Variable name Description Illustration
{Body} Article Text
{block:MainArticle}
	{loop:Article}
		<article class="mbs2">
			<h2><time datetime="{YYYY}-{MM}-{DD}">{YYYY}/{MM}/{DD}({W1})</time></h2>
			{Body}
		</article>
	{/loop:Article}
{/block:MainArticle}
{No} Article No

blog
Variables that can be used in blogs.
Variable name Description Illustration
{No} Article No
{block:MainArticle}
	{loop:Article}
		<article id="no{No}" class="mbs2">
			<header>
				<h2><a href="{BaseUrl}/entry{No}.html">{Title}</a></h2>
				<time datetime="{YYYY}-{MM}-{DD} {HH}:{II}">{YYYY}/{MM}/{DD}({W1}) {HH}:{II}</time>
			</header>
			
			{Body}
			
			{block:MoreBody}
				<p id="more{No}" class="mt5">{MoreBody}</p>
			{/block:MoreBody}
			
			{block:MoreLink}
				<p><a href="{BaseUrl}/entry{No}.html#more{No}">read more</a></p>
			{/block:MoreLink}
			
			{block:BodyPwForm}
				<form action="{Action}" id="limit{No}" method="{Method}">
					{HiddenTag}
					{block:Error}
						<p class="error-single">{Message}</p>
						<script>window.onload = function() { scrollTo('#limit{No}'); }</script>
					{/block:Error}
 						<input type="password" name="{NameValuePw}" style="width:18rem;" required><button class="button inline">Authentication</button>
				</form>
			{/block:BodyPwForm}
			
			<footer>
				<ul class="foot flex right">
					<li><a href="{BaseUrl}/entry{No}.html#comment-form">comment({CommentNum})</a></li>
					<li><a href="{BaseUrl}/entry{No}.html">Article URL</a></li>
					{block:Category}<li><a href="{BaseUrl}/cate{Id}.html">{Name}</a></li>{/block:Category}
				</ul>
			</footer>
		</article>
	{/loop:Article}
	
	{block:Pager}
		<ul class="pager flex mt2">
			{block:PreviousPage}<li><a href="{PreviousPageUrl}">&#8810; Previous page</a></li>{/block:PreviousPage}
			{block:NextPage}<li><a href="{NextPageUrl}">Following page &#8811;</a></li>{/block:NextPage}
		</ul>
	{/block:Pager}
{/block:MainArticle}
{Title} Article title
{Body} Article Text
{CommentNum} Comments
{block:MoreLink}
{/block:MoreLink}
Read the article text link block
{MoreBody} Continuation of article body
{Id} Category ID
{Name} Category name
{Action} action in form tag
{Method} method in form tag
{HiddenTag} Hidden tag for system
{NameValuePw} Name value in the password input field
{Message} Article password restriction error
{PreviousPageUrl} Previous page URL
{NextPageUrl} Next page URL

BBS
Variables that can be used in bulletin boards.
Variable name Description Illustration
In parent article block
{block:MainArticle}

	{loop:Article}
		<!-- Parent article -->
		<article id="no{No}">
			<header>
				<ul class="head flex">
					<li>{block:Name}{Name}{/block:Name}</li>
					<li>{block:Mail}<a href="mailto:{Mail}" class="mail"><span>Email</span></a>{/block:Mail}</li>
					<li>{block:Home}<a href="{Home}" class="home"><span>home</span></a>{/block:Home}</li>
					<li><a href="{BaseUrl}/?mode=res&no={No}#form" class="res" rel="nofollow">Reply</a></li>
				</ul>
			</header>
		
			{Body}
		
			<footer>
				<ul class="foot flex right">
					<li><time datetime="{YYYY}-{MM}-{DD} {HH}:{II}">{YYYY}/{MM}/{DD}({W1}) {HH}:{II}</time></li>
					<li><a href="{BaseUrl}/entry{No}.html#no{No}">No.{No}</a></li>
					<li><a href="{BaseUrl}/?mode=edit&no={No}#form" class="edit" rel="nofollow"><span>Edit</span></a></li>
					<li><a href="{BaseUrl}/?pagename=del&no={No}" class="del modal-open" rel="nofollow"><span>Delete</span></a></li>
				</ul>
			</footer>
			
			
			{block:ResArticle}
				{loop:ResArticle}
					<!-- Child article -->
					<article id="no{No}-rno{ResNo}">
						<header>
							<ul class="head flex">
								<li>{block:ResName}{ResName}{/block:ResName}</li>
								<li>{block:ResMail}<a href="mailto:{ResMail}" class="mail"><span>Email</span></a>{/block:ResMail}</li>
								<li>{block:ResHome}<a href="{ResHome}" class="home"><span>home</span></a>{/block:ResHome}</li>
							</ul>
						</header>
					
						{ResBody}
					
						<footer>
							<ul class="foot flex right">
								<li><time datetime="{YYYY}-{MM}-{DD} {HH}:{II}">{YYYY}/{MM}/{DD}({W1}) {HH}:{II}</time></li>
								<li><a href="{BaseUrl}/entry{No}.html#no{No}-rno{ResNo}">No.{ResNo}</a></li>
								<li><a href="{BaseUrl}/?mode=edit&no={No}&rno={ResNo}#form" class="edit" rel="nofollow"><span>Edit</span></a></li>
								<li><a href="{BaseUrl}/?pagename=del&no={No}&rno={ResNo}" class="del modal-open" rel="nofollow"><span>Delete</span></a></li>	
							</ul>
						</footer>
					</article>
					<!-- /Child article -->
				{/loop:ResArticle}
			{/block:ResArticle}
			
		</article>
		<!-- /Parent article -->
	{/loop:Article}
	
	{block:Pager}
		<ul class="pager flex mt2">
			{block:PreviousPage}<li><a href="{PreviousPageUrl}">&#8810; Previous page</a></li>{/block:PreviousPage}
			{block:NextPage}<li><a href="{NextPageUrl}">Following page &#8811;</a></li>{/block:NextPage}
		</ul>
	{/block:Pager}

{/block:MainArticle}
{No} Article No
{Body} Article Text
{Name} name
{Title} title
{Mail} Email
{Home} home
{Free1}
to
{Free6}
Free items 1 to 6
{Id} Category ID
{Name} Category name
In child article block
{ResNo} Article No
{ResBody} Article Text
{ResName} name
{ResTitle} title
{ResMail} Email
{ResHome} home
{ResFree1}
to
{ResFree6}
Free items 1 to 6
{Name} Parent Article Name
{No} Parent article No
Other
{PreviousPageUrl} Previous page URL
{NextPageUrl} Next page URL

Review
Variables that can be used in reviews.
Variable name Description Illustration
{No} Article No
{block:MainArticle}
	{loop:Article}
		<article id="no{No}" class="mbs2">
			<header>
				<h2><a href="{BaseUrl}/entry{No}.html">{Title}</a> <span class="rate rate{Rate}"><span>rate:{Rate}</span></span></h2>
				<time datetime="{YYYY}-{MM}-{DD} {HH}:{II}">{YYYY}/{MM}/{DD}({W1}) {HH}:{II}</time>
			</header>
			
			<a href="{ProductUrl}"><img src="{ImgUrl}" alt="{Title}" width="{Width}" height="{Height}"></a>
			{Body}
			<br style="clear: both">
			
			{block:MoreBody}
				<p id="more{No}" class="mt5">{MoreBody}</p>
			{/block:MoreBody}

			{block:MoreLink}
				<p><a href="{BaseUrl}/entry{No}.html#more{No}">read more</a></p>
			{/block:MoreLink}
			
			{block:BodyPwForm}
				<form action="{Action}" id="limit{No}" method="{Method}">
					{HiddenTag}
					{block:Error}
						<p class="error-single">{Message}</p>
						<script>window.onload = function() { scrollTo('#limit{No}'); }</script>
					{/block:Error}
 						<input type="password" name="{NameValuePw}" style="width:18rem;" required><button class="button inline">Authentication</button>
				</form>
			{/block:BodyPwForm}
							
			<footer>
				<ul class="foot flex right">
					<li><a href="{BaseUrl}/entry{No}.html#comment-form">comment({CommentNum})</a></li>
					<li><a href="{BaseUrl}/entry{No}.html">Article URL</a></li>
					{block:Category}<li><a href="{BaseUrl}/cate{Id}.html">{Name}</a></li>{/block:Category}
				</ul>
			</footer>
		</article>
	{/loop:Article}
	{block:Pager}
		<ul class="pager flex mt2">
			{block:PreviousPage}<li><a href="{PreviousPageUrl}">&#8810; Previous page</a></li>{/block:PreviousPage}
			{block:NextPage}<li><a href="{NextPageUrl}">Following page &#8811;</a></li>{/block:NextPage}
		</ul>
	{/block:Pager}
{/block:MainArticle}
{Title} Article title
{Body} Article Text
{CommentNum} Comments
{Rate} Evaluation
{ImgUrl} Image URL
{Width} Image width
{Height} Image height
{ProductUrl} Product URL
{block:MoreLink}
{/block:MoreLink}
Read the article text link block
{MoreBody} Continuation of article body
{Id} Category ID
{Name} Category name
{Action} action in form tag
{Method} method in form tag
{HiddenTag} Hidden tag for system
{NameValuePw} Name value in the password input field
{Message} Article password restriction error
{PreviousPageUrl} Previous page URL
{NextPageUrl} Next page URL

Novel
Variables that can be used with Novell.
Variable name Description Illustration
Category block
{block:NovelCategory}
	<ul class="category">
		{loop:Category}
			<li>
				<h2 class="h3">{Name}</h2>
				{block:Body}{Body}{/block:Body}
				{block:Title}
					<ul class="flex">
						{loop:Title}
							<li><a href="{Url}">{Title}</a></li>
						{/loop:Title}
					</ul>
				{/block:Title}
				
				{block:MoreLink}
					<div class="foot">
						<a href="{Url}">View all</a>
					</div>
				{/block:MoreLink}
			</li>
		{/loop:Category}
	</ul>
	
	{block:Pager}
		<ul class="pager flex mt2">
			{block:PreviousPage}<li><a href="{PreviousPageUrl}">&#8810; Previous page</a></li>{/block:PreviousPage}
			{block:NextPage}<li><a href="{NextPageUrl}">Following page &#8811;</a></li>{/block:NextPage}
		</ul>
	{/block:Pager}
{/block:NovelCategory}



{block:MainArticle}
	<article id="no{No}" class="mbs2"{block:BgCss}{BgCss}{/block:BgCss}>
		<header>
			<h2><a href="{BaseUrl}/entry{No}.html">{Title}</a></h2>
			<time datetime="{YYYY}-{MM}-{DD} {HH}:{II}">{YYYY}/{MM}/{DD}({W1}) {HH}:{II}</time>
		</header>
		
		{Body}
		
		{block:BodyPwForm}
			<form action="{Action}" id="limit{No}" method="{Method}">
				{HiddenTag}
				{block:Error}
					<p class="error-single">{Message}</p>
					<script>window.onload = function() { scrollTo('#limit{No}'); }</script>
				{/block:Error}
				 <input type="password" name="{NameValuePw}" style="width:18rem;" required><button class="button inline">Authentication</button>
			</form>
		{/block:BodyPwForm}
		
		<footer>
			<ul class="foot flex right">
				<li><a href="{BaseUrl}/entry{No}.html#comment-form">comment({CommentNum})</a></li>
				<li><a href="{BaseUrl}/entry{No}.html">Article URL</a></li>
			</ul>
		</footer>
	</article>

	{block:Pager}
		<ul class="pager flex mt2">
			{block:PreviousPage}<li><a href="{PreviousPageUrl}">&#8810; Previous page</a></li>{/block:PreviousPage}
			<li><a href="{BaseUrl}">TOP</a></li>
			{block:NextPage}<li><a href="{NextPageUrl}">Following page &#8811;</a></li>{/block:NextPage}
		</ul>
	{/block:Pager}
{/block:MainArticle}
{Name} Category name
{Body} Category description
{Title} Article title
{Url} Article URL
{Url} View All URL
{PreviousPageUrl} Previous page URL
{NextPageUrl} Next page URL
Article Block
{No} Article No
{Title} Article title
{Body} Article Text
{CommentNum} Comments
{Action} action in form tag
{Method} method in form tag
{HiddenTag} Hidden tag for system
{NameValuePw} Name value in the password input field
{Message} Article password restriction error
{BgCss} Background image block
* A character string in "style =" xxxxx "" format is output.
{PreviousPageUrl} Previous page URL
{NextPageUrl} Next page URL

gallery
Variables that can be used in the gallery.
Variable name Description Illustration
Category block
{block:GalleryCategory}
	<ul class="category">
		{loop:Category}
			<li>
				<h2 class="h3">{Name}</h2>
				{block:Body}{Body}{/block:Body}
				{block:Work}
					<ul class="flex">
						{loop:Work}
							<li><a href="{Url}"><img src="{ImgUrl}" width="{Width}" height="{Height}" title="{Title}"></a></li>
						{/loop:Work}
					</ul>
				{/block:Work}
				
				{block:MoreLink}
					<div class="foot">
						<a href="{Url}">View all</a>
					</div>
				{/block:MoreLink}
			</li>
		{/loop:Category}
	</ul>
	
	{block:Pager}
		<ul class="pager flex mt2">
			{block:PreviousPage}<li><a href="{PreviousPageUrl}">&#8810; Previous page</a></li>{/block:PreviousPage}
			{block:NextPage}<li><a href="{NextPageUrl}">Following page &#8811;</a></li>{/block:NextPage}
		</ul>
	{/block:Pager}
{/block:GalleryCategory}



{block:MainArticle}
	<article id="no{No}" class="mbs2">
		<header>
			<h2><a href="{BaseUrl}/entry{No}.html">{Title}</a></h2>
			<time datetime="{YYYY}-{MM}-{DD} {HH}:{II}">{YYYY}/{MM}/{DD}({W1}) {HH}:{II}</time>
		</header>
		
		{block:Image}
			<img src="{ImgUrl}" class="pict">
		{/block:Image}
		
		{block:File}
			<a href="{FileUrl}"><img src="{ImgUrl}" width="{Width}" height="{Height}"></a>
		{/block:File}
		
		<br>
		{Body}
		
		<footer>
			<ul class="foot flex right">
				<li><a href="{BaseUrl}/entry{No}.html#comment-form">comment({CommentNum})</a></li>
				<li><a href="{BaseUrl}/entry{No}.html">Article URL</a></li>
			</ul>
		</footer>
	</article>

	{block:Pager}
		<ul class="pager flex mt2">
			{block:PreviousPage}<li><a href="{PreviousPageUrl}">&#8810; Previous page</a></li>{/block:PreviousPage}
			<li><a href="{BaseUrl}">TOP</a></li>
			{block:NextPage}<li><a href="{NextPageUrl}">Following page &#8811;</a></li>{/block:NextPage}
		</ul>
	{/block:Pager}
{/block:MainArticle}
{Name} Category name
{Body} Category description
{Title} Work title
{Url} Work URL
{ImgUrl} Image URL
{Width} Image width
{Height} Image height
{Url} View All URL
{PreviousPageUrl} Previous page URL
{NextPageUrl} Next page URL
Article Block
{No} Article No
{Title} Work title
{Body} Article Text
{CommentNum} Comments
{ImgUrl} Image URL
{Width} Image width
{Height} Image height
{FileUrl} File URL
{ImgUrl} Icon image URL
{Width} Icon image width
{Height} Icon image height
{PreviousPageUrl} Previous page URL
{NextPageUrl} Next page URL

profile
Variables that can be used in profiles.
Variable name Description Illustration
Block profile
{block:Profile}
	<section class="profile mb2">
		{block:Title}
			<h2 class="h3">{Title}</h2>
		{/block:Title}
		
		<div class="flex">
			<div class="img">
				{block:ImgUrl}<img src="{ImgUrl}" class="pict">{/block:ImgUrl}
			</div>
			<dl class="flex">
				{block:Name}
					<dt>{LabelName}</dt>
					<dd>{ValueName}</dd>
				{/block:Name}

				{block:Nickname}
					<dt>{LabelNickname}</dt>
					<dd>{ValueNickname}</dd>
				{/block:Nickname}
				
				{block:Sex}
					<dt>{LabelSex}</dt>
					<dd>{ValueSex}</dd>
				{/block:Sex}
				
				{block:Blood}
					<dt>{LabelBlood}</dt>
					<dd>{ValueBlood}</dd>
				{/block:Blood}
				
				{block:Birth}
					<dt>{LabelBirth}</dt>
					<dd>{ValueBirth}</dd>
				{/block:Birth}
				
				{block:Job}
					<dt>{LabelJob}</dt>
					<dd>{ValueJob}</dd>
				{/block:Job}
				
				{block:Address}
					<dt>{LabelAddress}</dt>
					<dd>{ValueAddress}</dd>
				{/block:Address}
				
				{block:BirthPlace}
					<dt>{LabelBirthPlace}</dt>
					<dd>{ValueBirthPlace}</dd>
				{/block:BirthPlace}
				
				{block:Comment}
					<dt>{LabelComment}</dt>
					<dd>{ValueComment}</dd>
				{/block:Comment}
			</dl>
		</div>
	</section>
{/block:Profile}

{block:Interview}
	<section class="interview">
		{block:Title}
			<h2 class="h3">{Title}</h2>
		{/block:Title}
		<dl>
			{loop:Interview}
				<dt>{Question}</dt>
				<dd>{Answer}</dd>
			{/loop:Interview}
		</dl>
	</section>
{/block:Interview}
{Title} title
{ImgUrl} Profile photo URL
{LabelName} Real name label
{ValueName} Real name
{LabelNickname} Nickname label
{ValueNickname} nickname
{LabelSex} Sex label
{ValueSex} sex
{LabelBlood} Blood type label
{ValueBlood} blood type
{LabelBirth} Birth date label
{ValueBirth} Birthday
{LabelJob} Occupation label
{ValueJob} Profession
{LabelAddress} Home address label
{ValueAddress} Current address
{LabelBirthPlace} Hometown label
{ValueBirthPlace} 出身地
{LabelComment} Self-introduction label
{ValueComment} Self introduction
Interview block
{Title} title
{Question} Question
{Answer} Answer

Bookmarks
Variables that can be used in bookmarks.
Variable name Description Illustration
{Name} Category name
{block:BookmarkCategory}
	<ul class="category flex">
		{loop:Category}
			<li>
				<h2 class="h3">{Name}</h2>
				{block:Bookmark}
					<ul>
						{loop:Bookmark}
							<li{block:Banner} class="banner"{/block:Banner}>
								{block:Text}
									<a href="{Url}">{Title}</a>
								{/block:Text}
								{block:Banner}
									<a href="{Url}"><img src="{ImgUrl}" width="{Width}" height="{Height}" title="{Title}"></a>
								{/block:Banner}
								{block:Body}<p>{Body}</p>{/block:Body}
							</li>
						{/loop:Bookmark}
					</ul>
				{/block:Bookmark}
				
				{block:MoreLink}
					<div class="foot">
						<a href="{Url}">View all</a>
					</div>
				{/block:MoreLink}
				
			</li>
		{/loop:Category}
	</ul>

	{block:Pager}
		<ul class="pager flex mt2">
			{block:PreviousPage}<li><a href="{PreviousPageUrl}">&#8810; Previous page</a></li>{/block:PreviousPage}
			{block:NextPage}<li><a href="{NextPageUrl}">Following page &#8811;</a></li>{/block:NextPage}
		</ul>
	{/block:Pager}

{/block:BookmarkCategory}
{Url} View All URL
{Title} Site name
{Body} Description
{Url} URL
{ImgUrl} Image URL
{Width} Image width
{PreviousPageUrl} Previous page URL
{NextPageUrl} Next page URL

Mail form
Variables that can be used in the mail form.
Variable name Description Illustration
General
{block:Form}

	{block:FormTitle}
		<h2 class="h3">{FormTitle}</h2>
	{/block:FormTitle}
	
	{block:FormMes}
		<p class="message mb5">{FormMes}</p>
	{/block:FormMes}
	
	{block:Success}
		<p id="mail-form-success" class="success mb5">Submission completed</p>
		<script>window.onload = function() { scrollTo('#mail-form-success','fadeOut'); }</script>
	{/block:Success}
				
	<form action="{Action}" method="{Method}" enctype="{Enctype}">
		{HiddenTag}
		{block:Error}
			<div id="mail-form-error" class="error mb6">
				<div class="head">Your input is incorrect</div>
				<ul>
					{loop:Message}
						<li>{Message}</li>
					{/loop:Message}
				</ul>
			</div>
			<script>window.onload = function() { scrollTo('#mail-form-error'); }</script>
		{/block:Error}

		<!--title-->
		<p>
			<label for="label-title" class="label">{LabelTitle}</label>
			<input type="text" name="{NameValueTitle}" id="label-title" value="{FormValueTitle}">
		</p>
		<!--name-->
		<p>
			<label for="label-name" class="label">{LabelName}</label>
			<input type="text" name="{NameValueName}" id="label-name" value="{FormValueName}">
		</p>
		<!--Email-->
		<p>
			<label for="label-mail" class="label">{LabelMail}</label>
			<input type="email" name="{NameValueMail}" id="label-mail" value="{FormValueMail}">
		</p>
		<!--home-->
		<p>
			<label for="label-home" class="label">{LabelHome}</label>
			<input type="url" name="{NameValueHome}" id="label-home" value="{FormValueHome}">
		</p>
		<!--comment-->
		<p>
			<label for="label-comment" class="label">{LabelComment}</label>
			<textarea name="{NameValueComment}" id="label-comment">{FormValueComment}</textarea>
		</p>
		<div class="flex foot">
			<!--Captcha-->
				<p>
					<label for="label-captcha" class="label">{LabelCaptcha}<img src="{CaptchaImageUrl}" class="captcha-img"></label>
					<input type="text" name="{NameValueCaptcha}" id="label-captcha" value="{FormValueCaptcha}">
				</p>
			<!--cookie-->
			<p>
				<label class="label">
					<input type="checkbox" name="{NameValueCookie}" id="input-cookie" class="checkbox" value="{FormValueCookie}"{CheckedCookie}>
					<span id="label-cookie">{LabelCookie}</span>
				</label>
			</p>
		</div>
		<button class="button">Submit</button>
	</form>
	
	<script>
		//Validate		
		{block:RequiredTitle}
			$('label[for="label-title"]').addClass('required');
			$('#label-title').attr('required', 'true');
		{/block:RequiredTitle}
		
		{block:RequiredName}
			$('label[for="label-name"]').addClass('required');
			$('#label-name').attr('required', 'true');
		{/block:RequiredName}
		
		{block:RequiredMail}
			$('label[for="label-mail"]').addClass('required');
			$('#label-mail').attr('required', 'true');
		{/block:RequiredMail}

		{block:RequiredHome}
			$('label[for="label-home"]').addClass('required');
			$('#label-home').attr('required', 'true');
		{/block:RequiredHome}
		
		{block:RequiredComment}
			$('label[for="label-comment"]').addClass('required');
			$('#label-comment').attr('required', 'true');
		{/block:RequiredComment}

		{block:RequiredCaptcha}
			$('label[for="label-captcha"]').addClass('required');
			$('#label-captcha').attr('required', 'true');
		{/block:RequiredCaptcha}
		
		{block:RequiredCookie}
			$('#label-cookie').addClass('required');
			$('#input-cookie').attr('required', 'true');
		{/block:RequiredCookie}
	</script>
	
{/block:Form}
{FormTitle} title
{FormMes} message
{Action} action in form tag
{Method} method in form tag
{Enctype} enctype in form tag
{HiddenTag} Hidden tag for system
{Message} Error message
label
{LabelName} Name label
{LabelTitle} Title label
{LabelMail} Email label
{LabelHome} Home label
{LabelFile} File label
{LabelCookie} Cookie label
{LabelFree1}
to
{LabelFree20}
Labels for free items 1 to 20
{LabelComment} Comment label
{LabelCaptcha} Image authentication label
{LabelPostKey} Post key label
name value
{NameValueName} Name value in the name input field
{NameValueTitle} Name value of title input field
{NameValueMail} Name value in the email input field
{NameValueHome} Name value of home input field
{NameValueFile} Name value of file input field
{NameValueCookie} Cookie checkbox name value
{NameValueFree1}
to
{NameValueFree20}
Name value of free items 1 to 20 input field
{NameValueComment} Name value of comment input field
{NameValueCaptcha} Name value of image authentication input field
{NameValuePostKey} Post key name value
Values remaining in the form due to errors or cookies
{FormValueName} Value remaining in name input field
{FormValueTitle} Value remaining in title input field
{FormValueMail} Value remaining in email input field
{FormValueHome} Value left in home input field
{FormValueCookie} Cookie sent value
{CheckedCookie} Cookie checkbox state
{FormValueFree1}
to
{FormValueFree20}
Value remaining in the input field of free items 1 to 20
{FormValueComment} Value remaining in comment input field
{FormValueCaptcha} Value remaining in image authentication input field
{CaptchaImageUrl} Image URL for image authentication
{FormValuePostKey} Value remaining in post key field
Used only with block variables
{block:Success}
{/block:Success}
Successful transmission block
{block:RequiredTitle}
{/block:RequiredTitle}
Required title block
{block:RequiredName}
{/block:RequiredName}
Required name block
{block:RequiredMail}
{/block:RequiredMail}
Required block for email address
{block:RequiredHome}
{/block:RequiredHome}
Home required block
{block:RequiredFree1}
{/block:RequiredFree1}

to
{block:RequiredFree20}
{/block:RequiredFree20}
Mandatory block for free items 1 to 20
{block:RequiredComment}
{/block:RequiredComment}
Required block for comments
{block:RequiredPostKey}
{/block:RequiredPostKey}
Required block for post key
{block:RequiredCaptcha}
{/block:RequiredCaptcha}
Required block for image authentication
{block:RequiredCookie}
{/block:RequiredCookie}
Required cookie block
What is used in select, radio and checkbox
{No} Numbering of elements in loop
{Value} Sent value
{Name} Select element
{Selected} Selection state remaining in the select element due to errors, cookies, etc.
{Checked} Selection state remaining due to errors or cookies in radio and checkbox elements
These variables can be used in the loop variables of "Free items 1 to 20", and each loop variable is as follows.

[For select element]
{loop:FormFree1Select}
{/loop:FormFree1Select}

to
{loop:FormFree20Select}
{/loop:Form20Select}


[For a radio element]
{loop:FormFree1Radio}
{/loop:FormFree1Radio}

to
{loop:FormFree20Radio}
{/loop:FormFree20Radio}


[For the checkbox element]
{loop:FormFree1Checkbox}
{/loop:FormFree1Checkbox}

to
{loop:FormFree20Checkbox}
{/loop:FormFree20Checkbox}

Pages
Variables that can be used in Pages.
Variable name Description Illustration
{Title} Article title
{block:Pages}
	<article>
		<h2>{Title}</h2>
		{Body}
	</article>
{/block:Pages}
{Body} Article Text

Points to keep in mind when using Pro Mode

There are points to keep in mind when using Pro Mode. We appreciate your understanding and cooperation.

About HTML and CSS
Please learn how to write HTML and CSS by yourself.
Please note that the following questions are not supported.
  • Suddenly the layout collapsed, please investigate the HTML and CSS and tell me the cause.
  • I want to make the text bigger, please tell me how.

About the transition between Pro mode and Normal mode
Many settings are shared between the pro mode and normal mode settings. For example, if you change the "Page Title" in Pro mode, the settings will be inherited when you return to Normal mode later, and the menu settings will be the same. In addition, plug-in settings are shared as well. In the normal mode, the setting screen of "Plug-in layout and each setting" changes to the setting screen of "Plug-in and each setting" in the pro mode, but in Pro mode, the layout etc. are done freely with HTML It is because the layout of the plug-in itself is not performed with this setting but in HTML. In Pro mode, there are only two frames, "Unused" and "Use", but if you move to one of the frames and save the settings, the plug-in that was in a place other than "Center" in normal mode will be It is forcibly placed at the "center". Please note that plug-ins may need to be rearranged when returning to normal mode in this way.
Other settings are not shared. It is the design part. Since the design data of Pro mode and Normal mode are completely different settings, even if you edit and customize HTML in Pro mode, it will not affect the design when returning to Normal mode. Please be assured.

Manual menu