diff options
author | Track3 <pengliabc@live.cn> | 2018-12-31 12:09:40 +0300 |
---|---|---|
committer | Track3 <pengliabc@live.cn> | 2018-12-31 12:09:40 +0300 |
commit | f5b68c452f6df102ee2e40e638cb8988798099ef (patch) | |
tree | 97389da4b381d0b5a4c39d9bbf11ab93f0c499b1 | |
parent | 97cc83914fc7ed67b623d499fbb0cde5d8fe2737 (diff) |
Add more customizations
-rw-r--r-- | README.md | 15 | ||||
-rw-r--r-- | layouts/_default/baseof.html | 28 | ||||
-rw-r--r-- | layouts/partials/analytics.html | 2 | ||||
-rw-r--r-- | layouts/partials/favicons.html | 6 |
4 files changed, 27 insertions, 24 deletions
@@ -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 diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 6758c98..976b786 100644 --- a/layouts/_default/baseof.html +++ b/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> diff --git a/layouts/partials/analytics.html b/layouts/partials/analytics.html index f13b4a0..b1f9af8 100644 --- a/layouts/partials/analytics.html +++ b/layouts/partials/analytics.html @@ -1 +1 @@ -{{ template "_internal/google_analytics_async.html" . }}
\ No newline at end of file +{{ template "_internal/google_analytics_async.html" . }} diff --git a/layouts/partials/favicons.html b/layouts/partials/favicons.html new file mode 100644 index 0000000..27f5226 --- /dev/null +++ b/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}}"> |