Skip to content
Permalink
Browse files

feature: support override theme without changing theme files #106

  • Loading branch information
laozhu committed Jan 24, 2019
1 parent 5efbf8e commit e34e50aa42aafecd0fe1dda3b1d5b5279059ad64
Showing with 43 additions and 0 deletions.
  1. +33 βˆ’0 README.md
  2. +1 βˆ’0 assets/service-worker.js
  3. +3 βˆ’0 assets/styles/custom.scss
  4. +3 βˆ’0 exampleSite/config.toml
  5. +3 βˆ’0 layouts/partials/head.html
@@ -289,6 +289,39 @@ The resume page will be located at `/resume` off your website root. Different
from the about page, the resume page is intended as a one pager that you
can print out for job hunting.

## Custom theme

If you don't want change default theme SCSS files, you can override styles with an custom SCSS file. Set file in your `config.toml` as below.

```toml
[params]
# Overrid theme styles in this file
customStyle = "styles/custom.scss"
```

Then create `styles/custom.scss` file and write your own styles there. your custom rules will override the default ones. you can place custom.scss in theme-scoped or site-scoped assets folder.

```
.
β”œβ”€β”€ README.md
β”œβ”€β”€ assets
β”‚ └── styles
β”‚ └── custom.scss βœ…
β”œβ”€β”€ config.toml
β”œβ”€β”€ content
└── themes
└── hugo-nuo
β”œβ”€β”€ assets
β”‚ β”œβ”€β”€ images
β”‚ β”œβ”€β”€ scripts
β”‚ β”œβ”€β”€ service-worker.js
β”‚ └── styles
β”œβ”€β”€ partials
β”œβ”€β”€ main.scss
β”‚ └── custom.scss βœ…
└── theme.toml
```

## Build

> **⚠️ Big Change**
@@ -15,6 +15,7 @@ var filesToCache = [
'images/grey-prism.svg',
'images/qrcode.jpg',
'styles/main.min.css',
'styles/custom.min.css',
'scripts/index.min.js',

// Google fonts
@@ -0,0 +1,3 @@
@import 'partials/variables';

/* Override theme styles here */
@@ -71,6 +71,9 @@ copyright = "Β© This post is licensed under a Creative Commons Attribution-NonCo
# npm = "laozhu"
# reddit = "melaozhu"

# Overrid theme styles in this file
# customStyle = "styles/custom.scss"

# Changyan Comments (China Only)
changyan = false
changyanId = "cyt3toRiB"
@@ -11,6 +11,7 @@
{{- $bg := resources.Get (.Site.Params.bg | default "images/grey-prism.svg") -}}
{{- $avatar := resources.Get (.Site.Params.avatar | default "images/avatar.png") -}}
{{- $style := resources.Get "styles/main.scss" | resources.ToCSS | resources.Minify -}}
{{- $customStyle := resources.Get (.Site.Params.customStyle | default "styles/custom.scss") | resources.ToCSS | resources.Minify -}}

<!-- DNS Prefetch -->
<link href="//cdn.jsdelivr.net" rel="dns-prefetch">
@@ -116,6 +117,7 @@

<!-- Preload -->
<link rel="preload" href="{{ $style.RelPermalink }}" as="style">
{{ with .Site.Params.customStyle }}<link rel="preload" href="{{ $customStyle.RelPermalink }}" as="style">{{ end }}
<link rel="preload" href="https://fonts.googleapis.com/css?family=Lobster" as="style">
<link rel="preload" href="{{ $avatar.RelPermalink }}" as="image">
<link rel="preload" href="{{ $bg.RelPermalink }}" as="image">
@@ -127,6 +129,7 @@
}
</style>
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
{{ with .Site.Params.customStyle }}<link rel="stylesheet" href="{{ $customStyle.RelPermalink }}">{{ end }}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">

<!-- Medium Zoom -->

0 comments on commit e34e50a

Please sign in to comment.
You can’t perform that action at this time.