andy/hermit-V2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add more customizations

Browse source
This commit is contained in:
Track3 2018-12-31 17:09:40 +08:00
parent 97cc83914f
commit f5b68c452f
4 changed files with 27 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
README.md
View file

@ -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

28
layouts/_default/baseof.html
View file

@ -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>

2
layouts/partials/analytics.html
View file

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

6
layouts/partials/favicons.html Normal file
View file

@ -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}}">