iTranslated by AI
Building a Website with Movable Type
I created a portfolio using Movable Type (MT). Since I am still inexperienced, it is a bit rough around the edges, but I decided to document it as a cheat sheet for myself.
Overview of MT
This is a comparison between the architecture of MT and WordPress (WP). Since WP is the most widely used CMS, I believe many people already understand it. However, I couldn't design effectively without understanding the basics of MT, so I have summarized it here for review, even if some parts might be simplified.
WordPress Architecture
WP Features and Precautions
- There are clear rules for template names and priority for pages vs. posts.
- Post URLs are linked to permalink settings.
- Always re-save permalink settings after creating custom post types.
- What are called 'categories' exist only for default posts; for custom post types, they become 'taxonomies'.
- You can create multisites by splitting into subdomains or subdirectories, but the dashboard becomes complex.
- While you can freely customize functions using PHP separate from WP functions, the coding style depends on the developer, which can make it hard to understand.
- Custom fields often rely on plugins.
- Overusing plugins can easily lead to bugs.
Movable Type Architecture
MT Features and Precautions
- You can only create one type of entry per site, and templates can only apply one type for both web pages and entries.
- Common parts are created as module templates, and there are special templates for indexes and system-level files.
- You can create one parent site and an unlimited number of child sites, similar to WP multisite.
- You can complete tasks using only MT tags without knowing Perl. Because MT tag patterns are fixed, customization flexibility might be lower.
- Set up archive mappings for pages to determine URL pathnames.
- When changing folder names or URLs, directories and files remain on the server; delete unnecessary ones, or you might not be able to reflect changes on the page.
- There is no native pagination feature, so you must use a plugin.
- Custom fields are easy to use, but creating too many can clutter the entry page.
- The effort required for 'rebuilding' is a bottleneck.
Regarding Installation
I have noted down the stumbling blocks I encountered during the MT installation.
Before downloading the Personal edition from the official site and uploading it to your server, check the file structure and follow the official manual.
Personal Free Edition DL →
Manual Site →
Change the permissions of all .cgi files directly under the downloaded MT-8.4.0 folder to 755:
mt-cdsearch.cgi
mt-check.cgi
mt-comments.cgi
mt-search.cgi
mt-shared-preview.cgi
mt-upgrade.cgi
mt-wizard.cgi
mt.cgi
Set permissions for the website directory and the support directory within mt-static to 777...
Wait a minute,
Depending on the rental server, 777 can make the directory inaccessible.
I stumbled on this at first.
By the way, I am using Xserver. Regardless, I changed everything that was 777 to 755.
After changing permissions, I uploaded only mt-static directly under the installation directory. I created a directory named 'mt' and uploaded the rest of the data inside it. I used the following route:
mt8
|_mt-static
|_mt
|_Directories and files other than mt-static, such as tmpl and tools
Then, I accessed the URL and configured the DB and login settings via the installation wizard.
I thought the installation was successful, but the dashboard looked strange. The title field was there, but the entry field was completely blank, and I couldn't input anything. The design template editor was in the same state.
Did I get the permissions wrong?
Did I mess up a setting?
Is there a conflict somewhere? But it's in its initial state without any modifications yet.
Since only the editor was acting up, I thought there might be something wrong with the editor's plugin, so I tried disabling and enabling them.
As a result, when I disabled everything related to the new TinyMCE6, the input field appeared.
This is the system plugin setting.
I still don't know the reason for this.
I spent my entire weekend trying to get it installed and working properly, and started Monday feeling completely exhausted.
Templates and MT Tags
Here are the templates and MT tags I used on my site.
Parent Site
- Index Templates
- Index --- Top Page
- 404
- Archive Templates
- works Category Archive
- works Single Page
- Fixed Page Template
- Template Modules
- config --- Stores common variables
- breadcrumb --- Breadcrumb list
- header --- Common header
- footer --- Common footer
- contact --- Design parts for fixed pages
- pagination --- Pager parts
- worksList --- Design parts for fixed pages
- result --- Design parts for fixed pages
- Note: I installed "A-Form 5.0.1" for forms and "PageBute 4.0.0" for pagination.
- Note: The child site construction is similar, so I will omit it.
config Module
Store variables and initial values common to all pages. I override variables in each template.
<mt:Ignore>Initial values</mt:Ignore>
<mt:SetVars>
ogimage=https://xxxxxx.com/image/og_imge.jpg
bodyclass=noCss
homeAct=none
worksAct=none
resulteAct=none
mtAct=none
contactAct=none
</mt:SetVars>
<mt:Ignore>Comment out here</mt:Ignore>
<mt:SetVars>
name1=”Variable storage multiple versions”
name2=”The left side here corresponds to the name”
</mt:SetVars>
For a single value:
<$mt:SetVar name=”kemeko” value=”kemeko”$>
When setting an MT tag as a variable, do not use spaces:
<mt:SetVarBlock name="kesaran"><mt:PageFolder><$mt:FolderBasename$><mt:PageFolder></mt:SetVarBlock>
Calling the variable:
<$mt:Var name="name1"$>
<$mt:Var name="kemeko"$>
<$mt:Var name="kesaran"$>
Index Template
This is a template that can be applied to a single URL.
The following is the top page.
<$mt:SetVar name="home" value="1"$>
<$mt:Include module="config"$>
<mt:SetVars>
metatitle=<$mt:WebsiteName$>
pagetext=This is a test site built with Movable Type
homeAct=act
</mt:SetVars>
<$mt:Include module="header"$>
<main class="main">
<div class="topMain">
<div class="container grid2">
<section class="leftArea">
<h1 class="hatakeTitle">
<img src="<$mt:BlogRelativeURL$>indeximage/toptitle.svg" alt="THE Hatake">
</h1>
<!-- Content omitted -->
</div>
<!-- //.container -->
</div>
<!-- //.topMain -->
Since the TOP page is special, it's convenient to set a flag so it can be used for various conditions:
<$mt:SetVar name="home" value="1"$>
MT include tag. First, load the config for initial values:
<$mt:Include module="config"$>
Override the variables declared in config. The values for the header module included below are overridden:
<mt:SetVars>
metatitle=<$mt:WebsiteName$>
pagetext=This is a test site built with Movable Type
homeAct=act
<mt:SetVars>
MT tag for relative path:
<$mt:BlogRelativeURL$>
For site URL notation, use this:
<$mt:BlogURL$>
Outputting Sub-loop for New Entries
<mt:Entries lastn="6" sort_order="descend">
<mt:EntriesHeader>
<ul class="worksLi">
</mt:EntriesHeader>
<li>
<figure>
<a href="<$mt:EntryPermalink$>">
<mt:worksImgMainAsset>
<img src="<$MTAssetURL$>" alt="">
</mt:worksImgMainAsset>
</a>
<figcaption class="crapTitle"><$mt:EntryTitle$></figcaption>
</figure>
<div class="workText">
<p class="mb10">
<$mt:EntryExcerpt words="50"$>
</p>
<p class="toArticle"><a href="<$mt:EntryPermalink$>">Details here</a></p>
</div>
</li>
<mt:EntriesFooter>
</ul>
</mt:EntriesFooter>
</mt:Entries>
Use the mt:Entries MT tag, with modifiers to define display options. lastn="6" is the number of items, and sort_order="descend" displays newest entries first.
Since I set the thumbnail using custom fields, here is the specific way to output images:
<mt:CustomFieldNameAsset>
<img src="<$MTAssetURL$>" alt="">
</mt:CustomFieldNameAsset>
For calling text custom fields:
<mt:If tag="pasaran">
<p><$mt:pasaran encode_html="1"$></p>
</mt:If>
Outputting Sub-loop for New Entries from Child Sites
<mt:ChildSites include_sites="2">
<mt:Entries lastn="3" sort_order="descend">
<mt:EntriesHeader>
<ul class="enemyLi">
</mt:EntriesHeader>
<li>
<figure>
<a href="<$mt:EntryPermalink$>">
<mt:enemyImgMainAsset>
<img src="<$MTAssetURL$>" alt="">
</mt:enemyImgMainAsset>
</a>
</figure>
<article class="enemyText">
<h4 class="enemyTitle"><$mt:EntryTitle$></h4>
<p class="mb10"><$mt:EntryExcerpt words="30"$></p>
<p class="toArticle"><a href="<$mt:EntryPermalink$>">Details here</a></p>
</article>
</li>
<mt:EntriesFooter>
</ul>
</mt:EntriesFooter>
</mt:Entries>
</mt:ChildSites>
Wrap with mt:ChildSites as the parent element. The number in include_sites="2" is the Site ID. Otherwise, it is the same as a standard entry loop.
header Module
I changed the URL settings so that it can be used commonly by the child site. Otherwise, links in the child site would be broken. Instead of BlogRelativeURL, I use the absolute path WebsiteURL, assigning it to a variable.
<mt:BlogParentWebsite>
<mt:SetVars>
website_url=<$mt:WebsiteURL$>
</mt:SetVars>
</mt:BlogParentWebsite>
<!DOCTYPE HTML>
<html lang="<$mt:BlogLanguage$>">
<head prefix="og: https://ogp.me/ns#">
<meta charset="<$mt:PublishCharset$>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><$mt:Var name="metatitle"$></title>
<meta name="description" content="<mt:Var name="pagetext">">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="theme-color" content="#41AEA5">
<!-- OG Tags -->
<meta property="og:title" content="<$mt:Var name="metatitle"$>">
<meta property="og:url" content="<$mt:Var name="metaurl"$>">
<meta property="og:site_name" content="<$mt:Var name="metatitle"$>" />
<meta name="og:image" content="<$mt:Var name="ogimage"$>" />
<meta name="og:description" content="<$mt:Var name="pagetext"$>" />
<meta name="og:type" content="website" />
<!-- //OG Tags -->
<link rel="stylesheet" href="<$MTStaticWebPath$>plugins/AForm/theme/theme01.css" type="text/css" />
<link rel="stylesheet" href="<$mt:Var name="website_url"$>css/sanitize.css">
<link rel="stylesheet" type="text/css" href="<$mt:Var name="website_url"$>css/style.css">
<link rel="stylesheet" type="text/css" href="<$mt:Var name="website_url"$>css/common.css">
<link rel="stylesheet" type="text/css" href="<$mt:Var name="website_url"$>css/page.css">
<link rel="apple-touch-icon" href="<$mt:Var name="website_url"$>indeximage/apple-touch-icon.png">
<link rel="shortcut icon" href="<$mt:Var name="website_url"$>indeximage/favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body class="<$mt:Var name="bodyclass"$>">
<div class="wrapper">
<div id="loader">
<img src="<$mt:Var name="website_url"$>indeximage/toptitle_w.svg" alt="Loading">
</div>
<header class="header">
<nav class="navPc">
<ul class="pcMenu">
<li class="<$mt:Var name="homeAct"$>"><a href="<mt:Var name="website_url" />">HOME</a></li>
<li class="pulMenu <$mt:Var name="worksAct"$>"><a href="<$mt:Var name="website_url"$>works/">WORKS</a>
<ul class="rowMenu">
<li><a href="<$mt:Var name="website_url"$>works/">WORKS</a></li>
<li><a href="<$mt:Var name="website_url"$>subpost/">Enemy of the field</a></li>
<li><a href="<$mt:Var name="website_url"$>friendship/">Neutral or Friendly</a></li>
</ul>
</li>
<li class="<$mt:Var name="resulteAct"$>"><a href="<$mt:Var name="website_url"$>result/">RESULT</a></li>
<li class="topIcon">
<h1><img src="<$mt:Var name="website_url"$>indeximage/logo.svg" alt="THE Hatake"></h1>
</li>
<li class="<$mt:Var name="mtAct"$>"><a href="<$mt:Var name="website_url"$>about/">Movable Type</a></li>
<li class="<$mt:Var name="contactAct"$>"><a href="<$mt:Var name="website_url"$>contact/">CONTACT</a></li>
</ul>
</nav>
<h2 class="spH1">
<a href="<$mt:Var name="website_url"$>">
<img src="<$mt:Var name="website_url"$>indeximage/logo.svg" alt="THE Hatake">
</a>
</h2>
<img src="<$mt:Var name="website_url"$>indeximage/menu_open.svg" alt="Open Menu" id="openMenu">
</header>
Archive Template: Web Page
Base for fixed pages. I think this is an MT-specific feature: if you create a folder in web pages, the folder name becomes the parent menu, and pages within the folder become child menus.
This reflects in the URL, so I used this structure for conditional branching. I assign the folderName variable at the beginning and switch using if statements. The modifier eq means "equal to". By the way, like means "contains".
<mt:SetVarBlock name="folderName"><mt:PageFolder><$mt:FolderBasename$></mt:PageFolder></mt:SetVarBlock>
<$mt:Include module="config"$>
<mt:If name="folderName" eq="works">
<mt:SetVars>
metatitle=WORKS Harvest List | <$mt:WebsiteName$>
pagetext=This is the archive list of the parent site built with Movable Type 8
metaurl=<$mt:BlogURL$>works/
worksAct=act
</mt:SetVars>
<$mt:Include module="header"$>
<main class="mainPage">
<div class="mainImag">
<picture class="mainImg">
<source srcset="<$mt:BlogRelativeURL$>indeximage/works_top_sp.jpg" media="(max-width: 768px)" />
<img src="<$mt:BlogRelativeURL$>indeximage/works_top.jpg" alt="">
</picture>
</div>
<section class="container topDotted">
<$mt:Include module="breadcrumb"$>
<$mt:Include module="worksList"$>
<!-- Pager include -->
<$mt:Include module="pagination"$>
</section>
<!-- //.container -->
</main>
<mt:Elseif name="folderName" eq="contact">
<mt:SetVars>
metatitle=Contact | <$mt:WebsiteName$>
pagetext=This is a test form built with A-Form
metaurl=<$mt:BlogURL$>contact/
contactAct=act
</mt:SetVars>
<$mt:Include module="header"$>
<main class="mainPage">
<div class="pageVar">
<h3 class="pageTitle">CONTACT<small>Inquiries</small></h3>
</div>
<section class="container">
<$mt:Include module="breadcrumb"$>
<$mt:Include module="contact"$>
</section>
<!-- //.lineBox -->
</main>
<mt:Elseif name="folderName" eq="result">
<mt:SetVars>
metatitle=RESULT | <$mt:WebsiteName$>
pagetext=I eat the harvest
metaurl=<$mt:BlogURL$>result/
resulteAct=act
</mt:SetVars>
<$mt:Include module="header"$>
<main class="mainPage">
<div class="mainImag">
<picture class="mainImg">
<source srcset="<$mt:BlogRelativeURL$>indeximage/result_top_sp.jpg" media="(max-width: 768px)" />
<img src="<$mt:BlogRelativeURL$>indeximage/result_top.jpg" alt="">
</picture>
</div>
<section class="container topDotted">
<$mt:Include module="breadcrumb"$>
<$mt:Include module="result"$>
</section>
<!-- //.container -->
</main>
<mt:Else>
</mt:If>
<$mt:Include module="footer"$>
I set the archive mapping for this template to determine the URL.
Path:
folder-path/page-basename.html
Create a works folder and set the filename to index.html when creating a new web page, selecting works as the folder. Do the same for contact and result.
Module: worksList
Created as an index page for main articles. The automated loop is the main part.
Since it's a block where the pager plugin is applied, I'll insert the dedicated tags. Set <mt:PageContents count="10"> outside Entries. count is the number of items per page.
The key is to place this before </mt:Entries>:
<$mt:PageSeparator$>
<mt:PageContents count="10">
<mt:Entries lastn="0" sort_order="descend">
<mt:PageContentsHeader>
<ul class="cropLi">
</mt:PageContentsHeader>
<li>
<figure>
<a href="<$mt:EntryPermalink$>">
<mt:worksImgMainAsset>
<img src="<$MTAssetURL$>" alt="">
</mt:worksImgMainAsset>
</a>
</figure>
<section class="cropR">
<h3 class="cropTitle"><$mt:EntryTitle$></h3>
<p class="ditail">
<span class="postDate">Date: <$mt:EntryDate format="%Y/%m/%d"$></span>
<mt:EntryCategories type="primary">
<span class="cropCat"><a href="<$mt:CategoryArchiveLink$>">Season: <$mt:CategoryLabel encode_html="1"$></a></span>
</mt:EntryCategories>
</p>
<p class="postText"><$mt:EntryExcerpt words="50"$></p>
<p class="toArticle"><a href="<$mt:EntryPermalink$>">Details here</a></p>
</section>
</li>
<mt:PageContentsFooter>
</ul>
</mt:PageContentsFooter>
<$mt:PageSeparator$>
</mt:Entries>
</mt:PageContents>
Module: pagination
Place where you want the page navigation.
For a simple output:
<$mt:PageLists$>
Output result:
<span class="current_page">1</span>
<a href="PageLinkURL" class="link_page">2</a>
<a href="PageLinkURL" class="link_page">3</a>
<!-- Pagination (Common) -->
<mt:Pagination>
<mt:PaginationHeader>
<ul class="pager">
<mt:IfPaginationPrev><li class="prevPage"><a href="<$mt:PaginationPrev$>" rel="prev" class="prev"><img src="<mt:Var name="website_url" />indeximage/arrow_try_le.svg" alt=""></a></li></mt:IfPaginationPrev>
</mt:PaginationHeader>
<mt:IfPaginationCurrent>
<li class="num"><a class="current"><$mt:PaginationLink element="number"$></a></li>
<mt:Else>
<li class="num"><a href="<$mt:PaginationLink$>"><$mt:PaginationLink element="number"$></a></li>
</mt:IfPaginationCurrent>
<mt:PaginationFooter>
<mt:IfPaginationNext><li class="nextPage"><a href="<$mt:PaginationNext$>" rel="next" class="next"><img src="<mt:Var name="website_url" />indeximage/arrow_try_re.svg" alt=""></a></li></mt:IfPaginationNext>
</ul>
</mt:PaginationFooter>
</mt:Pagination>
Archive Template: Category Archive
Like worksList, the writing style is loop-focused.
I set the archive mapping for this template to determine the URL. I chose "Custom".
Path:
works/%-c/%i
Archive Template: Single
Almost identical to the previous pages, but since it is a single page, mt:Entries is unnecessary. If present, it will loop.
I set the archive mapping for this template as well to determine the URL. I chose "Custom".
Path:
works/post/%-c/%-f
<$mt:Include module="config"$>
<mt:SetVars>
metatitle=<$mt:EntryTitle encode_html="1"$> | <$mt:WebsiteName$>
pagetext=<$mt:EntryExcerpt words="30" encode_html="1"$>
metaurl=<$mt:EntryPermalink$>
ogimage=<mt:worksImgMainAsset><$MTAssetURL$></mt:worksImgMainAsset>
worksAct=act
</mt:SetVars>
<$mt:Include module="header"$>
<main class="mainPage">
<div class="pageVar">
<h3 class="pageTitle">WORKS<small>Harvests</small></h3>
</div>
<div class="container">
<!-- Breadcrumbs -->
<$mt:Include module="breadcrumb"$>
<div class="postArticle">
<!-- Content omitted -->
<div class="articleText">
<$mt:EntryBody encode_html="1"$>
<$mt:EntryMore$>
</div>
</div>
<!-- //.postArticle -->
<ul class="pageMark">
<mt:EntryPrevious>
<li><a href="<$mt:EntryLink$>"><img src="<$mt:BlogRelativeURL$>indeximage/page_prev.svg" alt="Previous"></a></li>
</mt:EntryPrevious>
<li class="toList">
<a href="<$mt:BlogRelativeURL$>works/">To harvest list</a>
</li>
<mt:EntryNext>
<li><a href="<$mt:EntryLink$>"><img src="<$mt:BlogRelativeURL$>indeximage/page_next.svg" alt="Next"></a></li>
</mt:EntryNext>
</ul>
</div>
<!-- //.container -->
</main>
Child Site
The template writing style for child sites is almost the same as the parent site.
When including common parts from the parent site, add parent="1":
<$mt:Include module="config" parent="1"$>
Index Template: 404
Created an original 404 page. Set the URL to 404.html in the index template.
Write the following in .htaccess and upload to the root of the site directory:
ErrorDocument 404 /mt8/404.html
Reflections on Building...
I skipped the details, but it might be better to escape processing for titles and article outputs:
encode_html="1"
Since this is a private project, I cut some corners, but if it were for work, I would definitely include it.
Also, the pager can't currently skip intermediate pages...
This is a task for the future.
- Since there is little content, I didn't build child menus, but here's a note as a cheat sheet for myself:
<!-- Navigation with child pages -->
<ul>
<mt:TopLevelFolders><!-- Parent layer folder declaration -->
<li>
<a href="#">
<$mt:FolderLabel$></a><!-- Insert folder name -->
<ul>
<mt:Pages><!-- Repeated block -->
<li>
<a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a>
</li>
</mt:Pages>
<mt:SubFolders><!-- Sub-layer folder declaration -->
<li>
<$mt:FolderLavel$><!-- Subfolder name -->
</li>
<mt:Pages no_folder="1"><!-- Display settings when no folder exists -->
<li>
<a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a>
</li>
</mt:Pages>
<$mt:SubFolderRecurse$><!-- End loop -->
</mt:SubFolders>
</ul>
</li>
</mt:TopLavelFolders>
</ul>
THE Hatake Site
Below is the site I built. I created content centered on vegetables I harvested personally, hoping to supplement my food supply.
https://spica.okamechan.com/mt8/
Discussion