Instructions
Choosing the base template
First of all, this template has multiple
parameters allowing you to adapt it to
your application:
sidebar |
If this parameter is present, the template will include a sidebar |
nav1 |
Allows you to define which tab is active.
nav1 sets the top level (portal, shop, verlag) and nav2 the second level
For the possible values of the parameters please take a look at the data-pons-tab attributes
in the html code.
Note:
We don't know all the items here, so we may display placeholders for the second level (
applies to shop).
|
nav2 |
no-ads |
If this parameter is present, the template should be free of ads |
searchform |
Allows you to define where and how the search form appears (currently only applicable when sidebar is present).
By default, the search form appears as a widget.
If this parameter is top, the search form should appear on the top, over the main content.
If this parameter is shop, the search form is prepared for usage in the shop.
|
mobile-enabled |
If this parameter is present, the template will (responsively) support mobile devices |
full-width |
If this parameter is present, the template will be using the whole page |
szm |
If this parameter is present, the template will have the szm/ivw tag available (tracking) |
Tabs and footer
We've observed that most template changes are needed because of changes that only affect the tabs or footer.
So we've added the possibility to download the
tabs or the
footer by themselves:
- tabs supports the nav2 parameter (as described above)
- tabs should correspond to the template-element NAV (see below)
- footer should correspond to the template-element FOOTER (see below)
We propose that you separate the NAV / FOOTER elements into separate partials (html snippets) so you are able
to update these individually.
Adapting this template to your application
If you take a look at the html source, you can see that we've insert comments around certain
areas in the template, which look like this:
<-- <template-element data-section="[name]"> -->
[some html]
<-- </template-element> /[name] -->
This allows you to do replace these lines with this regular expression:
Replace
/<!--\s*(<\/?template-element[^>]*>)[^>]*>/
with
[matched group 1]
This should convert the commented lines to 'real' tags and you can now feed the template
to any html/xml processor and should have easy access to the sections surrounded by
<template-element> tags.
Of course you can also choose to not go this route and adapt the template based on regular
expressions (or do both processing steps).
To make your life easier, we provide a helper ruby gem that handles both processing
steps.
Please ask us for github access and further instructions.
Available sections in the template
Important sections - you should handle those:
TITLE |
Around <title> |
STYLESHEET_TAGS |
Around stylesheet tags in <head> |
JAVASCRIPT_TAGS |
Around javascript tags - may appear multiple times |
MINIMIZED_ASSETS |
Around minimized assets |
REGISTER_LINK |
Around the link to register |
LINK_TO_SHOP_ORDERS_DE |
(TODO) Around a link to the order page on the shop - should only be displayed... |
NAV |
Around the (second-level) navigation |
CONTENT |
Around the content - includes MAIN_CONTENT and optionally SIDEBAR_CONTENT |
MAIN_CONTENT |
Around the main content |
SIDEBAR_CONTENT |
Around the sidebar content |
FOOTER |
Around the footer at the bottom of the page |
LOGIN_STATUS |
Around the login status of the user: Includes both LOGGED_IN and NOT_LOGGED_IN - your application should only show one of these at the same time (based on the user's login status) |
MOBILE_LOGIN_STATUS |
Around the login status of the user: Includes both MOBILE_LOGGED_IN and MOBILE_NOT_LOGGED_IN - your application should only show one of these at the same time (based on the user's login status) |
LOGGED_IN |
A Section that is shown to users who are logged in |
MOBILE_LOGGED_IN |
A Section that is shown to users who are logged in |
NOT_LOGGED_IN |
A section that is shown to users who are not logged in |
MOBILE_NOT_LOGGED_IN |
A section that is shown to users who are not logged in |
AD_INITIALIZATION |
Around ad initialization code |
AD_LEADERBOARD |
Around the leaderboard ad (top) |
AD_SKYSCRAPER |
Around the skyscraper ad (right) |
AD_MEDIUM_RECT |
Around the medium-rectangle ad (only applies to templates with sidebar) |
AD_ABOVE_FOOTER |
Around the ad in the footer (bottom) |
IMPORTMAP |
Around the importmap |
Sections you should consider to support:
APP_LINKS |
Around links to apps (appstores) <head> |
PAGE_INFO |
Around window.Infos object in <head> |
LOGIN_LINK |
Around the link to login |
MOBILE_LOGIN_LINK |
Around the link to login |
LOGOUT_LINK |
Around the link to logout |
MOBILE_LOGOUT_LINK |
Around the link to logout |
PROFILE_LINK |
Around the link to the profile |
USERNAME |
Around the username |
MOBILE_USERNAME |
Around the username |
TERMS_OF_SERVICE_LINK |
Around the link to the terms of service |
FOOTER_LINKS |
Around the footer links within the footer |
SEARCH_FORM |
Around the dictionary search form |
LOCALE_SELECT |
Around the locale selector (uses the links provided in LOCALE_LINKS) |
LOCALE_LINKS |
Around the actual locale links (triggered by LOCALE_SELECT) |
ALTERNATE_HREFLANG_LINKS |
Around the "alternate hreflang" links (for seo) |
Sections for "nice-to-have" or cosmetic features:
META_TAGS |
Around meta tags in <head> |
ICONS |
Around icon tags in <head> |
UNREAD_MESSAGES |
Around the status of unread messages |
UNREAD_MESSAGES_COUNT |
Around the count of unread messages |
COPYRIGHT |
Around the copyright notice at the bottom of the page |
YEAR |
Around the year in the copyright header |
TRACKING |
Tracking - may appear multiple times |
Informational sections:
AD_DEFEND |
Ad-Defend script |
ASSET_GROUP |
Around a group of assets (stylesheets or javascripts) - contains ORIGINAL_ASSETS and MINIMIZED_ASSETS |
ORIGINAL_ASSETS |
Around original assets - the purpose here is to hint at the used libraries (which are minimized in the corresponding MINIMIZED_ASSETS section) |
INSTRUCTIONS |
Around instructions (for developers) |
Thank you for reading.