diff options
| -rw-r--r-- | README.md | 15 | ||||
| -rw-r--r-- | layouts/partials/header.html | 13 | ||||
| -rw-r--r-- | sample-config.toml | 8 |
3 files changed, 28 insertions, 8 deletions
@@ -8,6 +8,7 @@ Hugo-Octopress is a port of the classic [Octopress][octopress-link] theme to [Hu - [Code highlight](#highlight) - [Navigation menu](#menu) - [Markdown options](#markdown) +- [CSS override](#cssoverride) - [Sidebar](#sidebarlinks) - [Shortcodes](#shortcodes) - [Code caption](#codecaption) @@ -82,9 +83,11 @@ post = "/blog/:year-:month-:day-:title/" defaultDescription = "" # keywords used in meta tags - # does this even work in action? # defaultKeywords = ["keyword1" , "keyword2" , "keyword3" , "keyword4"] + # override the built-in css + # custom_css = ["css/custom.css","css/custom2.css"] + ``` ## <a name="highlight"></a>Code highlight @@ -120,6 +123,14 @@ Blackfriday is Hugo's markdown engine. For a list of options visit [https://gohu hrefTargetBlank = true # open the external links in a new window fractions = false +## <a name="menu"></a>CSS override +You can override the built-in css by using your own. Just put your own css files in the `static` directory of your website (the one in the theme directory also works but is not recommended) and modify the `custom_css` parameter in your config file. The path referenced in the parameter should be relative to the `static` folder. These css files will be added through the `header` partial after the built-in css file. + +For example, if your css files are `static/css/custom.css` and `static/css/custom2.css` then add the following to the config file: + + [params] + custom_css = ["css/custom.css","css/custom2.css"] + ## <a name="menu"></a>Navigation menu Links to the left of the navigation menu (everything other than Google search and RSS icon) can be configured here. Navigation menu is generated using the `hugo-octopress/layouts/partials/navigation.html` template. @@ -170,7 +181,7 @@ Icons are from [http://fontawesome.io](http://fontawesome.io) by Dave Gandy. To ## <a name="shortcodes"></a>Shortcodes Creating [shortcodes](https://gohugo.io/extras/shortcodes/) in Hugo was surprisingly easy. I used two plugins in Octopress that I re-created in Hugo using shortcodes. They add captions to code blocks and images. These shortcodes are located at `hugo-octopress/layouts/shortcodes/`. -I have created a repository for all of my shortcodes at [https://github.com/parsiya/Hugo-Shortcodes](https://github.com/parsiya/Hugo-Shortcodes). +I have created a repository for all of my Hugo shortcodes at [https://github.com/parsiya/Hugo-Shortcodes](https://github.com/parsiya/Hugo-Shortcodes). ### <a name="codecaption"></a>Code caption This shortcode adds a caption to codeblocks. The codeblock is wrapped in a `<figure>` tag and caption is added using `<figcaption>`. It has two parameters, `title` which is the caption of the code block and `lang` which is the language that is passed to the Hugo `highlight` function along with `linenos=true` which adds line numbers to the codeblock. diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 135cebb..21a770c 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -16,14 +16,20 @@ <!-- goes into the title bar --> <title>{{ .Title }}</title> - <!-- CSS --> + <!-- css --> + <!-- original css --> <link rel="stylesheet" href="{{ "/css/hugo-octopress.css" | absURL }}"> + <!-- css overrides --> + {{ range .Site.Params.custom_css }} + <link rel="stylesheet" href="{{ $.Site.BaseURL }}{{ . }}"> + {{ end }} + <!-- For sidebar icons - TODO: find local icons I guess--> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <!-- if you want your own highlight.css --> - <!-- + <!-- {{ if isset .Site.Params "highlight" }}<link rel="stylesheet" href="{{ "/css/highlight/" | absURL }}{{ .Site.Params.highlight }}.css">{{ end }} --> @@ -33,7 +39,7 @@ <!-- RSS --> {{ $siteTitle := .Site.Title }} {{ $authorName := .Site.Author.name }} - + <!-- {{ with .RSSLink }}<link href="{{ . }}" rel="alternate" type="application/rss+xml" title="{{ $siteTitle }} · {{ $authorName }}" />{{ end }} --> @@ -59,4 +65,3 @@ <!-- navigation --> <nav role="navigation">{{ partial "navigation.html" . }}</nav> - diff --git a/sample-config.toml b/sample-config.toml index 80a5262..346963f 100644 --- a/sample-config.toml +++ b/sample-config.toml @@ -23,7 +23,7 @@ pygmentscodefences = true [permalinks] post = "/blog/:year-:month-:day-:title/" # change the post URL to look like the old ones - +# make tags and categories work [indexes] tag = "tags" category = "categories" @@ -85,9 +85,13 @@ post = "/blog/:year-:month-:day-:title/" # change the post URL to look like the defaultDescription = "" - # does this even work in action? + # populate this with your own keywords # defaultKeywords = ["keyword1" , "keyword2" , "keyword3" , "keyword4"] + # css override files + # paths should be relative to the `static` directory (either the website static directory or the theme one) + # custom_css = ["css/custom.css","css/custom2.css"] + # blackfriday is Hugo's markdown engine. Options are at: https://gohugo.io/overview/configuration/ (scroll down to "Configure Blackfriday rendering") [blackfriday] hrefTargetBlank = true # open the external links in a new window |