WPCubed GmbH
Wordprocessing and PDF components 

documentARRAY

Export as Website(HTML)

Introduction to web site export

When documentARRAY exports your document as a website it combines the data from the pages and external files. It has the ability to not only copy certain files unchanged to the export directory, but also to update selected text files by removing text or adding variables.

When exporting pages, the text of each page can be inserted into a template XML file, or it can be transformed by a template script. Certain pages of the page can be surrounded by special HTML code which is provided by a script identified by name.

Export Step by Step:

1) Create or import pages

Use the page editor to create the pages. It is also possible to import the data from WordPress.

2) Create an outline.

The outline will be used to create the menu on the web site.

3) Complete the style sheet

The style sheet is used to provide the CSS which is used by the exported web site. It no only contains the styles for paragraphs and headers, but can also contain styles used by In-Page Templates. In-Page templates can be used to create responsive elements, such as boxes, FAQ tables and alike.

To edit the style sheet use the inbuilt editor and modify the text in the <html>...</html> section.

4) Create the target template

a) To create a a new template use the menu item "Items/Add Target/Website"

You only have to provide a name which will be used as file name. Please avoid spaces and special characters in the name.

b) To edit a template double click on an item in the project explorer under "Targets"

In the editor one or more panels can be edited. Each panel represents one export. To create a new panel use the button "Add" on one of the panes which will duplicate it. This makes it easy to create a different version by just change some of the parameters.

Parameters:

Title: This is the title of the export. It can be used in table using a variable named %TITLE%

Sub-Title: This is a sub title for the export. It can be used in table using a variable named %SUBTITLE%

Custom Variables: Here you can select XML files which contain custom variables and their values.

Variable %EX%: Here you can enter a value for a variable named EX. This variable can be used in page names to select certain source template files or create destination files. Typically this is used to create different path names for different languages.

Outlines: As mentioned before an outline is used to create the menu of a web page. It is also a way to select the pages which are exported at all. Without an outline it is not possible to create a web site.

Pages Source: Here you can (optionally) select the page collections which should be exported. By default all pages in the collection will be exported, unless a page is excluded by a condition. Conditions are lists of names added to pages. If a name is preceded by an exclamation mark it must not be listed by a template for the page to be exported. Otherwise a page will only be exported if the template list that condition.

Symbols in Cond.: This is a list of names to check against the page condition (see previous line).

Please enter at least the symbol "HTML" here, otherwise the standard export template does not work.

To modify the export by selection context depending on conditions you can add symbols here.

Stylesheet: This is the style sheet used to build the page.

Site URL Base: This is the destination domain, i.e. https://www.wpcubed.com.

Script Template(s): This is a list of XML files with In-Page templates. Such templates are used to create special HTML code for marked text on any of the pages.

Create Files: Here you can select if you want to create HTML or Markdown files. Markdown files can be used to feed information into Jekyll projects.

Output Folder: This is the folder the new files are written to. Please enter the folder which is used to collect all HTML and other website files and sub directories.

Publish Folder: This folder can optionally used to collect all files which should be uploaded to the web space. documentARRAY will update files in the output directory which have been actually changed. Only those files can also written to the publish directory, if also the checkbox has been selected. To update the web presence then only the files in the publish directory need to be uploded using FTP. After the upload, the publish directory can be cleared. Hint: In case you use "Quick Export" (F9) only the current file will be created in "Publish" so you can upload it quickly to your webserver to test the result.

New File Ext.: Usually the extension for web pages should be .html

Link Ext.: Usually the extension for links should be ".html", But it can also be "/" if your .htaccess file links all those links to .html.

Relative URLs: If this checkbox is active, the links on each page will be converted to a relative link.
The relative information is stored in a variable called PATHREL for each page. So, if you want to make sure, a URL to an external file is correct, you should use a syntax like <link rel="stylesheet" href="<<PATHREL>>menu.css"> to create a link to a CSS file, in this case "menu.css". Hint: If you need to use PATHREL in a variable which is inserted later inserte it as HTML comment <!--%"PATHREL%-->.

Lowercase URLs: If this mode is activated, the URLS will be converted to lowercase letters.

Output Filename: This is not used for web site export.

Output PDF File: This is not used for web site export.

Alt. Template: Optional. This is the name of a different template to create the website structure.

Usually the template is used which is shwn when you click on , using this option is possible to use a different template. This makes sense if you create different exports within one target project. Using a batch, you can, for example create a PDF file and a web site with one click on "Create".

c) Example Settings:

4) Click on "Template" to edit the export template

The Export template is a script which contains of bands and merge fields to create the export.

It consists of a section which creates the menu structure, which is then saved to a variable.

It can also copy required files, such as java script and CSS from a different directory to the destination.

The it contains a section which is looped for each exported page to create the HTML file for each page on the web presence. In this loop not only the text from the page (the text you edit in the page editor) is exported, but also the menu structure and other variables are mixed in.

 

For a start you can use the default template and refine it when necessary.

5) Click on "Create" to create the new files

This will create the files in the Output Folder. The button "Output" shows the logging output of the export process.

After the creation two new buttons are displayed:

You can view the files in the output folder in a file manager and also see the protocoll. In the protocoll the exported URLs are noted and also the missing URLs. By click on items in the protocoll, the respective page is located so you can correct URLs if required.

6) Context Menu of the "Create" button

The submenu allows it to create all files, not just the ones which have been changed.

It can also let you select a batch (.BAT) file which will be started after the creation process. The BAT file should be located in the "Publish Folder" and can contain commands to first upload files to a web presence and then delete all files.

7) Troubleshooting

a) When you click on "Create" nothing happens.

When clicking on "Create" only the export will be triggered which is enabled. Please make sure at least one element has been enabled.

b) When you are editing a page and you press F9 to start the quick export nothing happens

Please open the target you want to use and select it for QuickExport by clicking on the button in the lower right corner.

It will be then displayed with a red border and the caption in the tabulator will be rendered in read, too.

 

c) A webpage was created but some pages are empty

This can happen when you use an export theme. Here the contents of each page can be exported using conditional bands. Due to the condition the page text may not have been exported.

Example:

Such bands allow for the export of different text based on the page's condition. If a page defines "PLAINTEXT", it will be exported using the variable "PLAINBODY", meaning the text of the page will be used as-is in HTML format. This allows for the inclusion of pure HTML text. In other cases, "BODY" is used, which represents the regular page text.

 

HTML Export Template Syntax