Overview of Tech Module
The Tech module is like a kitchen tool drawer. It can contain a bit of everything and be a bit disorganized. My conventions for the Tech module are not very important. I’ll document them here, but feel free to change the internal organization to fit your preferences. The only really important bit — like all modules — is to never call any file within the module directly. Always go through the module’s entry file:
The Sample Website’s Tech module has three templates:
foot. The head is everything that goes within a web page’s
I've found it useful to organize the Tech module so that it contains a
meta/ folder, a
links/ folder, and a
meta/ folder is almost like a module within the Tech module. Within it, there are
types/. Items can just contain data and call a Type file. But, sometimes, they just contain markup and don’t call a Type file.
links/ folder is similar with
1tech/2├── _notes.txt3├── entry.shtml4├── js/5│ ├── items/6│ │ └── load-bundle.shtml7│ └── lists/8│ └── default.shtml9├── links/10│ ├── items/11│ │ ├── blank.shtml12│ │ ├── canonical-url.shtml13│ │ ├── preload.shtml14│ │ ├── stylesheets.shtml15│ │ └── webfonts.shtml16│ ├── lists/17│ │ ├── default.shtml18│ │ └── home.shtml19│ └── types/20│ └── default.shtml21├── meta/22│ ├── items/23│ │ ├── author.shtml24│ │ ├── blank.shtml25│ │ ├── charset.shtml26│ │ ├── copyright.shtml27│ │ ├── http-equiv.shtml28│ │ ├── open-graph.shtml29│ │ ├── title.shtml30│ │ ├── twitter-card.shtml31│ │ ├── verification.shtml32│ │ └── viewport.shtml33│ ├── lists/34│ │ └── default.shtml35│ └── types/36│ └── default.shtml37└── templates/38 ├── foot.shtml39 ├── head-home.shtml40 └── head.shtml
modules/ folder and into the
The Tech modules entry file is:
<!-- #bbinclude "/#MODULE#/templates/#TEMPLATE#.shtml"#bbincludeoptions#="inline=true"#MODULE# = 'tech'#DESCRIPTION# = '#BASE-DESCRIPTION# #LONG-DESCRIPTION#'--><!-- end bbinclude -->
head.shtml template file calls the lists for
meta/ and for
foot.shtml file calls the
js/ list file. By separating items out in this way, the head and foot of the site are kept flexible and maintainable.
The #DESCRIPTION# variable is used throughout the metadata, especially in the Description metatag, and the Open Graph and Twitter Cards. In the example above, the description is built from two variables defined in the Page module global variables and will be the same on every page. If each page requires a different set of metadata, the Tech module’s
meta/ section (i.e.
app/modules/tech/meta/items/description.shtml) can pass the #PAGES# to a Description module to return custom description metatag data for each page of the site.
The Head template file is:
#bbinclude "/#MODULE#/meta/lists/default.shtml"#bbinclude "/#MODULE#/links/lists/default.shtml"
It calls the default lists in the
meta/ and the
The Foot template file calls the default list in the
The Meta default list is:
#bbinclude "/#MODULE#/meta/items/charset.shtml"#bbinclude "/#MODULE#/meta/items/http-equiv.shtml"#bbinclude "/#MODULE#/meta/items/viewport.shtml"#bbinclude "/#MODULE#/meta/items/title.shtml"#bbinclude "/#MODULE#/meta/items/author.shtml"#bbinclude "/#MODULE#/meta/items/copyright.shtml"#bbinclude "/#MODULE#/meta/items/open-graph.shtml"#bbinclude "/#MODULE#/meta/items/twitter-card.shtml"#bbinclude "/#MODULE#/meta/items/verification.shtml"
The Links default list is:
#bbinclude "/#MODULE#/links/items/canonical-url.shtml"#bbinclude "/#MODULE#/links/items/webfonts.shtml"#bbinclude "/#MODULE#/links/items/stylesheets.shtml"
One of the meta items — copyright — looks like this:
<!-- #bbinclude "/#MODULE#/meta/types/default.shtml"#bbincludeoptions#="inline=true"#NAME# = 'Copyright'#CONTENT# = 'Copyright © #YEARNUM#, #COMPANY#. Open Source #LICENSE#.'--><!-- end bbinclude -->
The copyright item calls a Type file and slots its variables into standard metatag markup. The odd optional use of white space makes the metatags easier to scan in the source code.
<meta name="#NAME#"content="#CONTENT#" />
A meta item — open-graph — returns markup directly rather than through a Type file:
<!-- Open Graph --><meta property="og:title" key="ogtitle" content="#PAGE-TITLE# — #COMPANY#" /><meta property="og:site_name" key="ogsitename" content="#COMPANY#" /><meta property="og:url" key="ogurl" content="#URL-ROOT##CANONICAL-URL#" /><meta property="og:description" key="ogdesc" content="#DESCRIPTION#" /><meta property="og:type" key="ogtype" content="website" /><meta property="og:locale" key="oglocale" content="en_US" /><meta property="og:image" key="ogimage" content="#URL-ROOT##PAGE-IMAGE-PATH#/#PAGE-IMAGE#" />
Since each item is isolated from the other, but also able to access global variables, the metadata for the site is easy to maintain.