dotCMS Multi-Site src and href Pathing

Recently Redstone had been tasked with building a multi-site implementation of dotCMS for a client. The sites in this instance will all share the same theme so it is important that they can source the same css, components and js in a way that is efficient and not copy/pasting it across each site.

For this implementation we took the approach of making 2 base sites:
 

Code

This site's function is to hold the code and themes require for all other sites to function

Skeleton

Another site to serve as the skeleton of all new sites, to easily copy and edit

When interacting with a theme at the single site level using dotCMS's built-in velocity tools like dotTheme.path allow you to path to the active theme with ease, and if you are parsing or including using the dotCMS tools you can do something like

 #dotParse('//Code/application/themes/THEMENAME/include/somehtml.html')

Trying to apply this logic to an href outside of a dotCMS/velocity tool does not reference the file correctly and the browser will try to access a relative link that does not exist. For example 

<link rel="stylesheet" href="//Code/application/themes/testingtheme/css/styles.css"> 

will not be able to relatively point at the styles we are trying to access when outside of the magic of the parser.

Because nearly everything in dotCMS is a piece of content, files used in the theme can be accessed using the /dA/[content_identifier] structure that you can use to get images and other pieces of content, you just need to be able to query them and build their /dA/ link and they will relatively link correctly because the /dA/ links are instance wide and can be used without CORS issues and relative link issues.

To do this we first need to get the id of the site the theme lives in, that way we can scope specifically to that site in our query.

#set($codeSiteIdentifier = $dotcontent.pull("+contentType:Host +title: Code", 1, "modDate desc").first.identifier)

This will get the identifier of the first site that has the title of Code and it will be used to iterate over some files in a given folder scoped to that host.

#foreach($cssFile in $dotcontent.pull(
        "+contentType:FileAsset
        +conhost: ${codeSiteIdentifier}
        +FileAsset.fileName_dotraw:*.css
        +parentpath: /application/themes/multisite-theme/css/",
        10,"modDate desc")
    )
    
#end

This allows us to put this code into our theme's html_head.vtl where it will iterate through all the css files in that folder and create link elements for each (up to 10 of them in this query's case).

This method can be done with js as well, just switch out the wildcarded FileAsset line and change the parent path to where your js lives. Make sure you do not forget the closing slash at the end of the parent path. Then you just put that version of this script at before your closing body tag in your theme's template.vtl file.

This method keeps your multi-site themes organized and efficient, avoiding the duplicity of having the theme's files copy/pasted across multiple sites.