Before moving on to part three of this guide I'd like to put something in between to make the second part round and that's adding CSS and JS using the asset feature of vhs.

Inclusion of a page template's global CSS and JS is configured via typoscript in setup.txt that has been added in Part 1 of this guide. As in any other extbase extension asset files are located in typo3conf/ext/quickstart/Resources/Public and can of course be organized in subfolders to your liking. Let's add style.css and script.js to our template by adding the following lines:

[...]
plugin.tx_vhs.settings.asset {
    styles {
        name = styles
        path = EXT:quickstart/Resources/Public/style.css
    }
    script {
        name = script
        path = EXT:quickstart/Resources/Public/script.js
    }
}

As you can see plugin.tx_vhs.settings.asset is an array of asset files to be included into your page. It provides a lot more configuration options we don't need here yet but will be discussed at a later stage. For now we'll stick to the most important being name and path which should be self-explanatory. The array index doesn't follow any special convention but it's common practice to use the name. Now, make sure those files exist, clear your caches and have a look at the HTML source of your page to find the assets being included (JS at the bottom of the page).

Continue reading Part 1, Part 2 and Part 3.