Any site settings you create are added to the Site view model and can be referenced from templates using a data-bind attribute, for example:

<p data-bind="text: site().extensionSiteSettings['settingsID']['propertyID']"></p>

Where settingsID is the name of the site settings root directory and propertyID is the value of the id property for the property you want to access, as defined in the properties array. For example, assuming the earlier example has a site settings root directory of my-settings and you want to access the mediaPicker property, you would use:

<p data-bind="text:
   site().extensionSiteSettings['my-settings']['mediaPicker']"></p>

To use multiple properties from the same site settings extension, you can use something similar to the following:

<!-- ko with: site().extensionSiteSettings['settingsID'] -->
 <p data-bind="text: propertyID"></p>
 <p data-bind="text: otherPropertyID"></p>
<!-- /ko -->