How to change HTML page title per page?

[ResearchGate]

Hi,

I know that the HTML title is defined in the Main Layout decorator. Below is the definition from the default template.


#if ($sitemeshPage.getProperty("page.spacename"))
  <title>$title - $sitemeshPage.getProperty("page.spacename") - #siteTitle()</title>
#else
  <title>$title - #siteTitle()</title>
#end

But I am looking for an easy way to change the HTML title per page. Ideally, a user could do it when editing a page.

Any ideas or recommendations of add-ons?

[Aleš Laňar · Accepted solution]

You can create it as User Macro with parameter for page title. Then user can insert macro to page and change it.

## @param Title:title=Title|type=string|desc=Title
<script type="text/javascript">
	document.title = "$!paramTitle";
</script>

I hope this will work  I didnt test it but it should work 

[ResearchGate]

I tried to add a UserMacro that has a param holding the HTML title, then I extented the if clause above to test whether the param is defined and set the title accordingly. It is not working. It looks like the param is not (yet) defined when it renders the HTML header section. Can you maybe provide a working example?

[Davin Studer]

You would probably want to put the user macro on the page, not in the decorator. The user macro could have a user defined parameter and then just take what the user puts in and change the html title via javascript.

[Aleš Laňar]

Look at edit. Just add it like another macro :) If you want to use it with Title text in body, delete param and to the script put $body

[Davin Studer]

document.title = "@paramTitle"; should be ... document.title = "$!paramTitle";

[Aleš Laňar]

Thank you David :) I wrote it on iPad :)

[Davin Studer]

Woah! Brave man ... coding on a tablet.

[Aleš Laňar]

:D only watched Confluence Answers :).... hmmm some IDE on iPad.... :)

[Felix Grund (Scandio)]

If you don't want to mangle with a mixture of Velocity and JavaScript code, you could do it with JavaScript only (in global HTML, as a user macro or in a plugin):

(function($) {
	
	function getHtmlTitle(pageTitle) {
		return pageTitle; // or do some logic here
	}
	document.title = getHtmlTitle(AJS.params.pageTitle);

}(jQuery))