Add more customizations

README.md

@@ -82,15 +82,10 @@ If that's not enough, you can see [Overriding templates](#overriding-templates)
 In Hugo, layouts can live in either the project’s (root) or the themes’ layout folders, any template inside the root layout folder will override theme's layout that relative to it, for example: `layouts/_default/baseof.html` will override `themes/hermit/layouts/_default/baseof.html`. So, you can easily customize the theme without edit it directly, which makes updating the theme easier. Here's some common customizations:
 
 ##### Customize social icons
-
-You can modify or add any svg icons in site's `layouts/partials/svg.html`
+You can modify or add any svg icons in site's `layouts/partials/svg.html`.
 
 ##### Customize comment system
-
-We only have built-in support for Disqus at the moment, if that doesn't fit your needs, you can just add html to site's `layouts/partials/comments.html`
-
-##### Add extra header
-If you want to load something(like *custom javascript*, *google fonts* etc.) in every page with header, then you can add them inside site's `layouts/partials/extra-headers.html`.
+We only have built-in support for Disqus at the moment, if that doesn't fit your needs, you can just add html to site's `layouts/partials/comments.html`.
 
 ##### Add custom analytics
 If you prefer to use different analytics system other than google analytics, then add them inside `layouts/partials/analytics.html`.
@@ -102,7 +97,11 @@ For adding custom css to the theme, you need to assign an array of references in
 [params]
   customCSS = ["css/foo.css", "css/bar.css"]
 ```
-You can reference as many stylesheets as you want. Their paths need to be relative to the `static` folder.
+You can reference as many stylesheets as you want. Their paths need to be relative to the `static` folder or they can be network resources.
+
+#### Code injection
+
+You can inject any html code to every page's document head or right above the closing body tag. This makes it easier to add any html meta data, custom css/js, dns-prefetch etc. To do this you simplely need to creat a file at site's `layouts/partials/extra-head.html` or `layouts/partials/extra-foot.html`, code inside will be injected to every page.
 
 ## Acknowledgments
 

layouts/_default/baseof.html

@@ -9,27 +9,22 @@
 	<meta name="theme-color" content="{{.}}">
 	<meta name="msapplication-TileColor" content="{{.}}">
 	{{- end }}
-	{{ template "_internal/schema.html" . -}}
-	{{ template "_internal/opengraph.html" . -}}
-	{{ template "_internal/twitter_cards.html" . -}}
-	<link rel="apple-touch-icon" sizes="180x180" href="{{"apple-touch-icon.png" | relURL}}">
-	<link rel="icon" type="image/png" sizes="32x32" href="{{"favicon-32x32.png" | relURL}}">
-	<link rel="icon" type="image/png" sizes="16x16" href="{{"favicon-16x16.png" | relURL}}">
-	<link rel="manifest" href="{{"site.webmanifest" | relURL}}">
-	<link rel="mask-icon" href="{{"safari-pinned-tab.svg" | relURL}}" color="{{.Site.Params.themeColor}}">
-	<link rel="shortcut icon" href="{{"favicon.ico" | relURL}}">
+	{{- template "_internal/schema.html" . }}
+	{{- template "_internal/opengraph.html" . }}
+	{{- template "_internal/twitter_cards.html" . }}
+	{{- partial "favicons.html" }}
 	<title>{{.Title}}</title>
 	{{ range .AlternativeOutputFormats -}}
 		{{ printf `<link rel="%s" type="%s+%s" href="%s" title="%s" />` .Rel .MediaType.Type .MediaType.Suffix .Permalink $.Site.Title | safeHTML }}
 	{{ end -}}
 	{{ $style := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "css/style.css" . | toCSS | minify | fingerprint -}}
 	<link rel="stylesheet" href="{{ $style.Permalink }}" {{ printf "integrity=%q" $style.Data.Integrity | safeHTMLAttr }}>
-	{{ block "head" . -}}{{- end }}
-	{{ range .Site.Params.CustomCSS -}}
-		<link rel="stylesheet" href="{{ . | absURL }}">
+	{{- block "head" . -}}{{- end }}
+	{{- range .Site.Params.customCSS }}
+	<link rel="stylesheet" href="{{ . | absURL }}">
 	{{- end }}
-	{{ if templates.Exists "partials/extra-headers.html" -}}
-		{{ partial "extra-headers.html" . }}
+	{{- if templates.Exists "partials/extra-head.html" -}}
+	{{ partial "extra-head.html" . }}
 	{{- end }}
 </head>
 
@@ -39,7 +34,10 @@
 	{{ block "footer" . -}}{{ end }}
 	{{ $script := resources.Get "js/main.js" | minify | fingerprint -}}
 	<script src="{{ $script.Permalink }}" {{ printf "integrity=%q" $script.Data.Integrity | safeHTMLAttr }}></script>
-	{{ partial "analytics.html" }}
+	{{- partial "analytics.html" }}
+	{{- if templates.Exists "partials/extra-foot.html" -}}
+	{{ partial "extra-foot.html" . }}
+	{{- end }}
 </body>
 
 </html>

layouts/partials/analytics.html

@@ -1 +1 @@
-{{ template "_internal/google_analytics_async.html" . }}
+{{ template "_internal/google_analytics_async.html" . }}

layouts/partials/favicons.html

@@ -0,0 +1,6 @@
+	<link rel="apple-touch-icon" sizes="180x180" href="{{"apple-touch-icon.png" | relURL}}">
+	<link rel="icon" type="image/png" sizes="32x32" href="{{"favicon-32x32.png" | relURL}}">
+	<link rel="icon" type="image/png" sizes="16x16" href="{{"favicon-16x16.png" | relURL}}">
+	<link rel="manifest" href="{{"site.webmanifest" | relURL}}">
+	<link rel="mask-icon" href="{{"safari-pinned-tab.svg" | relURL}}" color="{{.Site.Params.themeColor}}">
+	<link rel="shortcut icon" href="{{"favicon.ico" | relURL}}">