add blog capability
This commit is contained in:
@@ -20,6 +20,9 @@ extensions = [ "hardLineBreak" ]
|
||||
custom_css = ['css/custom.css']
|
||||
custom_js = []
|
||||
|
||||
[params.blog]
|
||||
headline = "Thoughts about tech, politics, and more"
|
||||
|
||||
[params.social]
|
||||
Github = "mxmehl"
|
||||
Git = "https://src.mehl.mx/mxmehl"
|
||||
|
||||
@@ -4,7 +4,7 @@ date: 2014-09-28
|
||||
linktitle: Creating a New Theme
|
||||
title: Creating a New Theme
|
||||
highlight: true
|
||||
draft: true
|
||||
draft: false
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -14,7 +14,9 @@ categories = [
|
||||
"golang",
|
||||
]
|
||||
highlight = "true"
|
||||
draft = true
|
||||
draft = false
|
||||
headerimage = "placeholder.jpg"
|
||||
headercredits = "Unsplash, [Dlanor S](https://unsplash.com/photos/2xEQDxB0ss4)"
|
||||
+++
|
||||
|
||||
Hugo uses the excellent [go][] [html/template][gohtmltemplate] library for
|
||||
|
||||
@@ -13,7 +13,7 @@ categories = [
|
||||
"golang",
|
||||
]
|
||||
highlight = "true"
|
||||
draft = true
|
||||
draft = false
|
||||
+++
|
||||
|
||||
## Step 1. Install Hugo
|
||||
|
||||
@@ -3,7 +3,7 @@ date: 2014-03-10
|
||||
linktitle: Migrating from Jekyll
|
||||
title: Migrate to Hugo from Jekyll
|
||||
highlight: "true"
|
||||
draft: true
|
||||
draft: false
|
||||
---
|
||||
|
||||
## Move static content to `static`
|
||||
|
||||
@@ -1,31 +1,43 @@
|
||||
{{ partial "head" . }}
|
||||
<body>
|
||||
<div id="wrap">
|
||||
<!-- Header -->
|
||||
{{ partial "header" . }}
|
||||
<div class="container">
|
||||
<h1>Archive</h1>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
{{ range .Data.Pages.ByPublishDate.Reverse }}
|
||||
<div class="row">
|
||||
<div class="col-sm-4 col-md-4 col-lg-4">
|
||||
<h5 style="text-align: right">
|
||||
{{ .Date.Format "January 2, 2006" }}
|
||||
</h5>
|
||||
</div>
|
||||
<div class="col-sm-8 col-md-8 col-lg-8">
|
||||
<h5 style="text-align: left">
|
||||
<strong><a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></strong>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<body>
|
||||
<div id="wrap">
|
||||
<!-- Header -->
|
||||
{{ partial "header" . }}
|
||||
<div class="container archive">
|
||||
<h1>{{ .Site.Params.Blog.Headline }}
|
||||
{{ if (isset .Data "Singular") }}
|
||||
<br />({{ .Data.Singular | humanize }}: {{lower .Title}})
|
||||
<span class="article-rss"><a href="/{{ .Data.Plural }}/{{lower .Title}}/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i></a></span>
|
||||
{{ else }}
|
||||
<span class="article-rss"><a href="/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i></a></span>
|
||||
{{ end }}
|
||||
</h1>
|
||||
{{ if .Site.Params.Social.CommentsProvider }}
|
||||
<p><a href="{{ .Site.Params.Social.CommentsProvider }}">Subscribe</a> to my Blog via Diaspora, Mastodon, Friendica or GNU Social. Never miss a article! Reshare, like and discuss it!</p>
|
||||
{{ end }}
|
||||
<p class="categories">
|
||||
<a class="label label-success" href="/articles">All</a>
|
||||
{{ range $name, $taxonomy := .Site.Taxonomies.categories }}
|
||||
<a class="label label-success" href="{{ "/categories/" | relLangURL }}{{ $name | urlize }}">
|
||||
{{ humanize $name }}
|
||||
</a>
|
||||
{{ end }}
|
||||
</p>
|
||||
|
||||
<div class="panel panel-default panel-overview">
|
||||
<div class="blogpost">
|
||||
{{ range .Data.Pages.ByPublishDate.Reverse }}
|
||||
<div class="blog-summary">
|
||||
<h4><strong><a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></strong></h4>
|
||||
<div class="metadata">Posted on {{ .Date.Format "2 January 2006" }} - Tagged with {{ range $i, $tag := .Params.tags }}{{ if $i }}, {{ end }}<a href="/tags/{{ lower $tag }}">{{ $tag }}</a>{{ end }}</div>
|
||||
<p>{{ .Summary }} <a class="learn-more" href="{{ .RelPermalink }}"></a></p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer -->
|
||||
{{ partial "footer" . }}
|
||||
</body>
|
||||
</div>
|
||||
<!-- Footer -->
|
||||
{{ partial "footer" . }}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -6,24 +6,27 @@
|
||||
{{ partial "header" . }}
|
||||
|
||||
<div class="container {{ replace (.LinkTitle | lower) " " "_" }}"> <!-- add link title add class -->
|
||||
<div class="blog-post">
|
||||
<h1>{{ .Title }}</h1>
|
||||
</div>
|
||||
{{ if ne .Params.page true }}
|
||||
<div class="blog-title">
|
||||
<h4>
|
||||
{{ .Date.Format "January 2, 2006" }}
|
||||
<div>
|
||||
<p class="categories">
|
||||
{{ .Date.Format "2 January 2006" }}
|
||||
|
||||
{{ range .Params.tags }}
|
||||
<span class="label label-success">{{ . }}</span>
|
||||
|
||||
<a class="label label-success" href="/tags/{{ lower . }}">{{ . }}</a>
|
||||
{{ end }}
|
||||
</h4>
|
||||
</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<div class="blogpost">
|
||||
{{ if isset .Params "headerimage" }}
|
||||
<div class="header-image">
|
||||
<img src="/img/{{ .Params.headerImage }}" />
|
||||
<p>{{ with .Params.headercredits }}{{ . | markdownify }}{{ end }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ .Content }}
|
||||
<!-- only show related posts if param is true, or if it's not a page -->
|
||||
{{ if or (eq .Params.related true) (ne .Params.page true) }}
|
||||
@@ -34,7 +37,7 @@
|
||||
<div class="row">
|
||||
<div class="col-sm-4 col-md-4 col-lg-4">
|
||||
<h6 style="text-align: right">
|
||||
{{ .Date.Format "January 2, 2006" }}
|
||||
{{ .Date.Format "2 January 2006" }}
|
||||
</h6>
|
||||
</div>
|
||||
<div class="col-sm-8 col-md-8 col-lg-8">
|
||||
|
||||
@@ -11,13 +11,24 @@ div.footer {
|
||||
.container a:hover {
|
||||
color: #12437A;
|
||||
}
|
||||
div.container.links .label-success {
|
||||
.container .label-success {
|
||||
background-color: rgba(92, 139, 184, 0.6);
|
||||
color: #FFF;
|
||||
}
|
||||
div.container h1 {
|
||||
.container a.label-success:hover {
|
||||
background-color: rgba(92, 139, 184, 0.9);
|
||||
color: #FFF;
|
||||
}
|
||||
.container h1 {
|
||||
font-weight: bold;
|
||||
color: #0D76EC;
|
||||
}
|
||||
.container h4 a {
|
||||
color: #0D76EC;
|
||||
}
|
||||
.container h4 a:hover {
|
||||
color: #0060CC;
|
||||
}
|
||||
|
||||
/* Avoid scrollbar jumps in centering
|
||||
* see https://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
|
||||
@@ -63,3 +74,49 @@ div.contact p {
|
||||
.social-links li a:hover i {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* BLOG */
|
||||
.categories {
|
||||
font-size: 18px;
|
||||
margin: 1em 0 3em 0;
|
||||
}
|
||||
.blog-summary {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
.metadata {
|
||||
font-size: 0.8em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.blogpost .header-image img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.blogpost .header-image p {
|
||||
opacity: 0.7;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
line-height: 1em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
a.learn-more {
|
||||
font-size: 1.8em;
|
||||
line-height: 0.8em;
|
||||
font-weight: 700;
|
||||
font-variant: small-caps;
|
||||
text-transform: lowercase;
|
||||
padding: 0 1em 0 .3em;
|
||||
position: absolute;
|
||||
}
|
||||
a.learn-more::after {
|
||||
position: absolute;
|
||||
right: 0.3em;
|
||||
content: " » ";
|
||||
opacity: .8;
|
||||
transition: all 150ms linear;
|
||||
}
|
||||
a.learn-more:hover::after {
|
||||
right: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user