Remove unused themes
|
|
@ -1,9 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2018 digiVend UG
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
# Bleach for Hugo
|
||||
|
||||

|
||||
|
||||
Bleach is an HTML5 and Bootstrap based blog template for Hugo. It provides a simple and clean look for a modern and professional blog.
|
||||
|
||||
## Features
|
||||
|
||||
- Fully Responsive
|
||||
- Bootstrap
|
||||
- Lightweight
|
||||
|
||||
## License
|
||||
|
||||
This Template is released under [the MIT License](https://opensource.org/licenses/MIT).
|
||||
|
||||
## Installation
|
||||
|
||||
[Getting Started Guide](https://gohugo.io/getting-started/installing/)
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
+++
|
||||
+++
|
||||
|
|
@ -1,475 +0,0 @@
|
|||
/*= Basics =*/
|
||||
@import url(
|
||||
https://fonts.googleapis.com/css?family=Roboto:400,
|
||||
300,
|
||||
100,
|
||||
500,
|
||||
700
|
||||
);
|
||||
@import url(
|
||||
https://fonts.googleapis.com/css?family=Roboto+Condensed:400,
|
||||
300,
|
||||
700
|
||||
);
|
||||
@import url(https://fonts.googleapis.com/css?family=Glegoo);
|
||||
|
||||
body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
max-width: 90%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: rgba(100, 100, 100, 0.8);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: block;
|
||||
font-size: 1.5em;
|
||||
margin-block-start: 0.83em;
|
||||
margin-block-end: 0.83em;
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-end: 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: block;
|
||||
font-size: 1.17em;
|
||||
margin-block-start: 1em;
|
||||
margin-block-end: 1em;
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-end: 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.clear {
|
||||
display: table;
|
||||
content: " ";
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lightText {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
fill: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
.line-spacer {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
height: 0.5pt;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.content {
|
||||
}
|
||||
|
||||
.fof {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/*= Topbar =*/
|
||||
.topbar {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
color: #fff;
|
||||
transition: all 0.2s ease-out 0s;
|
||||
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 1px solid #dedede;
|
||||
z-index: 10;
|
||||
height: 67px;
|
||||
}
|
||||
|
||||
.topbar.animated-header {
|
||||
padding: 20px 0;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.brand {
|
||||
margin: 10px;
|
||||
height: 47px;
|
||||
}
|
||||
|
||||
.brand-title,
|
||||
.brand-title a {
|
||||
position: relative;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-weight: 600;
|
||||
font-size: 26px;
|
||||
line-height: 1.6;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar.bg-light {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.navbar .nav-item .nav-link {
|
||||
color: #444 !important;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: 0.3s all;
|
||||
text-transform: uppercase;
|
||||
padding: 5px 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar .nav-item .nav-link:hover {
|
||||
color: #02bdd5 !important;
|
||||
}
|
||||
|
||||
.navbar .nav-item:last-child .nav-link {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.head-spacer {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/*= Collection Body =*/
|
||||
|
||||
.collection {
|
||||
margin-bottom: 40px !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.collection-item-large {
|
||||
max-width: 1072px !important;
|
||||
width: 100vw;
|
||||
margin-bottom: 15px !important;
|
||||
box-sizing: border-box;
|
||||
max-height: 350px;
|
||||
}
|
||||
|
||||
.collection-item-large-thumb,
|
||||
.collection-item-large-content {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
max-height: 350px;
|
||||
}
|
||||
|
||||
.collection-item-large-content {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.collection-item-large-thumb {
|
||||
width: 100%;
|
||||
height: 350px !important;
|
||||
}
|
||||
|
||||
.collection-item-large-headline {
|
||||
font-weight: 600;
|
||||
font-size: 34px;
|
||||
line-height: 1;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.collection-item-large-description,
|
||||
.collection-item-description {
|
||||
font-weight: 400 !important;
|
||||
font-size: 20px !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
.collection-item-clearfix {
|
||||
margin-top: 20px;
|
||||
font-size: 15px;
|
||||
line-height: 1.4px;
|
||||
padding-left: 10px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.collection-item {
|
||||
margin-top: 15px !important;
|
||||
margin-bottom: 15px !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.collection-item-thumb,
|
||||
.collection-item-large-thumb {
|
||||
display: block;
|
||||
background-origin: border-box !important;
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
.collection-item-thumb {
|
||||
height: 172px;
|
||||
}
|
||||
|
||||
.collection-item-content {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.collection-item-headline {
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
text-overflow: ellipsis !important;
|
||||
|
||||
line-height: 1.1;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/*= Footer =*/
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
height: 40px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.copyright,
|
||||
.impressum,
|
||||
.social {
|
||||
margin-top: 10px !important;
|
||||
margin-bottom: 10px !important;
|
||||
font-size: 18px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.impressum {
|
||||
float: right;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.impressum a {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.social {
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.social a {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/*= Post =*/
|
||||
|
||||
.post {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.post-header {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 60%;
|
||||
max-width: 1072px;
|
||||
}
|
||||
|
||||
.maintitle {
|
||||
padding-top: 16px !important;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 400;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 22px;
|
||||
font-size: 28px;
|
||||
line-height: 1.22;
|
||||
letter-spacing: -0.012em;
|
||||
}
|
||||
|
||||
.figure {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
margin-top: 22px;
|
||||
margin-bottom: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.figure img {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0s linear 0s, opacity 0.4s 0s;
|
||||
}
|
||||
|
||||
/*= Paginator =*/
|
||||
|
||||
.paginator {
|
||||
margin-top: 40px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.paginator .paginator-item {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.paginator .paginator-item a[disabled] {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.paginator .paginator-item a.active {
|
||||
border: 1px solid rgba(0, 0, 0, 0.6);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.paginator .paginator-item a:hover:not(.active) {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/*= Resize =*/
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.collection-latest {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.collection-latest {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.collection-item-large-thumb {
|
||||
width: 100%;
|
||||
height: 350px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.collection-latest {
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.collection-item-large-thumb {
|
||||
max-width: 690px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.collection-item-large-content {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) and (max-width: 767px) {
|
||||
.collection-item-large-thumb {
|
||||
width: 510px;
|
||||
height: 172px !important;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.collection-item-large-content {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.collection-item-large-headline {
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
text-overflow: ellipsis !important;
|
||||
line-height: 1.1;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.collection-item-large-description {
|
||||
font-weight: 400 !important;
|
||||
font-size: 20px !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
.line-spacer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.collection-item-large-thumb {
|
||||
margin-right: 47px;
|
||||
height: 172px !important;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.collection-item-large-content {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.collection-item-large-headline {
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
text-overflow: ellipsis !important;
|
||||
line-height: 1.1;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.collection-item-large-description {
|
||||
font-weight: 400 !important;
|
||||
font-size: 20px !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
.line-spacer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 300px) {
|
||||
.brand-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
baseURL = "https://example.com"
|
||||
languageCode = "en-us"
|
||||
defaultContentLanguage = "en"
|
||||
title = "Bleach Example"
|
||||
theme = "Bleach"
|
||||
|
||||
[params]
|
||||
description = "A simple and lightweight Hugo theme for a blazing fast static blog!"
|
||||
author = "Your Name"
|
||||
logo = "images/logo.jpg"
|
||||
dateFormat = "Jan 2, 2006"
|
||||
googleAnalitycsID = "Your ID"
|
||||
|
||||
[params.footer]
|
||||
impressum = false
|
||||
company = "example Inc."
|
||||
|
||||
[params.social]
|
||||
facebook = "https://facebooke.com"
|
||||
twitter = "https://twitter.com"
|
||||
instagram = "https://instagram.com"
|
||||
# github = "https://github.com"
|
||||
# linkedin = "https://linkedin.com"
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
---
|
||||
title: "Impressum"
|
||||
date: "2019-03-07"
|
||||
type: "impressum"
|
||||
author: Daniel Igel
|
||||
---
|
||||
|
||||
# Impressum
|
||||
|
||||
This site is really only necessary for German users. Do learn more about an Impressum click [here](https://www.e-recht24.de/artikel/datenschutz/209.html) (German).
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
---
|
||||
title: "Basic Block Post"
|
||||
date: "2019-03-07"
|
||||
description: "This is an example blog post."
|
||||
tags: ["basic", "templates", "example"]
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
|
|
@ -1,325 +0,0 @@
|
|||
---
|
||||
date: "2014-04-02"
|
||||
tags: ["go", "templates", "hugo"]
|
||||
title: "(Hu)go Template Primer"
|
||||
image: "images/program.jpeg"
|
||||
---
|
||||
|
||||
Hugo uses the excellent [Go][] [html/template][gohtmltemplate] library for
|
||||
its template engine. It is an extremely lightweight engine that provides a very
|
||||
small amount of logic. In our experience that it is just the right amount of
|
||||
logic to be able to create a good static website. If you have used other
|
||||
template systems from different languages or frameworks you will find a lot of
|
||||
similarities in Go templates.
|
||||
|
||||
This document is a brief primer on using Go templates. The [Go docs][gohtmltemplate]
|
||||
provide more details.
|
||||
|
||||
## Introduction to Go Templates
|
||||
|
||||
Go templates provide an extremely simple template language. It adheres to the
|
||||
belief that only the most basic of logic belongs in the template or view layer.
|
||||
One consequence of this simplicity is that Go templates parse very quickly.
|
||||
|
||||
A unique characteristic of Go templates is they are content aware. Variables and
|
||||
content will be sanitized depending on the context of where they are used. More
|
||||
details can be found in the [Go docs][gohtmltemplate].
|
||||
|
||||
## Basic Syntax
|
||||
|
||||
Golang templates are HTML files with the addition of variables and
|
||||
functions.
|
||||
|
||||
**Go variables and functions are accessible within {{ }}**
|
||||
|
||||
Accessing a predefined variable "foo":
|
||||
|
||||
{{ foo }}
|
||||
|
||||
**Parameters are separated using spaces**
|
||||
|
||||
Calling the add function with input of 1, 2:
|
||||
|
||||
{{ add 1 2 }}
|
||||
|
||||
**Methods and fields are accessed via dot notation**
|
||||
|
||||
Accessing the Page Parameter "bar"
|
||||
|
||||
{{ .Params.bar }}
|
||||
|
||||
**Parentheses can be used to group items together**
|
||||
|
||||
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
|
||||
|
||||
## Variables
|
||||
|
||||
Each Go template has a struct (object) made available to it. In hugo each
|
||||
template is passed either a page or a node struct depending on which type of
|
||||
page you are rendering. More details are available on the
|
||||
[variables](/layout/variables) page.
|
||||
|
||||
A variable is accessed by referencing the variable name.
|
||||
|
||||
<title>{{ .Title }}</title>
|
||||
|
||||
Variables can also be defined and referenced.
|
||||
|
||||
{{ $address := "123 Main St."}}
|
||||
{{ $address }}
|
||||
|
||||
## Functions
|
||||
|
||||
Go template ship with a few functions which provide basic functionality. The Go
|
||||
template system also provides a mechanism for applications to extend the
|
||||
available functions with their own. [Hugo template
|
||||
functions](/layout/functions) provide some additional functionality we believe
|
||||
are useful for building websites. Functions are called by using their name
|
||||
followed by the required parameters separated by spaces. Template
|
||||
functions cannot be added without recompiling hugo.
|
||||
|
||||
**Example:**
|
||||
|
||||
{{ add 1 2 }}
|
||||
|
||||
## Includes
|
||||
|
||||
When including another template you will pass to it the data it will be
|
||||
able to access. To pass along the current context please remember to
|
||||
include a trailing dot. The templates location will always be starting at
|
||||
the /layout/ directory within Hugo.
|
||||
|
||||
**Example:**
|
||||
|
||||
{{ template "chrome/header.html" . }}
|
||||
|
||||
## Logic
|
||||
|
||||
Go templates provide the most basic iteration and conditional logic.
|
||||
|
||||
### Iteration
|
||||
|
||||
Just like in Go, the Go templates make heavy use of range to iterate over
|
||||
a map, array or slice. The following are different examples of how to use
|
||||
range.
|
||||
|
||||
**Example 1: Using Context**
|
||||
|
||||
{{ range array }}
|
||||
{{ . }}
|
||||
{{ end }}
|
||||
|
||||
**Example 2: Declaring value variable name**
|
||||
|
||||
{{range $element := array}}
|
||||
{{ $element }}
|
||||
{{ end }}
|
||||
|
||||
**Example 2: Declaring key and value variable name**
|
||||
|
||||
{{range $index, $element := array}}
|
||||
{{ $index }}
|
||||
{{ $element }}
|
||||
{{ end }}
|
||||
|
||||
### Conditionals
|
||||
|
||||
If, else, with, or, & and provide the framework for handling conditional
|
||||
logic in Go Templates. Like range, each statement is closed with `end`.
|
||||
|
||||
Go Templates treat the following values as false:
|
||||
|
||||
- false
|
||||
- 0
|
||||
- any array, slice, map, or string of length zero
|
||||
|
||||
**Example 1: If**
|
||||
|
||||
{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
|
||||
|
||||
**Example 2: If -> Else**
|
||||
|
||||
{{ if isset .Params "alt" }}
|
||||
{{ index .Params "alt" }}
|
||||
{{else}}
|
||||
{{ index .Params "caption" }}
|
||||
{{ end }}
|
||||
|
||||
**Example 3: And & Or**
|
||||
|
||||
{{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||
|
||||
**Example 4: With**
|
||||
|
||||
An alternative way of writing "if" and then referencing the same value
|
||||
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||
and skips the block if the variable is absent.
|
||||
|
||||
The first example above could be simplified as:
|
||||
|
||||
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
|
||||
|
||||
**Example 5: If -> Else If**
|
||||
|
||||
{{ if isset .Params "alt" }}
|
||||
{{ index .Params "alt" }}
|
||||
{{ else if isset .Params "caption" }}
|
||||
{{ index .Params "caption" }}
|
||||
{{ end }}
|
||||
|
||||
## Pipes
|
||||
|
||||
One of the most powerful components of Go templates is the ability to
|
||||
stack actions one after another. This is done by using pipes. Borrowed
|
||||
from unix pipes, the concept is simple, each pipeline's output becomes the
|
||||
input of the following pipe.
|
||||
|
||||
Because of the very simple syntax of Go templates, the pipe is essential
|
||||
to being able to chain together function calls. One limitation of the
|
||||
pipes is that they only can work with a single value and that value
|
||||
becomes the last parameter of the next pipeline.
|
||||
|
||||
A few simple examples should help convey how to use the pipe.
|
||||
|
||||
**Example 1 :**
|
||||
|
||||
{{ if eq 1 1 }} Same {{ end }}
|
||||
|
||||
is the same as
|
||||
|
||||
{{ eq 1 1 | if }} Same {{ end }}
|
||||
|
||||
It does look odd to place the if at the end, but it does provide a good
|
||||
illustration of how to use the pipes.
|
||||
|
||||
**Example 2 :**
|
||||
|
||||
{{ index .Params "disqus_url" | html }}
|
||||
|
||||
Access the page parameter called "disqus_url" and escape the HTML.
|
||||
|
||||
**Example 3 :**
|
||||
|
||||
{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||
Stuff Here
|
||||
{{ end }}
|
||||
|
||||
Could be rewritten as
|
||||
|
||||
{{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
|
||||
Stuff Here
|
||||
{{ end }}
|
||||
|
||||
## Context (aka. the dot)
|
||||
|
||||
The most easily overlooked concept to understand about Go templates is that {{ . }}
|
||||
always refers to the current context. In the top level of your template this
|
||||
will be the data set made available to it. Inside of a iteration it will have
|
||||
the value of the current item. When inside of a loop the context has changed. .
|
||||
will no longer refer to the data available to the entire page. If you need to
|
||||
access this from within the loop you will likely want to set it to a variable
|
||||
instead of depending on the context.
|
||||
|
||||
**Example:**
|
||||
|
||||
{{ $title := .Site.Title }}
|
||||
{{ range .Params.tags }}
|
||||
<li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li>
|
||||
{{ end }}
|
||||
|
||||
Notice how once we have entered the loop the value of {{ . }} has changed. We
|
||||
have defined a variable outside of the loop so we have access to it from within
|
||||
the loop.
|
||||
|
||||
# Hugo Parameters
|
||||
|
||||
Hugo provides the option of passing values to the template language
|
||||
through the site configuration (for sitewide values), or through the meta
|
||||
data of each specific piece of content. You can define any values of any
|
||||
type (supported by your front matter/config format) and use them however
|
||||
you want to inside of your templates.
|
||||
|
||||
## Using Content (page) Parameters
|
||||
|
||||
In each piece of content you can provide variables to be used by the
|
||||
templates. This happens in the [front matter](/content/front-matter).
|
||||
|
||||
An example of this is used in this documentation site. Most of the pages
|
||||
benefit from having the table of contents provided. Sometimes the TOC just
|
||||
doesn't make a lot of sense. We've defined a variable in our front matter
|
||||
of some pages to turn off the TOC from being displayed.
|
||||
|
||||
Here is the example front matter:
|
||||
|
||||
```
|
||||
---
|
||||
title: "Permalinks"
|
||||
date: "2013-11-18"
|
||||
aliases:
|
||||
- "/doc/permalinks/"
|
||||
groups: ["extras"]
|
||||
groups_weight: 30
|
||||
notoc: true
|
||||
---
|
||||
```
|
||||
|
||||
Here is the corresponding code inside of the template:
|
||||
|
||||
{{ if not .Params.notoc }}
|
||||
<div id="toc" class="well col-md-4 col-sm-6">
|
||||
{{ .TableOfContents }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
## Using Site (config) Parameters
|
||||
|
||||
In your top-level configuration file (eg, `config.yaml`) you can define site
|
||||
parameters, which are values which will be available to you in chrome.
|
||||
|
||||
For instance, you might declare:
|
||||
|
||||
```yaml
|
||||
params:
|
||||
CopyrightHTML: "Copyright © 2013 John Doe. All Rights Reserved."
|
||||
TwitterUser: "spf13"
|
||||
SidebarRecentLimit: 5
|
||||
```
|
||||
|
||||
Within a footer layout, you might then declare a `<footer>` which is only
|
||||
provided if the `CopyrightHTML` parameter is provided, and if it is given,
|
||||
you would declare it to be HTML-safe, so that the HTML entity is not escaped
|
||||
again. This would let you easily update just your top-level config file each
|
||||
January 1st, instead of hunting through your templates.
|
||||
|
||||
```
|
||||
{{if .Site.Params.CopyrightHTML}}<footer>
|
||||
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div>
|
||||
</footer>{{end}}
|
||||
```
|
||||
|
||||
An alternative way of writing the "if" and then referencing the same value
|
||||
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||
and skips the block if the variable is absent:
|
||||
|
||||
```
|
||||
{{with .Site.Params.TwitterUser}}<span class="twitter">
|
||||
<a href="https://twitter.com/{{.}}" rel="author">
|
||||
<img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}"
|
||||
alt="Twitter"></a>
|
||||
</span>{{end}}
|
||||
```
|
||||
|
||||
Finally, if you want to pull "magic constants" out of your layouts, you can do
|
||||
so, such as in this example:
|
||||
|
||||
```
|
||||
<nav class="recent">
|
||||
<h1>Recent Posts</h1>
|
||||
<ul>{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
|
||||
<li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
|
||||
{{end}}</ul>
|
||||
</nav>
|
||||
```
|
||||
|
||||
[go]: https://golang.org/
|
||||
[gohtmltemplate]: https://golang.org/pkg/html/template/
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
---
|
||||
date: "2014-04-02"
|
||||
tags: ["hugo", "git", "fun"]
|
||||
title: "Getting Started with Hugo"
|
||||
image: "images/draw.jpeg"
|
||||
---
|
||||
|
||||
## Step 1. Install Hugo
|
||||
|
||||
Go to [Hugo releases](https://github.com/spf13/hugo/releases) and download the
|
||||
appropriate version for your OS and architecture.
|
||||
|
||||
Save it somewhere specific as we will be using it in the next step.
|
||||
|
||||
More complete instructions are available at [Install Hugo](https://gohugo.io/getting-started/installing/)
|
||||
|
||||
## Step 2. Build the Docs
|
||||
|
||||
Hugo has its own example site which happens to also be the documentation site
|
||||
you are reading right now.
|
||||
|
||||
Follow the following steps:
|
||||
|
||||
1. Clone the [Hugo repository](http://github.com/spf13/hugo)
|
||||
2. Go into the repo
|
||||
3. Run hugo in server mode and build the docs
|
||||
4. Open your browser to http://localhost:1313
|
||||
|
||||
Corresponding pseudo commands:
|
||||
|
||||
git clone https://github.com/spf13/hugo
|
||||
cd hugo
|
||||
/path/to/where/you/installed/hugo server --source=./docs
|
||||
> 29 pages created
|
||||
> 0 tags index created
|
||||
> in 27 ms
|
||||
> Web Server is available at http://localhost:1313
|
||||
> Press ctrl+c to stop
|
||||
|
||||
Once you've gotten here, follow along the rest of this page on your local build.
|
||||
|
||||
## Step 3. Change the docs site
|
||||
|
||||
Stop the Hugo process by hitting Ctrl+C.
|
||||
|
||||
Now we are going to run hugo again, but this time with hugo in watch mode.
|
||||
|
||||
/path/to/hugo/from/step/1/hugo server --source=./docs --watch
|
||||
> 29 pages created
|
||||
> 0 tags index created
|
||||
> in 27 ms
|
||||
> Web Server is available at http://localhost:1313
|
||||
> Watching for changes in /Users/spf13/Code/hugo/docs/content
|
||||
> Press ctrl+c to stop
|
||||
|
||||
|
||||
Open your [favorite editor](http://vim.spf13.com) and change one of the source
|
||||
content pages. How about changing this very file to *fix the typo*. How about changing this very file to *fix the typo*.
|
||||
|
||||
Content files are found in `docs/content/`. Unless otherwise specified, files
|
||||
are located at the same relative location as the url, in our case
|
||||
`docs/content/overview/quickstart.md`.
|
||||
|
||||
Change and save this file.. Notice what happened in your terminal.
|
||||
|
||||
> Change detected, rebuilding site
|
||||
|
||||
> 29 pages created
|
||||
> 0 tags index created
|
||||
> in 26 ms
|
||||
|
||||
Refresh the browser and observe that the typo is now fixed.
|
||||
|
||||
Notice how quick that was. Try to refresh the site before it's finished building. I double dare you.
|
||||
Having nearly instant feedback enables you to have your creativity flow without waiting for long builds.
|
||||
|
||||
## Step 4. Have fun
|
||||
|
||||
The best way to learn something is to play with it.
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
---
|
||||
title: "Example latest Post"
|
||||
date: 2019-03-07T00:00:01
|
||||
description: "This is an example latest post, for you to see how i looks."
|
||||
image: "images/latest.jpeg"
|
||||
tags: ["latest", "hugo", "example"]
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
|
Before Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 692 KiB |
|
Before Width: | Height: | Size: 281 KiB |
|
|
@ -1,5 +0,0 @@
|
|||
{{ define "main"}}
|
||||
<div class="d-flex justify-content-center align-content-center">
|
||||
404 PAGE NOT FOUND
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ with.Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
|
||||
{{- partial "head.html" . -}}
|
||||
|
||||
<body>
|
||||
{{- partial "header.html" . -}}
|
||||
<div class="content">
|
||||
{{- block "main" . }}{{- end }}
|
||||
</div>
|
||||
{{- partial "footer.html" . -}}
|
||||
|
||||
{{- partial "scripts.html" . -}}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1 +0,0 @@
|
|||
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
{{ define "main" }}
|
||||
|
||||
{{ $dateFormat := $.Site.Params.dateFormat | default "Jan 2, 2006" }}
|
||||
|
||||
<div class="container">
|
||||
<div class="post">
|
||||
<div class="post-header row">
|
||||
<div class="title-tile col-md-6">
|
||||
<h1 class="maintitle">
|
||||
{{ .Title }}
|
||||
</h1>
|
||||
<h2 class="subtitle lightText">
|
||||
{{ .Description }}
|
||||
</h2>
|
||||
|
||||
<div class="clearfix lightText">
|
||||
<i class="icon ion-md-calendar"></i> {{ dateFormat $dateFormat .Date }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="figure col-md-6">
|
||||
<img class="img-fluid"
|
||||
src="{{ absURL (default "images/default-img-header.jpeg" (default .Params.image .Params.thumbnail)) }}"
|
||||
alt="figure" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-content">
|
||||
|
||||
{{ .Content }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{ if .Params.series }}
|
||||
{{ $name := index .Params.series 0 }}
|
||||
<hr/>
|
||||
<p><a href="" id="series"></a>This is a post in the
|
||||
<b>{{$name}}</b> series.<br/>
|
||||
Other posts in this series:</p>
|
||||
|
||||
{{ $name := $name | urlize }}
|
||||
{{ $series := index .Site.Taxonomies.series $name }}
|
||||
<ul class="series">
|
||||
{{ range $series.Pages }}
|
||||
<li>{{.Date.Format "Jan 02, 2006"}} -
|
||||
<a href="{{.Permalink}}">{{.LinkTitle}}</a></li>
|
||||
{{end}}
|
||||
</ul>
|
||||
{{end}}
|
||||
{{if .NextInSection}}<p>Next: <a href="{{.NextInSection.Permalink}}">{{.NextInSection.Title}}</a></p>{{end}}
|
||||
{{if .PrevInSection}}<p>Previous: <a href="{{.PrevInSection.Permalink}}">{{.PrevInSection.Title}}</a></p>{{end}}
|
||||
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
{{ define "main" }}
|
||||
|
||||
<div class="container">
|
||||
<div class="post">
|
||||
<div class="post-content">
|
||||
|
||||
{{ .Content }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
{{ define "main" }}
|
||||
|
||||
{{ $dateFormat := $.Site.Params.dateFormat | default "Jan 2, 2006" }}
|
||||
{{ $posts := where .Pages.ByDate.Reverse "Section" "posts" }}
|
||||
{{ $paginator := .Paginate (after 1 $posts) 3 }}
|
||||
|
||||
<div class="collection">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="collection-latest">
|
||||
{{ range first 1 $posts }}
|
||||
<section class="collection-item-large">
|
||||
<div class="row">
|
||||
<a href="{{ .Permalink }}" class="col-lg-7 collection-item-large-thumb"
|
||||
style="background-image: url('{{ absURL (default "images/default-img-header.jpeg" (default .Params.image .Params.thumbnail)) }}'); background-position: 50% 50% !important;"></a>
|
||||
<div class="col-lg-5 collection-item-large-content">
|
||||
<a href="{{ .Permalink }}">
|
||||
<h3 class="collection-item-large-headline">
|
||||
{{ .Title }}
|
||||
</h3>
|
||||
<div class="collection-item-large-description lightText">
|
||||
{{ .Description | markdownify }}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="collection-item-clearfix lightText">
|
||||
<i class="icon ion-md-calendar"></i> {{ dateFormat $dateFormat .Date }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="line-spacer"></div>
|
||||
|
||||
<div class="collection-list">
|
||||
<div class="row">
|
||||
{{ range $paginator.Pages }}
|
||||
<div class="col-md-4 collection-item">
|
||||
<a href="{{ .Permalink }}" class="collection-item-thumb"
|
||||
style="background-image: url('{{ absURL (default "images/default-img-header.jpeg" (default .Params.image .Params.thumbnail)) }}'); background-position: 50% 50% !important;"></a>
|
||||
<div class="collection-item-content">
|
||||
<a href="{{ .Permalink }}">
|
||||
<h3 class="collection-item-headline">
|
||||
{{ .Title }}
|
||||
</h3>
|
||||
<div class="collection-item-description lightText">
|
||||
{{ .Description | markdownify }}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="collection-item-clearfix lightText">
|
||||
<i class="ion-md-calendar"></i> {{ dateFormat $dateFormat .Date }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ partial "paginator.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
<div class="archive-header">
|
||||
<h1>
|
||||
Category: {{ .Title }}
|
||||
{{ if .Site.Params.social.rss }}
|
||||
<a href="{{ .RSSLink }}" data-animate-hover="pulse" class="in-page-rss" target="_blank">
|
||||
<i class="fas fa-rss" title="rss"></i>
|
||||
<span class="screen-reader-text">rss</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<h1 class="screen-reader-text">Posts</h1>
|
||||
<div id="loop-container" class="loop-container">
|
||||
{{ range $index, $element := (where .Pages "Section" "post").ByDate.Reverse }}
|
||||
|
||||
{{ $scratch := newScratch }}
|
||||
{{ if .Site.Params.writers }}
|
||||
{{ $scratch.Set "writer" (index .Site.Params.writers (lower .Params.writer) | default dict) }}
|
||||
{{ else }}
|
||||
{{ $scratch.Set "writer" .Site.Params.social | default dict }}
|
||||
{{ end }}
|
||||
{{ $writer := $scratch.Get "writer" }}
|
||||
|
||||
{{ if and (isset .Params "image") .Params.image }}
|
||||
{{ if eq (mod $index 2) 0 }}
|
||||
<div class="post type-post status-publish format-standard has-post-thumbnail hentry category-design tag-memories tag-normal-post tag-standard-2 excerpt zoom full-without-featured odd excerpt">
|
||||
{{ else }}
|
||||
<div class="post type-post status-publish format-standard has-post-thumbnail hentry category-design tag-memories tag-normal-post tag-standard-2 excerpt zoom full-without-featured even excerpt">
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<div class="post type-post status-publish format-standard hentry category-standard category-travel excerpt zoom full-without-featured odd excerpt">
|
||||
{{ end }}
|
||||
|
||||
{{ if and (isset .Params "image") .Params.image }}
|
||||
<a class="featured-image-link" href="{{ .Permalink }}"><div class='featured-image lazy lazy-bg-image' {{if isset .Site.Params "usepostimgfolder"}}data-background="{{ .Permalink }}{{ .Params.image }}"{{ else }}data-background="{{ .Params.image | absURL }}"{{ end }}></div></a>
|
||||
{{ end }}
|
||||
|
||||
<div class="excerpt-container">
|
||||
<div class="excerpt-meta">
|
||||
<span class="date">{{ .Date.Format "02 January" }}</span>
|
||||
|
||||
|
||||
|
||||
{{ if and (isset .Site.Params "authorlink") .Site.Params.authorLink }}
|
||||
{{ if and (isset .Site.Params "author") .Site.Params.author }}
|
||||
<span> / </span>
|
||||
<span class="author">
|
||||
<a href="{{ $writer.link | default .Site.Params.authorlink | absURL }}" title="Posts by {{ .Params.writer | default .Site.Params.author }}" rel="author">{{ .Params.writer | default .Site.Params.author }}</a>
|
||||
</span>
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<span class="author">
|
||||
{{ .Params.writer | default .Site.Params.author }}
|
||||
</span>
|
||||
{{ end }}
|
||||
|
||||
|
||||
{{ range .Params.categories }}
|
||||
<span> / </span>
|
||||
<span class="category">
|
||||
<a href="/categories/{{ . | urlize }}">{{ . }}</a>
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class='excerpt-header'>
|
||||
<h2 class='excerpt-title'>
|
||||
<a href="{{ .Permalink }} "> {{ .Title }} </a>
|
||||
</h2>
|
||||
</div>
|
||||
<div class='excerpt-content'>
|
||||
<article>
|
||||
{{ .Summary }}
|
||||
|
||||
<div class="more-link-wrapper"><a class="more-link" href="{{ .Permalink }}">Read the post<span class="screen-reader-text">This is a Standard Post</span></a></div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="footer">
|
||||
<div class="clearfix">
|
||||
<div class="copyright float-left">
|
||||
<span>©</span>
|
||||
<script>document.write(new Date().getFullYear())</script>
|
||||
<span>
|
||||
{{ if isset .Site.Params.footer "company"}}
|
||||
{{ .Site.Params.footer.company }}
|
||||
{{ else }}
|
||||
digiVend
|
||||
{{ end }}
|
||||
</span>
|
||||
</div>
|
||||
{{ if .Site.Params.footer.impressum }}
|
||||
<div class="impressum">
|
||||
<a href="/impressum">Impressum</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
{{ "<!-- Basic Page Needs -->" | safeHTML }}
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
|
||||
<meta name="description"
|
||||
content="{{ with.Description }}{{ . }}{{ else }}{{ with.Site.Params.description }}{{ . }}{{ end }}{{ end }}" />
|
||||
{{ with.Site.Params.author }}
|
||||
<meta name="author" content="{{ . }}" />
|
||||
{{ end }}
|
||||
{{ .Hugo.Generator }}
|
||||
|
||||
{{ "<!-- Mobile Specific Metas -->" | safeHTML }}
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
{{ $title := print .Title " | " .Site.Title }}
|
||||
{{ if .IsHome }}
|
||||
{{ $title = .Site.Title }}
|
||||
{{ end }}
|
||||
<title>{{ $title }}</title>
|
||||
|
||||
<link rel="icon" href="{{"images/favicon.png" | absURL}}">
|
||||
|
||||
{{ if .Site.Params.debug }}
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
||||
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
|
||||
{{ else }}
|
||||
<link rel="stylesheet" type="text/css" href="{{"plugins/bootstrap/bootstrap.min.css" | absURL}}" />
|
||||
{{ end }}
|
||||
<link rel="stylesheet" type="text/css" href="{{"plugins/ionicons/ionicons.min.css" | absURL}}" />
|
||||
{{ "<!-- template main css file -->" | safeHTML }}
|
||||
{{ $styles := resources.Get "css/style.css" | minify}}
|
||||
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen" />
|
||||
</head>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<div class="topbar">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<a href="{{ .Site.BaseURL }}">
|
||||
<img class="brand" src="{{ absURL (default "images/logo.jpg" (default .Site.Params.logo)) }}" alt="logo" />
|
||||
</a>
|
||||
<div class="brand-title">
|
||||
{{ if isset .Site.Params "title"}}
|
||||
<a href="{{ .Site.BaseURL }}">
|
||||
{{ .Site.Params.title }}
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="social">
|
||||
{{ if isset .Site.Params.social "facebook" }}
|
||||
<a href="{{ .Site.Params.social.facebook | absURL }}">
|
||||
<i class="ion-logo-facebook"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ if isset .Site.Params.social "twitter" }}
|
||||
<a href="{{ .Site.Params.social.twitter | absURL }}">
|
||||
<i class="ion-logo-twitter"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ if isset .Site.Params.social "instagram" }}
|
||||
<a href="{{ .Site.Params.social.instagram | absURL }}">
|
||||
<i class="ion-logo-instagram"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ if isset .Site.Params.social "linkedin" }}
|
||||
<a href="{{ .Site.Params.social.linkedin | absURL }}">
|
||||
<i class="ion-logo-linkedin"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ if isset .Site.Params.social "github" }}
|
||||
<a href="{{ .Site.Params.social.github | absURL }}">
|
||||
<i class="ion-logo-github"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="head-spacer"></div>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
{{ $pag := $.Paginator }}
|
||||
{{ if gt $pag.TotalPages 1 }}
|
||||
|
||||
<div class="row">
|
||||
<div class="paginator">
|
||||
<div class="paginator-item">
|
||||
<a {{ if not $pag.HasPrev }} disabled{{ end }} href="{{ if $pag.HasPrev }}{{ $pag.Prev.URL }}{{ end }}">
|
||||
«</a> </div>
|
||||
<div class="paginator-item">
|
||||
{{$pag.PageNumber}}
|
||||
</div>
|
||||
|
||||
<div class="paginator-item">
|
||||
<a {{ if not $pag.HasNext }} disabled{{ end }}
|
||||
href="{{ if $pag.HasNext }}{{ $pag.Next.URL }}{{ end }}">»</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<div class="archive-header">
|
||||
<h1>
|
||||
Series: {{ .Title }}
|
||||
{{ if .Site.Params.social.rss }}
|
||||
<a href="{{ .RSSLink }}" data-animate-hover="pulse" class="in-page-rss" target="_blank">
|
||||
<i class="fas fa-rss" title="rss"></i>
|
||||
<span class="screen-reader-text">rss</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<h1 class="screen-reader-text">Posts</h1>
|
||||
<div id="loop-container" class="loop-container">
|
||||
{{ range $index, $element := (where .Pages "Section" "post").ByDate.Reverse }}
|
||||
{{ if and (isset .Params "image") .Params.image }}
|
||||
{{ if eq (mod $index 2) 0 }}
|
||||
<div class="post type-post status-publish format-standard has-post-thumbnail hentry category-design tag-memories tag-normal-post tag-standard-2 excerpt zoom full-without-featured odd excerpt">
|
||||
{{ else }}
|
||||
<div class="post type-post status-publish format-standard has-post-thumbnail hentry category-design tag-memories tag-normal-post tag-standard-2 excerpt zoom full-without-featured even excerpt">
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
|
||||
<div class="post type-post status-publish format-standard hentry category-standard category-travel excerpt zoom full-without-featured odd excerpt">
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{ if and (isset .Params "image") .Params.image }}
|
||||
<a class="featured-image-link" href="{{ .Permalink }}"><div class='featured-image lazy lazy-bg-image' data-background="{{ .Params.image | absURL }}"></div></a>
|
||||
|
||||
{{ end }}
|
||||
|
||||
<div class="excerpt-container">
|
||||
<div class="excerpt-meta">
|
||||
<span class="date">{{ .Date.Format "02 January 2006" }}</span> <span> / </span>
|
||||
|
||||
{{ if and (isset .Site.Params "author") .Site.Params.author }}
|
||||
|
||||
<span class="author">
|
||||
{{ if and (isset .Site.Params "authorlink") .Site.Params.authorLink }}
|
||||
<a href="{{ .Site.Params.authorLink | default "" | absURL }}" title="Posts by {{ .Site.Params.author | default "" }}" rel="author">{{ .Site.Params.author | default "" }}</a>
|
||||
{{ else }}
|
||||
{{ .Site.Params.author | default "" }}
|
||||
{{ end }}
|
||||
</span>
|
||||
{{ end }}
|
||||
|
||||
{{ range .Params.series }}
|
||||
<span> / </span>
|
||||
<span class="series">
|
||||
<a href="/series/{{ . | urlize }}">{{ . }}</a>
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class='excerpt-header'>
|
||||
<h2 class='excerpt-title'>
|
||||
<a href="{{ .Permalink }} "> {{ .Title }} </a>
|
||||
</h2>
|
||||
</div>
|
||||
<div class='excerpt-content'>
|
||||
<article>
|
||||
{{ .Summary }}
|
||||
|
||||
<div class="more-link-wrapper"><a class="more-link" href="{{ .Permalink }}">Read the post<span class="screen-reader-text">This is a Standard Post</span></a></div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<div class="archive-header">
|
||||
<h1>
|
||||
Tag: {{ .Title }}
|
||||
{{ if .Site.Params.social.rss }}
|
||||
<a href="{{ .RSSLink }}" data-animate-hover="pulse" class="in-page-rss" target="_blank">
|
||||
<i class="fas fa-rss" title="rss"></i>
|
||||
<span class="screen-reader-text">rss</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<h1 class="screen-reader-text">Posts</h1>
|
||||
<div id="loop-container" class="loop-container">
|
||||
{{ range $index, $element := (where .Pages "Section" "post").ByDate.Reverse }}
|
||||
{{ if and (isset .Params "image") .Params.image }}
|
||||
{{ if eq (mod $index 2) 0 }}
|
||||
<div class="post type-post status-publish format-standard has-post-thumbnail hentry category-design tag-memories tag-normal-post tag-standard-2 excerpt zoom full-without-featured odd excerpt">
|
||||
{{ else }}
|
||||
<div class="post type-post status-publish format-standard has-post-thumbnail hentry category-design tag-memories tag-normal-post tag-standard-2 excerpt zoom full-without-featured even excerpt">
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
|
||||
<div class="post type-post status-publish format-standard hentry category-standard category-travel excerpt zoom full-without-featured odd excerpt">
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{ if and (isset .Params "image") .Params.image }}
|
||||
<a class="featured-image-link" href="{{ .Permalink }}"><div class='featured-image lazy lazy-bg-image' data-background="{{ .Params.image | absURL }}"></div></a>
|
||||
|
||||
{{ end }}
|
||||
|
||||
<div class="excerpt-container">
|
||||
<div class="excerpt-meta">
|
||||
<span class="date">{{ .Date.Format "02 January 2006" }}</span> <span> / </span>
|
||||
|
||||
{{ if and (isset .Site.Params "author") .Site.Params.author }}
|
||||
|
||||
<span class="author">
|
||||
{{ if and (isset .Site.Params "authorlink") .Site.Params.authorLink }}
|
||||
<a href="{{ .Site.Params.authorLink | default "" | absURL }}" title="Posts by {{ .Site.Params.author | default "" }}" rel="author">{{ .Site.Params.author | default "" }}</a>
|
||||
{{ else }}
|
||||
{{ .Site.Params.author | default "" }}
|
||||
{{ end }}
|
||||
</span>
|
||||
{{ end }}
|
||||
|
||||
{{ range .Params.categories }}
|
||||
<span> / </span>
|
||||
<span class="category">
|
||||
<a href="/categories/{{ . | urlize }}">{{ . }}</a>
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class='excerpt-header'>
|
||||
<h2 class='excerpt-title'>
|
||||
<a href="{{ .Permalink }} "> {{ .Title }} </a>
|
||||
</h2>
|
||||
</div>
|
||||
<div class='excerpt-content'>
|
||||
<article>
|
||||
{{ .Summary }}
|
||||
|
||||
<div class="more-link-wrapper"><a class="more-link" href="{{ .Permalink }}">Read the post<span class="screen-reader-text">This is a Standard Post</span></a></div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
<head>{{ partial "head.html" . }}</head>
|
||||
|
||||
<body class="home blog ct-body standard">
|
||||
<div id="overflow-container" class="overflow-container">
|
||||
<a class="skip-content" href="#main">Skip to content</a>
|
||||
<header id="site-header" class="site-header" role="banner">
|
||||
<div class='top-navigation'>
|
||||
{{ partial "topnavigation.html" . }}
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
{{ partial "header.html" . }}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="main" class="main" role="main">
|
||||
|
||||
{{ partial "category.html" . }}
|
||||
</div>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
</div>
|
||||
{{ partial "scripts.html" . }}
|
||||
</body>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Page.Language | default "en" }}">
|
||||
<head>{{ partial "head.html" . }}</head>
|
||||
<body class="home blog ct-body standard">
|
||||
<div id="overflow-container" class="overflow-container">
|
||||
<a class="skip-content" href="#main">Skip to content</a>
|
||||
<header id="site-header" class="site-header" role="banner">
|
||||
|
||||
<div class="container">
|
||||
{{ partial "header.html" . }}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="main" class="main" role="main">
|
||||
<main id="site-main">
|
||||
{{ if .Site.Params.categoriesByCount }}
|
||||
{{ $.Scratch.Set "categories" .Data.Terms.ByCount }}
|
||||
{{ else }}
|
||||
{{ $.Scratch.Set "categories" .Data.Terms.Alphabetical }}
|
||||
{{ end }}
|
||||
<ul class="posts">
|
||||
<header>
|
||||
<h1>{{ i18n .Data.Plural }}</h1>
|
||||
</header>
|
||||
{{ $data := .Data }}
|
||||
{{ range $key, $value := $.Scratch.Get "categories" }}
|
||||
<li>
|
||||
<article>
|
||||
<header>
|
||||
{{ if ne $value.Name "" }}
|
||||
<a href="{{ printf "/%s/%s" $data.Plural $value.Name | urlize | relLangURL }}">{{ $value.Name }}<span style="float:right;">{{ $value.Count }}</span></a>
|
||||
{{ else }}
|
||||
{{ i18n "uncategorized" }}<span style="float:right;">{{ $value.Count }}</span>
|
||||
{{ end }}
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</main>
|
||||
{{ $.Scratch.Set "showCategories" false }}
|
||||
</div>
|
||||
{{ partial "scripts" . }}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
<head>{{ partial "head.html" . }}</head>
|
||||
|
||||
<body class="home blog ct-body standard">
|
||||
<div id="overflow-container" class="overflow-container">
|
||||
<a class="skip-content" href="#main">Skip to content</a>
|
||||
<header id="site-header" class="site-header" role="banner">
|
||||
|
||||
<div class="container">
|
||||
{{ partial "header.html" . }}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="main" class="main" role="main">
|
||||
|
||||
{{ partial "series.html" . }}
|
||||
</div>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
</div>
|
||||
{{ partial "scripts.html" . }}
|
||||
</body>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Page.Language | default "en" }}">
|
||||
<head>{{ partial "head.html" . }}</head>
|
||||
<body class="home blog ct-body standard">
|
||||
<div id="overflow-container" class="overflow-container">
|
||||
<a class="skip-content" href="#main">Skip to content</a>
|
||||
<header id="site-header" class="site-header" role="banner">
|
||||
|
||||
<div class="container">
|
||||
{{ partial "header.html" . }}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="main" class="main" role="main">
|
||||
<main id="site-main">
|
||||
{{ if .Site.Params.seriesByCount }}
|
||||
{{ $.Scratch.Set "series" .Data.Terms.ByCount }}
|
||||
{{ else }}
|
||||
{{ $.Scratch.Set "series" .Data.Terms.Alphabetical }}
|
||||
{{ end }}
|
||||
<ul class="posts">
|
||||
<header>
|
||||
<h1>{{ i18n .Data.Plural }}</h1>
|
||||
</header>
|
||||
{{ $data := .Data }}
|
||||
{{ range $key, $value := $.Scratch.Get "series" }}
|
||||
<li>
|
||||
<article>
|
||||
<header>
|
||||
{{ if ne $value.Name "" }}
|
||||
<a href="{{ printf "/%s/%s" $data.Plural $value.Name | urlize | relLangURL }}">{{ $value.Name }}<span style="float:right;">{{ $value.Count }}</span></a>
|
||||
{{ else }}
|
||||
{{ i18n "uncategorized" }}<span style="float:right;">{{ $value.Count }}</span>
|
||||
{{ end }}
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</main>
|
||||
{{ $.Scratch.Set "showCategories" false }}
|
||||
</div>
|
||||
{{ partial "scripts" . }}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
<head>{{ partial "head.html" . }}</head>
|
||||
|
||||
<body class="home blog ct-body standard">
|
||||
<div id="overflow-container" class="overflow-container">
|
||||
<a class="skip-content" href="#main">Skip to content</a>
|
||||
<header id="site-header" class="site-header" role="banner">
|
||||
<div class='top-navigation'>
|
||||
{{ partial "topnavigation.html" . }}
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
{{ partial "header.html" . }}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="main" class="main" role="main">
|
||||
|
||||
{{ partial "tag.html" . }}
|
||||
</div>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
</div>
|
||||
{{ partial "scripts.html" . }}
|
||||
</body>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Page.Language | default "en" }}">
|
||||
<head>{{ partial "head.html" . }}</head>
|
||||
<body class="home blog ct-body standard">
|
||||
<div id="overflow-container" class="overflow-container">
|
||||
<a class="skip-content" href="#main">Skip to content</a>
|
||||
<header id="site-header" class="site-header" role="banner">
|
||||
|
||||
<div class="container">
|
||||
{{ partial "header.html" . }}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="main" class="main" role="main">
|
||||
<main id="site-main">
|
||||
{{ if .Site.Params.tagsByCount }}
|
||||
{{ $.Scratch.Set "tags" .Data.Terms.ByCount }}
|
||||
{{ else }}
|
||||
{{ $.Scratch.Set "tags" .Data.Terms.Alphabetical }}
|
||||
{{ end }}
|
||||
<ul class="posts">
|
||||
<header>
|
||||
<h1>{{ i18n .Data.Plural }}</h1>
|
||||
</header>
|
||||
{{ $data := .Data }}
|
||||
{{ range $key, $value := $.Scratch.Get "tags" }}
|
||||
<li>
|
||||
<article>
|
||||
<header>
|
||||
{{ if ne $value.Name "" }}
|
||||
<a href="{{ printf "/%s/%s" $data.Plural $value.Name | urlize | relLangURL }}">{{ $value.Name }}<span style="float:right;">{{ $value.Count }}</span></a>
|
||||
{{ else }}
|
||||
{{ i18n "uncategorized" }}<span style="float:right;">{{ $value.Count }}</span>
|
||||
{{ end }}
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</main>
|
||||
{{ $.Scratch.Set "showCategories" false }}
|
||||
</div>
|
||||
{{ partial "scripts" . }}
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 326 KiB |
|
|
@ -1,12 +0,0 @@
|
|||
name = "Bleach"
|
||||
license = "MIT"
|
||||
licenselink = "https://github.com/digivend/bleach-theme/blob/master/LICENSE.md"
|
||||
description = "Simple and lightweight Blog theme for Hugo"
|
||||
homepage = "https://github.com/digivend/bleach-theme"
|
||||
tags = ["blog", "lighweight", "simple", "fast", "light", "modern", "hugo-theme", "responsive", "bootstrap", "white", "clean", "company"]
|
||||
features = ["blog"]
|
||||
min_version = "0.41"
|
||||
|
||||
[author]
|
||||
name = "digiVend"
|
||||
homepage = "https://github.com/digivend/"
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
---
|
||||
name: Bug report
|
||||
about: Create a report to help improve the theme.
|
||||
title: "[BUG] "
|
||||
labels: ''
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
**Describe the bug**
|
||||
A clear and concise description of what the bug is. **Please state this in the form of a problem, such as "[BUG] The door will not unlock without the key."**
|
||||
|
||||
**To Reproduce**
|
||||
Steps to reproduce the behavior:
|
||||
1. Go to '...'
|
||||
2. Click on '....'
|
||||
3. Scroll down to '....'
|
||||
4. See error
|
||||
|
||||
**Expected behavior**
|
||||
A clear and concise description of what you expected to happen.
|
||||
|
||||
**Screenshots**
|
||||
If applicable, add screenshots to help explain your problem.
|
||||
|
||||
**Device information):**
|
||||
- Device [e.g. MacBook, iPhone, ...]
|
||||
- OS: [e.g. iOS]
|
||||
- Browser [e.g. chrome, safari]
|
||||
- Version [e.g. 22]
|
||||
|
||||
**Additional context**
|
||||
Add any other context about the problem here.
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
---
|
||||
name: Feature request
|
||||
about: Suggest an idea for this project
|
||||
title: "[FEATURE] "
|
||||
labels: ''
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
**Is your feature request related to a problem? Please describe.**
|
||||
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
||||
|
||||
**Describe the solution you'd like**
|
||||
A clear and concise description of what you want to happen. What problem does this solve, for whom, in what types of circumstances? What is the value of your idea?
|
||||
|
||||
**Describe alternatives you've considered**
|
||||
A clear and concise description of any alternative solutions or features you've considered. Screenshots or mockups are helpful.
|
||||
|
||||
**Additional context**
|
||||
Add any other context or screenshots about the feature request here.
|
||||
|
||||
**Does it fit with Story's design?**
|
||||
Tell us why your idea is a good fit for Story in particular, rather than generically being a good idea. Does it align well with Story's goals of simplicity, elegance? Is your idea targeted towards Story's intended audience and use case?
|
||||
3
themes/story/.gitignore
vendored
|
|
@ -1,3 +0,0 @@
|
|||
*.swp
|
||||
.DS_Store
|
||||
public
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2018 Baron Schwartz
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
# Story
|
||||
|
||||
Story is a beautiful [Hugo theme](https://gohugo.io) for showcasing your writing
|
||||
and presentations. There's a robust [demo site](https://story.xaprb.com/) where you can see its
|
||||
many features in action, and learn more about how to use them. You can also see Story in use on a real site by [Baron Schwartz](https://www.xaprb.com/).
|
||||
|
||||

|
||||
|
||||
Story is targeted to technical writers and
|
||||
speakers: people such as software engineers and open source developers, who want a
|
||||
website for their technical work, such as blogging about software
|
||||
engineering. It's a great way to share your writing and speaking with the world.
|
||||
|
||||
It has a lot of features for people who invest effort in their websites and blogs!
|
||||
|
||||
- Beautiful, responsive typography for long-form content on screen and in print, including blogs, essays, and single pages.
|
||||
- Support for [RemarkJS slides](https://remarkjs.com/).
|
||||
- LaTeX math typesetting with [KaTeX](https://github.com/Khan/KaTeX)
|
||||
- A built-in search page with [LunrJS](https://github.com/olivernn/lunr.js).
|
||||
- Music notation typesetting with [abcjs](https://abcjs.net/).
|
||||
- Easy-to-use, backwards-compatible Markdown enhancements such as ways to control image behavior (size, float, etc) with CSS.
|
||||
|
||||
This is just a fraction of Story's feature set, see the [demo site](https://story.xaprb.com/) for much more
|
||||
documentation and screenshots.
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
title: '{{ replace .TranslationBaseName "-" " " | title }}'
|
||||
date: "{{ .Date }}"
|
||||
url: "/{{ .Dir }}{{ .Name }}"
|
||||
description: ""
|
||||
tldr: ""
|
||||
image: ""
|
||||
credit: ""
|
||||
thumbnail: ""
|
||||
categories:
|
||||
- Uncategorized
|
||||
---
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
---
|
||||
title: {{ .Name | humanize | title }}
|
||||
date: "{{ .Date }}"
|
||||
url: "/{{ .Dir }}"
|
||||
image: "/slides/{{ .Name }}/cover.jpg"
|
||||
description: ""
|
||||
ratio: "16:9"
|
||||
themes:
|
||||
- apron
|
||||
- adirondack
|
||||
- descartes
|
||||
---
|
||||
class: title
|
||||
background-image: url(cover.jpg)
|
||||
|
||||
# {{ .Name | humanize | title }}
|
||||
## Subtitle
|
||||
|
||||
---
|
||||
# About Me
|
||||
|
||||
- Slides are at {{ "talks/" | absURL }}
|
||||
- Ask questions anytime
|
||||
|
||||
---
|
||||
# Slides and Contact Information
|
||||
|
||||
.qrcode.db.fr.w-40pct.ml-4[]
|
||||
|
||||
Slides are at {{ .Site.BaseURL }}talks/ or you can scan the QR code.
|
||||
|
||||
Contact:
|
||||
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
---
|
||||
title: '{{ replace .TranslationBaseName "-" " " | title }}'
|
||||
date: "{{ .Date }}"
|
||||
url: "/{{ .Dir }}{{ .Name }}/"
|
||||
event: ""
|
||||
location: ""
|
||||
site: ""
|
||||
video: ""
|
||||
slides: "/slides/{{ .Name }}/"
|
||||
thumbnail: "/slides/{{ .Name }}/thumbnail.jpg"
|
||||
image: "/slides/{{ .Name }}/cover.jpg"
|
||||
description: ""
|
||||
---
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
# Site settings
|
||||
baseurl = "https://example.com/"
|
||||
title = "Hugo Story Theme"
|
||||
paginate = 5
|
||||
buildFuture = true
|
||||
|
||||
[[menu.social]]
|
||||
name = "GitHub"
|
||||
title = "fab fa-github-square"
|
||||
url = "https://github.com/xaprb/story/"
|
||||
|
||||
[[menu.main]]
|
||||
name = "Talks"
|
||||
title = "Talks"
|
||||
url = "/talks/"
|
||||
|
||||
[[menu.main]]
|
||||
name = "Slides"
|
||||
title = "Slides"
|
||||
url = "/slides/"
|
||||
|
||||
[[menu.main]]
|
||||
name = "Archives"
|
||||
title = "Archives"
|
||||
url = "/archives/"
|
||||
|
||||
[params]
|
||||
author = "Baron Schwartz"
|
||||
twitter = "xaprb"
|
||||
classes = []
|
||||
|
||||
[outputs]
|
||||
home = ["HTML", "JSON", "RSS"]
|
||||
page = ["HTML"]
|
||||
section = ["HTML", "RSS"]
|
||||
taxonomy = ["HTML", "RSS"]
|
||||
taxonomyTerm = ["HTML", "RSS"]
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
---
|
||||
title: Story Hugo Theme Demo Site
|
||||
subtitle: "Showcase Your Work"
|
||||
---
|
||||
[](https://www.xaprb.com)
|
||||
|
||||
Baron Schwartz is the founder and CTO of [VividCortex](https://vividcortex.com), author of
|
||||
several books, and creator of various open-source software. He writes about topics
|
||||
such as technology, entrepreneurship, and fitness. [More about
|
||||
Baron](https://www.xaprb.com/).
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
---
|
||||
title: The Story Hugo Theme
|
||||
date: "2018-09-03"
|
||||
url: "/about-story"
|
||||
description: "Story is a beautiful responsive Hugo blog theme with many extra features including presentations, math typesetting, and search."
|
||||
tldr: "Story is a beautiful responsive Hugo blog theme with powerful extra features out-of-the-box. It's targeted to people who want to showcase their technical work online."
|
||||
credit: "https://unsplash.com/photos/o-ubWHV29Uk"
|
||||
image: "img/unsplash-photos-o-ubWHV29Uk.jpg"
|
||||
thumbnail: img/unsplash-photos-o-ubWHV29Uk.tn-500x500.jpg
|
||||
categories:
|
||||
- Demo
|
||||
---
|
||||
Story is a beautiful Hugo theme. [Hugo](https://gohugo.io) is a static website
|
||||
generator, which builds websites by rendering
|
||||
[Markdown](https://commonmark.org/help/) content into templates from themes like
|
||||
Story. The resulting site is fast, secure, and easy to build and maintain.
|
||||
|
||||
Story is a responsive theme that supports blogs, with many extra features such
|
||||
as presentations, math and music typesetting, and search. The Story design
|
||||
philosophy prioritizes simplicity and elegance, so it can be sophisticated
|
||||
and powerful at the same time.
|
||||
|
||||
<!--more-->
|
||||
|
||||
Story is easy to use, making it a great way to share your writing and speaking
|
||||
with the world. Story is targeted to technical writers and speakers: people
|
||||
such as software engineers and open source developers, who want a website for
|
||||
their technical work and side projects---for example, those who write and speak
|
||||
about software engineering.
|
||||
|
||||
|
||||
Story is deceptively simple, while offering the features you need:
|
||||
|
||||
- Beautiful, responsive typography for long-form content on screen and in print, including blogs and single pages.
|
||||
- Support for Remark in-browser slideshows, written in simple Markdown.
|
||||
- LaTeX math equation typesetting.
|
||||
- Sheet music rendering from ABC music notation.
|
||||
- Built-in site search.
|
||||
|
||||
Story has many more features than this.
|
||||
Explore Story and learn all the ways it can help you showcase your work!
|
||||
|
||||
Read next: [Story's features](/theme-features).
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
---
|
||||
layout: archives
|
||||
url: /archives/
|
||||
title: Archives
|
||||
classes:
|
||||
- feature-nosubtitle
|
||||
- feature-nohdr
|
||||
- feature-depth
|
||||
---
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
---
|
||||
author: Elvis Presley
|
||||
title: Story's Author Profiles
|
||||
url: /author-profiles
|
||||
date: "2018-08-29"
|
||||
description: "With Story, you can define global and per-item author profiles/biographies."
|
||||
image: "img/unsplash-photos-TzMi5Ov7QeM.jpg"
|
||||
credit: "https://unsplash.com/photos/TzMi5Ov7QeM"
|
||||
thumbnail: "img/unsplash-photos-TzMi5Ov7QeM.tn-500x500.jpg"
|
||||
categories:
|
||||
- Demo
|
||||
---
|
||||
Story supports author profiles, so you can highlight your bio.
|
||||
It's possible to set this globally for the entire site, or individually for each
|
||||
piece of content. Or you can set a global default and override it on individual
|
||||
pieces of content.
|
||||
Scroll to the bottom of any page on this site to see how author profiles are
|
||||
styled.
|
||||
<!--more-->
|
||||
|
||||
Story's author profile system is a slightly simplified (incomplete)
|
||||
implementation of the ideas laid out in [Netlify's how-to
|
||||
document](https://www.netlify.com/blog/2018/07/24/hugo-tips-how-to-create-author-pages/).
|
||||
It allows only one author per piece of content, and doesn't require Hugo to
|
||||
create the authors taxonomy. Because it's incomplete, it's a) missing a few of the
|
||||
features Netlify describes, and b) easier to set up.
|
||||
|
||||
### Global And Per-Content Authors
|
||||
|
||||
If you want to specify an author in the front matter of each post, it's
|
||||
simply specified like this (YAML example):
|
||||
|
||||
```
|
||||
---
|
||||
author: "Elvis Presley"
|
||||
---
|
||||
```
|
||||
|
||||
If you want to set a global author parameter for the entire site, which will serve as
|
||||
the default in case any pieces of content don't specify their own, use your
|
||||
config file's `params` array:
|
||||
|
||||
```
|
||||
params:
|
||||
author: "Baron Schwartz"
|
||||
```
|
||||
|
||||
That's exactly what this sample site you're reading right now does: Baron is the
|
||||
author by default, but Elvis is the author of _this_ content you're reading now.
|
||||
|
||||
### Creating Author Profiles
|
||||
|
||||
To create author profiles, you need to create the author hierarchy under
|
||||
`content`, and a slugified directory for each author. Then, place an `_index.md`
|
||||
file into each of those directories, and give it the content needed to describe
|
||||
the author.
|
||||
|
||||
For example:
|
||||
|
||||
```
|
||||
└── content/
|
||||
└── authors/
|
||||
├── elvis-presley/
|
||||
│ └── _index.md
|
||||
├── aretha-franklin/
|
||||
│ └── _index.md
|
||||
└── stevie-wonder/
|
||||
└── _index.md
|
||||
```
|
||||
|
||||
You can put any content you want in the file, but Story has CSS to nicely format
|
||||
a square image followed by a paragraph of text. This page you're viewing right
|
||||
now has "Elvis Presley" as its author, and the content of
|
||||
`content/authors/elvis-presley/_index.md` is:
|
||||
|
||||
```
|
||||
---
|
||||
---
|
||||

|
||||
|
||||
Elvis Aaron Presley (January 8, 1935 – August 16, 1977) was an American singer
|
||||
and actor. Regarded as one of the most significant cultural icons of the 20th
|
||||
century, he is often referred to as the "King of Rock and Roll" or simply "the
|
||||
King".
|
||||
```
|
||||
|
||||
### Global Fallback Content
|
||||
|
||||
Even if you don't have an author directory and a specific author's file as
|
||||
described above, you can create content that will serve as a fallback across the
|
||||
whole site. If Story doesn't find a specific author's profile page, it'll look
|
||||
for the default `_index.md` content for the section it's currently rendering.
|
||||
The top-level default for the whole site is `content/_index.md`, which this demo
|
||||
site uses to provide Baron Schwartz's author information. This information will
|
||||
appear on all pages _other than_ the current page, which is authored by Elvis
|
||||
Presley. This fallback information from `content/_index.md` looks like the
|
||||
following:
|
||||
|
||||
```
|
||||
[](https://www.xaprb.com)
|
||||
|
||||
Baron Schwartz is the founder and CTO of [VividCortex](https://vividcortex.com), author of
|
||||
several books, and creator of various open-source software. He writes about topics
|
||||
such as technology, entrepreneurship, and fitness. [More about
|
||||
Baron](https://www.xaprb.com/).
|
||||
```
|
||||
|
||||
This content is a (non-author-specific) fallback for the entire site.
|
||||
You can see it on all the other pages of this site.
|
||||
|
||||
Read next: [Story's figures, captions, and tables](/figures/).
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
---
|
||||
---
|
||||

|
||||
|
||||
Elvis Aaron Presley (January 8, 1935 – August 16, 1977) was an American singer
|
||||
and actor. Regarded as one of the most significant cultural icons of the 20th
|
||||
century, he is often referred to as the "King of Rock and Roll" or simply "the
|
||||
King".
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
X: 1
|
||||
T: Cooley's
|
||||
M: 4/4
|
||||
L: 1/8
|
||||
K: Emin
|
||||
|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
|
||||
EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
|
||||
|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|
|
||||
eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
---
|
||||
title: Story's Feature Flags
|
||||
date: "2018-08-30"
|
||||
url: "/features"
|
||||
description: "Story comes with a lot of power, but it's all configurable: almost every extra feature is optional."
|
||||
credit: "https://unsplash.com/photos/QRkew0KwXSM"
|
||||
image: "img/unsplash-photos-QRkew0KwXSM.jpg"
|
||||
thumbnail: img/unsplash-photos-QRkew0KwXSM.tn-500x500.jpg
|
||||
classes:
|
||||
categories:
|
||||
- Demo
|
||||
---
|
||||
Feature flags, which are called _classes_ in the markup, control many of Story's features.
|
||||
You can enable and disable them in your site config, or in an individual post's front matter.
|
||||
This article documents Story's feature flags.
|
||||
<!--more-->
|
||||
|
||||
### Enabling Feature Flags
|
||||
|
||||
Feature flags can be enabled globally or locally, and the combination of these determines content behavior.
|
||||
This lets you enable them for the entire site, or for an individual post.
|
||||
The combined list of features that applies to a piece of content is the union of the two lists.
|
||||
|
||||
Here's how to enable the "example" feature for the entire site, in your site's `config.yaml` file:
|
||||
|
||||
```yaml
|
||||
params:
|
||||
classes:
|
||||
- feature-example
|
||||
```
|
||||
|
||||
Here's how to enable the "misc" feature in an individual piece of content, via its YAML front matter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
classes:
|
||||
- feature-misc
|
||||
---
|
||||
```
|
||||
|
||||
The contents of both feature lists are combined and put into the `<body>` tag's `class` attribute, verbatim:
|
||||
|
||||
```html
|
||||
<body class="feature-example feature-misc">...</body>
|
||||
```
|
||||
|
||||
If you're using TOML, then the syntax in `config.toml` looks like this:
|
||||
|
||||
```toml
|
||||
[params]
|
||||
classes = ["feature-example", "feature-misc"]
|
||||
```
|
||||
|
||||
### Disabling Features
|
||||
|
||||
Many features can be _negated_ by prefixing the feature name with `no`, like this:
|
||||
|
||||
```yaml
|
||||
---
|
||||
classes:
|
||||
- feature-noexample
|
||||
---
|
||||
```
|
||||
|
||||
If a feature is enabled globally and negated in a single piece of content's front matter, both the positive and negative form will appear in the CSS classes.
|
||||
Features in Story are inside of code that checks not only whether flags are enabled, but also whether they're overridden with a negation.
|
||||
One consequence of this is that if you disable a feature globally in `config.yaml`, you can't enable it locally in a single piece of content.
|
||||
You can only enable globally and disable locally, not the other way around.
|
||||
|
||||
There's nothing special about a feature flag, and you can put arbitrary values into the configuration arrays.
|
||||
Story only recognizes and supports specific values; it ignores others.
|
||||
You can take advantage of this to add any values into the arrays that you want, if they're useful for your other purposes.
|
||||
For example, you can use this ability to set any desired CSS class, for selection either with your custom CSS, or to work with something off-the-shelf that happens to look for a specific class.
|
||||
|
||||
### List Of Features
|
||||
|
||||
Features have varying implementations.
|
||||
Some affect how Hugo processes content, some affect CSS presentation, and some are implemented in unobtrusive JavaScript after the page finishes loading.
|
||||
|
||||
Here's a list of all of Story's features and how they're implemented.
|
||||
The first column links to a demo of those features.
|
||||
For brevity, the `feature-` prefix is omitted, but all of Story's classes have that prefix to avoid naming conflicts.
|
||||
|
||||
| Feature | Explanation | Implementation |
|
||||
|--------------------|---------------------------------------------------------------------------------------------|----------------|
|
||||
| [3dbook-covers](/images) | Styles images to resemble a hardcover book | JS + CSS |
|
||||
| [figcaption](/figures) | Transforms images into captioned figures | JS + CSS |
|
||||
| [figcaption-hidden](/figures) | Hides figure captions, revealing them on mouseover | CSS |
|
||||
| [figcaption-visible](/figures) | Formats figure captions visibly | CSS |
|
||||
| [figlink](/figures) | Links text like "Figure/Table 3" to the corresponding figure or table | JS |
|
||||
| [fignum](/figures) | Auto-numbers figures and tables | CSS |
|
||||
| [h3-cl](/typography) | Adds CSS `clear: left` to all `<h3>` tags | CSS |
|
||||
| [h3-cr](/typography) | Adds CSS `clear: right` to all `<h3>` tags | CSS |
|
||||
| [h3-cb](/typography) | Adds CSS `clear: both` to all `<h3>` tags | CSS |
|
||||
| [highlight](/typography) | Applies syntax highlighting to code blocks, using HighlightJS | JS + CSS |
|
||||
| [hrdinkus](/typography) | Styles `<hr>` elements as a dinkus (three asterisks) | CSS |
|
||||
| [hrfleuron](/typography) | Styles `<hr>` elements as a fleuron (❦) | CSS |
|
||||
| [hyphenate](/typography) | Enables line-breaks and hyphenation of text via the browser | CSS |
|
||||
| [justify](/typography) | Aligns text with full-justification | CSS |
|
||||
| [math](/math) | Enables LaTeX math typesetting using KaTeX | JS |
|
||||
| [music](/music) | Enables rendering abc notation as sheet music with abcjs | JS |
|
||||
| [nohdr](/images/) | Disables header images locally; when applied globally, disables preview thumbnails in lists | Hugo |
|
||||
| [subtitle](/typography) | Enabled by default; disable to hide page subtitles | CSS |
|
||||
| [tablefig](/figures) | Styles tables similar to scientific papers | JS + CSS |
|
||||
| [tablefw](/figures) | Sets table cells in a font with fixed-width numerals | CSS |
|
||||
| titlecase | Not enabled by default; Transforms All Content Titles to Titlecase | Hugo |
|
||||
| [tweetquote](/typography) | Renders a blockquote in a simplistic tweet style, if it follows conventions | JS + CSS |
|
||||
|
||||
Read next: [Story's author biographies](/author-profiles/).
|
||||
|
|
@ -1,149 +0,0 @@
|
|||
---
|
||||
title: Story's Figures, Captions, and Tables
|
||||
date: "2018-08-22"
|
||||
url: "/figures"
|
||||
description: "This article shows you how to enhance your images and tables with features such as captions and alternative stylings."
|
||||
credit: "https://unsplash.com/photos/vHnVtLK8rCc"
|
||||
image: "img/unsplash-photos-vHnVtLK8rCc.jpg"
|
||||
thumbnail: img/unsplash-photos-vHnVtLK8rCc.tn-500x500.jpg
|
||||
classes:
|
||||
- feature-figcaption
|
||||
- feature-figcaption-hidden
|
||||
- feature-figlink
|
||||
- feature-fignum
|
||||
- feature-tablecaption
|
||||
categories:
|
||||
- Demo
|
||||
---
|
||||
Story can automatically transform images into figures with captions.
|
||||
It can also add captions to tables.
|
||||
And it adds features and styling to both images and tables.
|
||||
This article is a demo of Story's features for figures, tables, and captions.
|
||||
<!--more-->
|
||||
|
||||
### Image Captions and Figures
|
||||
|
||||
If the `feature-figcaption` flag is set (and not negated), Story will transform
|
||||
your images into figures, and add a caption. There are several ways this can be done. Story tries
|
||||
each method, in the following order.
|
||||
|
||||
First, if an image is followed immediately by an `<em>` _in the same paragraph_, Story treats
|
||||
the content of the `<em>` as the image caption. To enable this, the image and
|
||||
the text must not have a blank line between them. Example:
|
||||
|
||||
```md
|
||||

|
||||
_Water lily photo by Zoltan Tasi on Unsplash_
|
||||
```
|
||||
|
||||
This markup results in a `<p><img...><em...></p>` markup that Story converts into a captioned figure.
|
||||
Hover your mouse over the picture to see the caption:
|
||||
|
||||

|
||||
_Water lily photo by Zoltan Tasi on Unsplash_
|
||||
|
||||
If there's no `<em>` to use, Story uses the image's `title` attribute as a fallback:
|
||||
|
||||
```md
|
||||

|
||||
```
|
||||
|
||||

|
||||
|
||||
Finally, Story falls back to the `alt` attribute:
|
||||
|
||||
```md
|
||||

|
||||
```
|
||||
|
||||

|
||||
|
||||
### Table Styling
|
||||
|
||||
Story has multiple built-in table styles that you can apply with feature flags.
|
||||
The default is similar to GitHub's table styling:
|
||||
|
||||
| Command | Description |
|
||||
| --- | --- |
|
||||
| `git status` | List all *new or modified* files |
|
||||
| `git diff` | Show file differences that **haven't been** staged |
|
||||
| `git commit` | Record changes to the repository |
|
||||
| `git branch` | List, create, or delete branches |
|
||||
|
||||
There is _also_ a style designed for tables that are part of an
|
||||
article with figures, resembling scientific papers or other more formal use
|
||||
cases. This is enabled with `feature-tablefig`. Click <a
|
||||
id="tablefig">here</a> to toggle.
|
||||
|
||||
| Item | Estimated | Positive and Significant | Negative and Significant |
|
||||
|-------------------------------------------|:---------:|:------------------------:|:------------------------:|
|
||||
| Demographic Variables for Head | | | |
|
||||
| Male | 85 | 74 | 11 |
|
||||
| Age | 85 | 85 | 0 |
|
||||
| Age Squared | 85 | 0 | 85 |
|
||||
| Head's Education | | | |
|
||||
| Completed primary or incomplete secondary | 76 | 76 | 0 |
|
||||
| Completed secondary or higher | 60 | 60 | 0 |
|
||||
| Completed secondary | 19 | 19 | 0 |
|
||||
| Higher | 20 | 20 | 0 |
|
||||
| Unknown | 12 | 12 | 0 |
|
||||
|
||||
Tables with columns of right-aligned numbers are more readable with fixed-width numerals; click to toggle <a id="tablefw">`feature-tablefw`</a>. Observe the table below and see how its columns are easier to read with fixed-width numerals. This is noticeable with Github-style table formatting, but not with academic-style.
|
||||
|
||||
Date | Inclination, deg. | Longitude, Asc. Node, deg. | Mean Distance, au | Eccentricity | Mean Longitude, deg. |
|
||||
--------------|------------------:|---------------------------:|------------------:|--------------:|----------------------:|
|
||||
Jan. 28 | 7.0052 | 48.486 | 0.387097 | 0.205644 | 355.3943 |
|
||||
Mar. 9 | 7.0052 | 48.487 | 0.387098 | 0.205646 | 159.0899 |
|
||||
Apr. 18 | 7.0052 | 48.489 | 0.387097 | 0.205649 | 322.7854 |
|
||||
May 28 | 7.0052 | 48.490 | 0.387097 | 0.205650 | 126.4812 |
|
||||
July 7 | 7.0052 | 48.492 | 0.387098 | 0.205645 | 290.1771 |
|
||||
Aug. 16 | 7.0052 | 48.493 | 0.387098 | 0.205645 | 93.8725 |
|
||||
Sept. 25 | 7.0052 | 48.494 | 0.387098 | 0.205642 | 257.5683 |
|
||||
Nov. 4 | 7.0052 | 48.495 | 0.387099 | 0.205635 | 61.2628 |
|
||||
Dec. 14 | 7.0052 | 48.497 | 0.387099 | 0.205635 | 224.9579 |
|
||||
Dec. 54 | 7.0052 | 48.498 | 0.387098 | 0.205633 | 28.6524 |
|
||||
|
||||
_Mercury's Heliocentric Osculating Orbital Elements Referred to the Mean Equinox and Ecliptic of Date for 2013_
|
||||
|
||||
### Caption Styling And Linking
|
||||
|
||||
Story uses JavaScript and CSS to make figures and tables more beautiful and
|
||||
functional.
|
||||
|
||||
- Figures and tables get sequentially numbered `ID` attributes of `#fig-1` and so on, so
|
||||
you can link to them.
|
||||
- The `feature-figlink` feature flag searches the article for text such as
|
||||
Figure 1 and automatically links it to the appropriate figure.
|
||||
- If the `feature-fignum` feature is enabled, the text of the caption is
|
||||
prepended with the figure number. Click here to <a id="fignum">toggle this
|
||||
feature</a>, then inspect the captions again to see the effect.
|
||||
- The `feature-figcaption-hidden` feature makes the captions hidden until you
|
||||
move the mouse over them. The `feature-figcaption-visible` feature flag
|
||||
overrides this and makes the captions visible immediately below the image.
|
||||
Click here to <a id="figvisible">toggle this feature</a>.
|
||||
|
||||
### Table Captions
|
||||
|
||||
Story doesn't convert tables to figures, but it can add captions to tables.
|
||||
See Table 3, which is followed by a paragraph whose entire content is inside an `<em>` tag.
|
||||
If the `feature-tablecaption` feature is enabled, Story will use unobtrusive JavaScript to move that paragraph's text into the table's `<caption>` element.
|
||||
|
||||
Tables can be autolinked and table captions can be numbered, similar to images.
|
||||
These features are controlled by the same `feature-figlink` and `feature-fignum` flags that control image captioning and linking, so they'll be consistently applied.
|
||||
|
||||
<script type="text/javascript">
|
||||
$( "#fignum" ).click(function() {
|
||||
$("body").toggleClass("feature-fignum");
|
||||
});
|
||||
$( "#figvisible" ).click(function() {
|
||||
$("body").toggleClass("feature-figcaption-visible");
|
||||
});
|
||||
$( "#tablefig" ).click(function() {
|
||||
$("body").toggleClass("feature-tablefig");
|
||||
});
|
||||
$( "#tablefw" ).click(function() {
|
||||
$("body").toggleClass("feature-tablefw");
|
||||
});
|
||||
</script>
|
||||
|
||||
Read next: [Story's image formatting features](/images/).
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
---
|
||||
title: Story's Image Formatting Controls
|
||||
date: "2018-08-21"
|
||||
url: "/images"
|
||||
description: "Story gives you extra control over image formatting using only Markdown syntax."
|
||||
classes:
|
||||
- feature-figcaption
|
||||
- feature-figcaption-hidden
|
||||
- feature-3dbook-covers
|
||||
- feature-tablecaption
|
||||
- feature-depth
|
||||
categories:
|
||||
- Demo
|
||||
---
|
||||
This article is a demo of Story's image-related features (other than [figure captions](/figures)).
|
||||
Story can apply a variety of stylistic and layout transformations to your images.
|
||||
These features are enabled by unobtrusive, accessibility-friendly tricks that give you more control over images than Markdown typically provides.
|
||||
Story also has out-of-the-box support for header and preview images, for a visually stunning site.
|
||||
<!--more-->
|
||||
|
||||
### Shrinking Large Images
|
||||
|
||||
Story's CSS automatically shrinks images to fit into the width of the article.
|
||||
|
||||

|
||||
|
||||
The image above is much wider than the content region, but it's sized to fit.
|
||||
|
||||
### Control Over Image Formatting
|
||||
|
||||
Story uses [URL fragment
|
||||
techniques](https://www.xaprb.com/blog/how-to-style-images-with-markdown/) to
|
||||
give you control over image styling.
|
||||
Images that use this technique don't get converted into [figures with captions](/figures).
|
||||
|
||||

|
||||
|
||||
For example, you can float an image right with the `fr` URL fragment:
|
||||
|
||||
```md
|
||||

|
||||
```
|
||||
|
||||
There's a selection of these pseudo-classes built into Story via the Descartes
|
||||
CSS file; inspect the CSS or LESS source to see what styles you can attach to
|
||||
images.
|
||||
|
||||
If floated images interfere with headings, you can use [heading clear feature flags](/features) to fix this.
|
||||
|
||||
### Book Cover Mockups
|
||||
|
||||
[](https://unsplash.com/photos/vHnVtLK8rCc)
|
||||
|
||||
A book cover image that's inside an `<a>` link can be floated right and given
|
||||
a 3d look with the `3dbook` URL fragment pseudo-class.
|
||||
|
||||
```
|
||||
[](https://unsplash.com/photos/vHnVtLK8rCc)
|
||||
```
|
||||
|
||||
### Header Images
|
||||
|
||||
Story is designed for visual impact, with a featured image for each piece of content.
|
||||
Use the `image` property in the article's front-matter to set the image.
|
||||
Use the `credit` to give credit to the image's creator if you wish; Story will put a small camera icon in the header if it finds that parameter.
|
||||
Use the `thumbnail` property to supply a smaller version of the image in list views.
|
||||
|
||||
A typical piece of content will have front matter like the following:
|
||||
|
||||
```yaml
|
||||
image: "/img/unsplash-photos-QRkew0KwXSM.jpg"
|
||||
thumbnail: /img/unsplash-photos-QRkew0KwXSM.tn-500x500.jpg
|
||||
credit: "https://unsplash.com/photos/QRkew0KwXSM"
|
||||
```
|
||||
|
||||
If there's no thumbnail, Story falls back to the full-size image.
|
||||
If there's no article-specific image, Story uses its default, `/img/default-header-img.jpg`, or the thumbnail equivalent, `/img/default-header-img.tn-500x500.jpg`.
|
||||
This page doesn't supply its own header image, so Story is using the default.
|
||||
|
||||
You can supply your own default header image by simply putting an image with the same name in your *site's* `/static/img` directory.
|
||||
If Hugo finds that you've added an image of your own, it will take precedence.
|
||||
|
||||
You can also override section-specific header images in list
|
||||
(non-individual-page) views with parameters in the `_index.md` content file in
|
||||
that section. (The `title` and `subtitle` parameters in those files can also
|
||||
override what's shown in list page headers.)
|
||||
|
||||
### Imageless Layout Options
|
||||
|
||||
If you don't want header images or preview thumbnails in list views, you can set
|
||||
the `feature-nohdr` feature. Set locally in a piece of content, it will display
|
||||
no header/banner image. Here's an example of what a page looks like with and
|
||||
without the header image:
|
||||
|
||||

|
||||
|
||||
Set globally for the whole site, it will make the site simply ignore all header
|
||||
and preview images:
|
||||
|
||||

|
||||
|
||||
To illustrate this feature, the [search page](/search) has this feature set, so
|
||||
it has a plain, bannerless layout.
|
||||
|
||||
### Adding Depth To Headers
|
||||
|
||||
Articles (but not list pages) can be given a bit of extra depth with the
|
||||
`feature-depth` class, which is negatable with `feature-nodepth`. This article
|
||||
is an example: notice how the content is shifted up slightly to overlap the
|
||||
header image a bit, with rounded corners and a shadow around it.
|
||||
|
||||
The `feature-depth` class can be set globally in your `config.yaml` or similar,
|
||||
and overridden as you wish on individual pages.
|
||||
|
||||
Read next: [Story's built-in search features](/search-page/).
|
||||
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 127 KiB |
|
Before Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 120 KiB |
|
Before Width: | Height: | Size: 130 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 150 KiB |
|
Before Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 254 KiB |
|
Before Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 187 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 198 KiB |
|
Before Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 185 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
|
@ -1,69 +0,0 @@
|
|||
---
|
||||
title: "Story's MailChimp Integration Features"
|
||||
date: "2018-08-18"
|
||||
url: "/mailchimp-features"
|
||||
description: "Story makes it easy to grow a MailChimp subscriber list and send beautifully formatted emails to them automatically."
|
||||
image: "img/jessy-hoffmann-720198-unsplash.jpg"
|
||||
credit: "https://unsplash.com/photos/EsNkWAv6Vmw/"
|
||||
thumbnail: "img/jessy-hoffmann-720198-unsplash.tn-500x500.jpg"
|
||||
categories:
|
||||
- Demo
|
||||
---
|
||||
If you're a blogger, you might use MailChimp to build a subscriber list, and
|
||||
Story makes that easy. MailChimp also has the ability to automatically send your
|
||||
new content to the list from an RSS feed, and guess what---Story helps you
|
||||
create an RSS feed customized just for that if you like, too.
|
||||
<!--more-->
|
||||
|
||||
First, MailChimp subscriber forms. If you want to add a subscription form at the
|
||||
bottom of each page, just add your MailChimp URL as a parameter in your
|
||||
configuration file. Here's a YAML example for `config.yaml`:
|
||||
|
||||
```yaml
|
||||
params:
|
||||
- mailchimp: "your URL here"
|
||||
```
|
||||
|
||||
And here's an example for `config.toml`:
|
||||
|
||||
```toml
|
||||
[params]
|
||||
mailchimp = "your URL here"
|
||||
```
|
||||
|
||||
You can copy the URL from the address bar of your MailChimp subscriber form. It
|
||||
becomes the `action` of the form, which will appear at the bottom of each page
|
||||
near your author biography.
|
||||
|
||||
Next, an RSS feed. Story has an RSS layout customized to create summaries of
|
||||
your content's title, description, featured image, and summary content. The
|
||||
summary content is either delimited explicitly by the `<!--more-->` comment in
|
||||
your Markdown source, or generated automatically by Hugo. (Read more
|
||||
[here](https://gohugo.io/content-management/summaries/).)
|
||||
|
||||
The default content of the RSS feed entries is generated from the page's
|
||||
`description` front matter and `.Summary` content, but you can provide your own
|
||||
to override this. Simply add an excerpt in the `tldr` front matter property.
|
||||
|
||||
To enable the RSS feed, you need to create a special `.md` file that won't
|
||||
appear as regular content, but will render an extra RSS feed file. Its content
|
||||
is ignored, and only its front matter is important. For example, you could
|
||||
create it as `content/mailchimp/_index.md` with the following contents, using YAML
|
||||
front matter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: mailchimp
|
||||
outputs:
|
||||
- rss
|
||||
---
|
||||
```
|
||||
|
||||
Now Hugo will build an extra feed at
|
||||
[`/mailchimp/index.xml`](/mailchimp/index.xml), and you can use it to create
|
||||
[RSS campaigns in
|
||||
MailChimp](https://mailchimp.com/help/share-your-blog-posts-with-mailchimp/). Of
|
||||
course, you can also use your normal RSS feed, but Story's default is to put
|
||||
full content into that, so it might be more than you want.
|
||||
|
||||
Read next: [Story's 'talks' feature for presentations](/talks/adirondack/).
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
skip: true
|
||||
layout: mailchimp
|
||||
outputs:
|
||||
- rss
|
||||
- html
|
||||
---
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
---
|
||||
title: Story's Mathematical Equation Typesetting
|
||||
date: "2018-08-20"
|
||||
url: "/math"
|
||||
description: "If you ever write equations or mathematical formulas, Story has the features you need."
|
||||
credit: "https://unsplash.com/photos/5mZ_M06Fc9g/download"
|
||||
image: "img/unsplash-photos-5mZ_M06Fc9g.jpg"
|
||||
thumbnail: img/unsplash-photos-5mZ_M06Fc9g.tn-500x500.jpg
|
||||
classes:
|
||||
- feature-math
|
||||
categories:
|
||||
- Demo
|
||||
---
|
||||
This article is a demo of Story's ability to typeset mathematical equations,
|
||||
both inline and in block form.
|
||||
<!--more-->
|
||||
|
||||
Story uses the [KaTeX](https://khan.github.io/KaTeX/) library to typeset
|
||||
mathematical formulae in {{< math >}}\LaTeX{{< /math >}} notation. KaTeX is
|
||||
similar to MathJax, but simpler and faster. It provides most of the features
|
||||
needed for typesetting equations, both inline and in block form.
|
||||
|
||||
Story provides a `math` Hugo shortcode to help avoid problems that result from
|
||||
Markdown processing. Here's an example of using the shortcode for inline math:
|
||||
|
||||
<pre><code>The quadratic equation is {{< math >}}x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}{{< /math >}}.</code></pre>
|
||||
|
||||
The quadratic equation is {{< math >}}x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}{{< /math >}}.
|
||||
|
||||
And in equation mode,
|
||||
|
||||
<pre><code>{{< math >}}
|
||||
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
|
||||
{{< /math >}}</code></pre>
|
||||
|
||||
{{< math >}}
|
||||
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
|
||||
{{< /math >}}
|
||||
|
||||
You don't have to use the shortcode, but it saves you from needing to
|
||||
backslash-escape special characters, and fixes problems like backslashes and
|
||||
spaces at the end of the line, which Hugo's Markdown processor will otherwise
|
||||
mangle. This enables frustration-free typesetting of more advanced equations
|
||||
such as the following:
|
||||
|
||||
{{< math >}}
|
||||
\left\{
|
||||
\begin{array}{c}
|
||||
a_1x+b_1y+c_1z=d_1 \\
|
||||
a_2x+b_2y+c_2z=d_2 \\
|
||||
a_3x+b_3y+c_3z=d_3
|
||||
\end{array}
|
||||
\right.
|
||||
{{< /math >}}
|
||||
|
||||
Math typesetting is controlled with the `feature-[no]math` flag.
|
||||
|
||||
Read next: [Story's music notation](/music/).
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
---
|
||||
title: Story's Music Notation
|
||||
date: "2018-08-20 04:00:00"
|
||||
url: "/music"
|
||||
description: "Story can render music notation in your website."
|
||||
credit: "https://unsplash.com/photos/UpdR5OaUJl0"
|
||||
image: "img/jordan-mixson-372435-unsplash.jpg"
|
||||
thumbnail: img/jordan-mixson-372435-unsplash.tn-500x500.jpg
|
||||
classes:
|
||||
- feature-music
|
||||
categories:
|
||||
- Demo
|
||||
---
|
||||
Story uses the [abcjs](https://github.com/paulrosen/abcjs) library to transform
|
||||
[abc](https://www.abcnotation.com) music notation into "sheet music" dynamically.
|
||||
This works well for displaying a wide variety of music notation in a web
|
||||
browser conveniently, without embedding images or PDFs or the like.
|
||||
<!--more-->
|
||||
|
||||
To generate sheet music within a page, enter it in a code listing with the language `abc`, like this:
|
||||
|
||||
```abc
|
||||
[ABC music notation goes here]
|
||||
```
|
||||
|
||||
If you enable music notation rendering with the `feature-[no]music` flag, then Story's
|
||||
JavaScript, which runs when the page loads, will search for every `abc` code listing and transform it.
|
||||
Here's an example:
|
||||
|
||||
```abc
|
||||
X: 76
|
||||
T:Mazurka
|
||||
C:F. Chopin
|
||||
T: Op.33 No.1
|
||||
M:3/4
|
||||
L:1/4
|
||||
Q:"Mesto"
|
||||
K:B
|
||||
%%staves {(RH1 RH2) (LH1 LH2)}
|
||||
V: RH1 clef=treble name="Piano"
|
||||
V: RH2 clef=treble
|
||||
V: LH1 clef=bass
|
||||
V: LH2 clef=bass
|
||||
%
|
||||
[V: RH1] (!p!LD | E/>D/ [^^CGB][^C^^FA] | G2-) (G/A/ | B/c/ d {/f}e | (d/g//)) z// (Ld2 |
|
||||
[V: RH2] x | x x x | z [B,D] z | x x x | x z [G-B-]|
|
||||
[V: LH1] x | x x x | z [D,G,] x | x3 | x3 |
|
||||
[V: LH2] z | z z (D,, | G,,2) z | z3 | z z [G,-D-]|
|
||||
%
|
||||
[V: RH1] d/>c/ e d) | {/c}(B/>A/ [EGc][DGB]) | (E/>D/ [^^CGB][^C^^FA] | G2 B | d/>c/e d) |
|
||||
[V: RH2] [GB] [GA] [GB] | x3 | x3 | z [B,D][B,D] | z [GA] [GB] |
|
||||
[V: LH1] x3 | x3 | x3 | z [D,G,] [D,G,] | x3 |
|
||||
[V: LH2] [G,D] ([C,C] [G,,G,]) | z ([C,C,,] [G,,,G,,]) | z z (D,, | G,,2) x | z ([C,C] [G,,G,])
|
||||
```
|
||||
|
||||
Story also has a `music` shortcode, which simply takes the name of an abc file as an argument, e.g. the following example code and the resulting music notation. This enables you to store your music files separately from your content and include them easily.
|
||||
|
||||
<pre><code>{{< music "/cooleys.abc" >}}</code></pre>
|
||||
|
||||
{{< music "/cooleys.abc" >}}
|
||||
|
||||
Read next: [Story's beautiful typography](/typography/).
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
---
|
||||
title: Story's Theme Features
|
||||
url: /theme-features
|
||||
date: "2018-09-01"
|
||||
description: "This page is a tour of Story's features, so you can take full advantage of its power."
|
||||
image: "img/unsplash-photos-nehfi_SfqtU.jpg"
|
||||
credit: "https://unsplash.com/photos/nehfi_SfqtU"
|
||||
thumbnail: "img/unsplash-photos-nehfi_SfqtU.tn-500x500.jpg"
|
||||
categories:
|
||||
- Demo
|
||||
---
|
||||
Story has a lot of features, but most are optional and have smart defaults!
|
||||
This page is an introduction to Story, with links to further pages that go into
|
||||
more details. There's also a listing of features that either don't need
|
||||
a separate documentation page, or just don't have full documentation yet.
|
||||
<!--more-->
|
||||
|
||||
- [Gorgeous, responsive typography on all devices and in print](/typography)
|
||||
- [Beautiful featured images and thumbnails](/images/) (optional)
|
||||
- [Multiple layouts](/images/)
|
||||
- [Flexibility via feature toggles](/features)
|
||||
- [Author profile pages](/author-profiles)
|
||||
- [Remark browser-based presentation support](/slides/), including CSS themes and multiple aspect ratios
|
||||
- [Automatic table and image enhancements](/figures)
|
||||
- [Advanced image styling features](/images)
|
||||
- [Mathematical equation typesetting](/math)
|
||||
- [Formatting ABC music notation as sheet music](/music)
|
||||
- [Built-in search](/search-page)
|
||||
- [MailChimp subscribe forms and RSS feeds](/mailchimp-features)
|
||||
|
||||
Story also has support for the following, which aren't extensively documented:
|
||||
|
||||
- Code syntax highlighting
|
||||
- Google Analytics
|
||||
- Categories
|
||||
- All types of blogs; Story isn't opinionated about what you call them (you
|
||||
can put your content under `/posts/`, `/blog/`, `/articles/`, or whatever)
|
||||
- A section for "talks," which is different from slideshows; a talks page is a
|
||||
place to put information about your presentations, including links to videos,
|
||||
the location, slides, and so on. `/talks/` and `/slides/` are the only two
|
||||
content types for which Story has special formatting and archetypes.
|
||||
- An archive listing page, which uses the `archives` layout analogously to the [search](/search-page) feature
|
||||
- 404 error page
|
||||
- Social-media meta tags to make your content look great when shared on social
|
||||
media sites
|
||||
- Using `skip` to hide content from default lists, but generating HTML pages for it
|
||||
- Meta keywords
|
||||
- Font Awesome icon fonts
|
||||
- Custom header meta tags with any content you want
|
||||
- Custom footer content with any HTML, JS, or CSS you want; useful for adding
|
||||
custom features from third-parties that provide script blocks to paste into
|
||||
your site
|
||||
- Custom CSS classes in the `<body>` tag
|
||||
- Custom content and social link menus with any content you want (not limited to predefined)
|
||||
|
||||
Read next: [Story's feature flags](/features/).
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
---
|
||||
title: Story's JavaScript Search
|
||||
date: "2018-08-21"
|
||||
url: "/search-page"
|
||||
description: "With Story, your site will have built-in search with no external dependencies."
|
||||
image: "img/unsplash-photos-4zxSWESyZio.jpg"
|
||||
credit: "https://unsplash.com/photos/4zxSWESyZio"
|
||||
thumbnail: "img/unsplash-photos-4zxSWESyZio.tn-500x500.jpg"
|
||||
categories:
|
||||
- Demo
|
||||
---
|
||||
This article documents Story's built-in search features, which don't rely on external search engines.
|
||||
Story uses the [LunrJS](https://lunrjs.com/) library to provide fast browser-based search.
|
||||
This page first explains how search setup works, and then provides copy-paste
|
||||
ready code samples for you to use.
|
||||
<!--more-->
|
||||
|
||||
To get Story's search to work, you need to take a couple of steps:
|
||||
|
||||
1. Create a piece of content with the URL you want. Story assumes you want
|
||||
`/search/` and adds an icon for that in the top menu automatically. So you
|
||||
can simply create `content/search/_index.md` and that should work.
|
||||
2. Give this content the `search` layout, and a title.
|
||||
|
||||
There doesn't need to be any Markdown content; the `search` layout ignores it.
|
||||
|
||||
This will create the search page, but you also need to tell Hugo that it should
|
||||
build the JSON index of the content in the site, which LunrJS uses. To do this,
|
||||
configure the `home` output type to include JSON, which isn't included by
|
||||
default. This will override the default output settings, so you'll need to
|
||||
explicitly specify the defaults in addition. Here's a YAML config file section
|
||||
for your `config.yaml` file to enable this:
|
||||
|
||||
```
|
||||
outputs:
|
||||
home:
|
||||
- HTML
|
||||
- JSON
|
||||
- RSS
|
||||
page:
|
||||
- HTML
|
||||
section:
|
||||
- HTML
|
||||
- RSS
|
||||
taxonomy:
|
||||
- HTML
|
||||
- RSS
|
||||
taxonomyTerm:
|
||||
- HTML
|
||||
- RSS
|
||||
```
|
||||
|
||||
If you use TOML, use this:
|
||||
|
||||
```
|
||||
[outputs]
|
||||
home = ["HTML", "JSON", "RSS"]
|
||||
page = ["HTML"]
|
||||
section = ["HTML", "RSS"]
|
||||
taxonomy = ["HTML", "RSS"]
|
||||
taxonomyTerm = ["HTML", "RSS"]
|
||||
```
|
||||
|
||||
There's more you can do. If you want to create a full-featured search page easily, just paste the following code into `content/search/_index.md`
|
||||
|
||||
```
|
||||
---
|
||||
layout: search
|
||||
url: /search/
|
||||
title: Search
|
||||
classes:
|
||||
- feature-nosubtitle
|
||||
- feature-nohdr
|
||||
---
|
||||
```
|
||||
|
||||
This illustrates an additional layout feature in Story:
|
||||
displaying it without a header image.
|
||||
|
||||
Read next: [Story's mathematical equation typesetting features](/math/).
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
---
|
||||
layout: search
|
||||
url: /search/
|
||||
title: Search
|
||||
classes:
|
||||
- feature-nosubtitle
|
||||
- feature-nohdr
|
||||
- feature-depth
|
||||
---
|
||||
|
Before Width: | Height: | Size: 19 KiB |
|
|
@ -1,606 +0,0 @@
|
|||
---
|
||||
title: 'Creating Beautiful Presentations with Story'
|
||||
date: "2018-04-25T09:50:00-07:00"
|
||||
url: "slides/adirondack/"
|
||||
image: "slides/adirondack/leo-serrat-533922-unsplash.jpg"
|
||||
thumbnail: slides/adirondack/thumbnail.jpg
|
||||
description: "Story's Remark frameworks help you create sophisticated slides with simple, clean Markdown. There are predefined layouts for most presentation needs, beautiful typography and colors, precise image control, and a simple modular way to create custom layouts."
|
||||
ratio: "16:9"
|
||||
themes:
|
||||
- apron
|
||||
- descartes
|
||||
- adirondack
|
||||
classes:
|
||||
- feature-math
|
||||
- feature-qrcode
|
||||
- feature-nohighlight
|
||||
- feature-music
|
||||
---
|
||||
class: title, smokescreen, shelf, no-footer
|
||||
background-image: url(leo-serrat-533922-unsplash.jpg)
|
||||
|
||||
# Creating Beautiful Presentations
|
||||
### With Remark, Apron, Adirondack, and Descartes
|
||||
|
||||
---
|
||||
# The Story Remark Themes
|
||||
|
||||
[Story](https://github.com/xaprb/story) offers helper themes for creating
|
||||
beautiful presentations with [Remark](https://remarkjs.com/), using simple
|
||||
Markdown to create slide layouts.
|
||||
|
||||
- Apron defines the layouts' structure and size.
|
||||
- Adirondack adds typography, theme colors, and helpful features.
|
||||
- Descartes provides element and image positioning and colors.
|
||||
|
||||
Story has a design goal of clean, simple Markdown content. Avoiding "raw" HTML
|
||||
and Remark's Markdown extensions makes things easier.
|
||||
View the source of this page to see the Markdown that creates it.
|
||||
|
||||
These characteristics make it easy to build gorgeous slideshows. They're also
|
||||
a great foundation for creating your own themes.
|
||||
|
||||
---
|
||||
# What is Remark?
|
||||
|
||||
Remark (sometimes called RemarkJS) is a browser-based slideshow system. It's
|
||||
simple but surprisingly powerful:
|
||||
|
||||
- You write slides in simple Markdown
|
||||
- It supports a presenter mode, slide notes, and dual monitors
|
||||
- It supports slide layouts, templates, and incremental slides
|
||||
- It's easy to extend and customize with simple CSS
|
||||
|
||||
Story integrates Remark into Hugo, creating a live-reload editing experience,
|
||||
and a permanent home for your slides on your own website!
|
||||
|
||||
View this page's source to see how easily you can compose slideshows
|
||||
with Remark.
|
||||
|
||||
---
|
||||
name: getting-started
|
||||
# Getting Started
|
||||
|
||||
To get started, use `hugo new slides/my-presentation.md` and ensure that the
|
||||
following `themes` are in the front matter, for example:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: 'Creating Beautiful Presentations with Story'
|
||||
date: "2018-04-25T09:50:00-07:00"
|
||||
url: "/slides/adirondack/"
|
||||
ratio: "16:9"
|
||||
themes:
|
||||
- apron
|
||||
- descartes
|
||||
- adirondack
|
||||
```
|
||||
|
||||
---
|
||||
class: compact
|
||||
|
||||
# Apron's Slide Layouts
|
||||
|
||||
It's easy to create common slide layouts with Remark's slide classes.
|
||||
|
||||

|
||||
|
||||
---
|
||||
class: img-right
|
||||
|
||||
# Heading, Content, and Image
|
||||
|
||||

|
||||
|
||||
This is the `img-right` slide class. The content consists simply of a
|
||||
header, an image, and this text.
|
||||
|
||||
* The image's aspect ratio and cropping are not altered.
|
||||
* All content after the image goes in the lefthand column.
|
||||
|
||||
Although this text is in the lefthand column, the image comes _first_ in the
|
||||
markdown source.
|
||||
|
||||
---
|
||||
class: img-left
|
||||
|
||||
# Heading, Image, and Content
|
||||
|
||||

|
||||
|
||||
This is the `img-left` slide class. The content is structured in just the same
|
||||
way as the `img-right` slide class.
|
||||
|
||||
- All content after the image goes in the right-hand column.
|
||||
|
||||
--
|
||||
- These columns require no wrapper `<div>`, just plain Markdown.
|
||||
- This avoids interference with Remark features.
|
||||
|
||||
--
|
||||
- Incremental builds with `--` work fine, for example.
|
||||
|
||||
---
|
||||
class: img-right-full
|
||||
|
||||

|
||||
|
||||
# Content and Image
|
||||
|
||||
This is the `img-right-full` class. The content is simply an image and text
|
||||
(including a header in this case).
|
||||
|
||||
The image is 2x larger than the visible area and its position is set to `left`.
|
||||
This lets you pair this layout with the following one.
|
||||
|
||||
- A red flare silhouetted the jagged edge of a wing.
|
||||
- Almost before we knew it, we had left the ground.
|
||||
|
||||
---
|
||||
class: img-left-full
|
||||
|
||||

|
||||
|
||||
# The Other Side of the Coin
|
||||
|
||||
This slide's class is `img-left-full`. Like the previous slide, it's just an
|
||||
image and some content. The image is exactly the same as the previous slide, but
|
||||
it's positioned to reveal the other half.
|
||||
|
||||
- All their equipment and instruments are alive.
|
||||
- I watched the storm, so beautiful yet terrific.
|
||||
- Almost before we knew it, we had left the ground.
|
||||
|
||||
---
|
||||
class: img-caption
|
||||

|
||||
|
||||
This slide's class is `img-caption`. Its content is simply an image and this
|
||||
text.
|
||||
|
||||
---
|
||||
class: col-2
|
||||
|
||||
# Two-Column Layouts
|
||||
|
||||
This is a two-column layout, created with `class: col-2`.
|
||||
There's no columnar markup (no DIVs, for example) in the content.
|
||||
|
||||

|
||||
|
||||
The columns are created natively in CSS. The first H1 spans all columns.
|
||||
|
||||
> Relaxing in the Adirondack chair, I felt the gathering dusk creep on kitten
|
||||
feet. It came to me, then, that a day lived in this paradise was better than a
|
||||
lifetime anywhere else.
|
||||
|
||||
- I watched the storm, so beautiful yet terrific.
|
||||
|
||||
---
|
||||
class: col-3
|
||||
|
||||
# Three-Column Layouts
|
||||
|
||||
This is a three-column layout, created with `class: col-3`.
|
||||
|
||||
As with `col-2`, Apron assumes the slide begins with an H1 header.
|
||||
|
||||
Mist enveloped the ship three hours out from port.
|
||||
|
||||

|
||||
|
||||
- My two natures had memory in common.
|
||||
- The face of the moon was in shadow.
|
||||
|
||||
Call me Ishmael. Some years ago---never mind how long precisely---having little or
|
||||
no money in my purse, and nothing particular to interest me on shore, I thought
|
||||
I would sail about a little and see the watery part of the world.
|
||||
|
||||
---
|
||||
# Apron's Layout Classes
|
||||
|
||||
Here are the Apron slide layouts classes and how to use them:
|
||||
|
||||
| Class | Content structuring guidelines |
|
||||
|-------------------------------|-------------------------------------------------|
|
||||
| title | Add a background-image, H1, and optional H2/H3. |
|
||||
| img-caption | Add an image and optional caption text. |
|
||||
| img-right, img-left | Add a header, image, and content. |
|
||||
| img-right-full, img-left-full | Add an image, _then_ headers and content. |
|
||||
| col-2, col-3 | Add a header, then any content desired. |
|
||||
|
||||
---
|
||||
class: compact
|
||||
|
||||
# A Compact Slide
|
||||
|
||||
This slide's class is `compact`, which reduces font sizes, line heights, and
|
||||
slide padding. This makes it possible to fit more content on the slide, which
|
||||
can be useful.
|
||||
|
||||
- I watched the storm, so beautiful yet terrific.
|
||||
- Almost before we knew it, we had left the ground.
|
||||
|
||||
```javascript
|
||||
function $initHighlight(block, cls) {
|
||||
if (cls.search(/\bno\-highlight\b/) != -1)
|
||||
return process(block, true, 0x0F) + ` class="${cls}"`;
|
||||
for (var i = 0 / 2; i < classes.length; i++) {
|
||||
if (checkCondition(classes[i]) === undefined)
|
||||
console.log('undefined');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
class: compact, col-3
|
||||
|
||||
# Compact Three-Column Layout
|
||||
|
||||
This is a three-column layout,
|
||||
created with `class: col-3, compact`.
|
||||
|
||||
The `compact` class works well three columns, which have less room.
|
||||
|
||||

|
||||
|
||||
A shining crescent far beneath the flying vessel.
|
||||
|
||||
- It was going to be a lonely trip back.
|
||||
- Mist enveloped the ship three hours out from port.
|
||||
- My two natures had memory in common.
|
||||
- Silver mist suffused the deck of the ship.
|
||||
- The face of the moon was in shadow.
|
||||
|
||||
Call me Ishmael. Some years ago---never mind how long precisely---having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.
|
||||
|
||||
---
|
||||
class: roomy
|
||||
# A Roomy Slide
|
||||
|
||||
This slide doesn't have as much content, so I gave it the class `roomy` to let
|
||||
its content stretch out a bit for readability.
|
||||
|
||||
- A red flare silhouetted the jagged edge of a wing.
|
||||
- I watched the storm, so beautiful yet terrific.
|
||||
- Almost before we knew it, we had left the ground.
|
||||
- All their equipment and instruments are alive.
|
||||
|
||||
---
|
||||
class: roomy, col-2
|
||||
# Room For Two Columns
|
||||
|
||||
This roomy slide has two columns: `class: roomy, col-2`. Bulleted lists
|
||||
shouldn't break across columns.
|
||||
|
||||
- A red flare silhouetted the jagged edge of a wing.
|
||||
- I watched the storm, so beautiful yet terrific.
|
||||
- Almost before we knew it, we had left the ground.
|
||||
- All their equipment and instruments are alive.
|
||||
|
||||
---
|
||||
class: compact
|
||||
# Apron's Auxiliary Classes
|
||||
|
||||
Apron offers the following additional slide classes:
|
||||
|
||||
| Class | Applies To | Content structuring guidelines |
|
||||
|------------|------------|------------------------------------------------------------------------------------|
|
||||
| top | title | Moves the title and subtitle to the top of the slide. |
|
||||
| bottom | title | Moves the title and subtitle to the bottom. |
|
||||
| shelf | title | Extends the title's background and locates the subtitle above it. |
|
||||
| compact | (all) | Reduces text size and margins to fit more content. |
|
||||
| roomy | (all) | Increases text size to fill more space. |
|
||||
| fullbleed | (all) | Removes margins from the slide and its text. |
|
||||
| no-footer | (all) | Hides the footer (including slide number). |
|
||||
| debug | (all) | Outlines elements in gold to make formatting visible. Variants: -white and -black. |
|
||||
| debug-grid | (all) | Displays a layout grid. Variants: -8, -16, -solid, and combinations of these. |
|
||||
|
||||
---
|
||||
class: title, fogscreen
|
||||
background-image: url(tanya-nevidoma-632010-unsplash.jpg)
|
||||
# Adirondack's Typography and Features
|
||||
|
||||
---
|
||||
# Adirondack
|
||||
|
||||
Adirondack is built on top of Apron, and adds beautiful typography, colors, and
|
||||
extra features. This section is a demo and documentation of those features.
|
||||
|
||||
# Heading Level 1
|
||||
## Heading Level 2
|
||||
### Heading Level 3
|
||||
|
||||
Text with _italics_, __bold__, ~~strikethrough~~, `<code>`,
|
||||
[link](https://www.wikipedia.org/).
|
||||
|
||||
---
|
||||
class: col-2
|
||||
|
||||
# Bulleted Lists Demo
|
||||
|
||||
This column illustrates bulleted lists.
|
||||
|
||||
* A bulleted list.
|
||||
* Another bullet.
|
||||
* Nested bullets.
|
||||
* Another.
|
||||
* Deeply nested.
|
||||
* Back to the top-level again.
|
||||
|
||||
This column has numbered lists.
|
||||
|
||||
2. Another bullet.
|
||||
3. The last bullet.
|
||||
1. Nested numbered lists.
|
||||
2. Another.
|
||||
3. Deeper.
|
||||
1. Top-level again.
|
||||
|
||||
---
|
||||
# Code Typography Demo
|
||||
|
||||
Remark offers [HighlightJS](https://highlightjs.org/) code syntax highlighting.
|
||||
Story enables/disables this with [feature flags](/features/).
|
||||
|
||||
```javascript
|
||||
function $initHighlight(block, cls) {
|
||||
if (cls.search(/\bno\-highlight\b/) != -1)
|
||||
return process(block, true, 0x0F) + ` class="${cls}"`;
|
||||
for (var i = 0 / 2; i < classes.length; i++) {
|
||||
if (checkCondition(classes[i]) === undefined)
|
||||
console.log('undefined');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
class: col-2
|
||||
# Math Typesetting
|
||||
|
||||
Story supports math equation typesetting using the KaTeX library,
|
||||
if [`feature-math`](/math/) is enabled.
|
||||
|
||||
\\[
|
||||
\left( \beta mc^2 + c \left ( \sum_{n=1}^3 \alpha_n p\_n \right ) \right) \psi(x,t) = i \hbar \frac{\partial \psi(x,t) }{\partial t}
|
||||
\\]
|
||||
|
||||
The coherence is the \\(\kappa\\) coefficient of \\(n^2\\),
|
||||
which is \\(e^{i\pi}-1=0\\).
|
||||
|
||||
\\[
|
||||
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
|
||||
\\]
|
||||
|
||||

|
||||
|
||||
You can also display equations inline, such as the quadratic equation, which is
|
||||
\\(x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\\)
|
||||
|
||||
---
|
||||
class: compact
|
||||
# Music Notation and Sheet Music
|
||||
|
||||
Story supports [formatting sheet music from ABC](/music).
|
||||
|
||||
```abc
|
||||
X: 1
|
||||
T: Cooley's
|
||||
M: 4/4
|
||||
L: 1/8
|
||||
K: Emin
|
||||
|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
|
||||
EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
|
||||
```
|
||||
|
||||
---
|
||||
class: fit-h1, roomy
|
||||
# This Slide Has A Very Long Multi-Line Heading That Has Been Shrunk
|
||||
|
||||
The `fit-h1` slide class will automatically shrink the first H1 heading until it
|
||||
fits on a single line.
|
||||
|
||||
This doesn't work on title slides.
|
||||
|
||||
Story also applies 6'2" tall "smartypants" processing to replace 'straight
|
||||
quotes,' en- and em-dashes (boil for 12--15 minutes---longer if needed),
|
||||
and ellipses with their nicer typographical equivalents... isn't that nice?
|
||||
|
||||
---
|
||||
# Share Your Slides With QR Codes
|
||||
|
||||
.qrcode.db.fr.w-40pct.ml-4[]
|
||||
|
||||
Adirondack has built-in support for QR codes to share your slides easily. No
|
||||
more emailing links or files! Your audience can simply snap a picture of the
|
||||
screen.
|
||||
|
||||
Just enable the `feature-qrcode` [flag](/features/) and add markup like the
|
||||
following to your slide:
|
||||
|
||||
```
|
||||
.qrcode.db.fr.w-40pct.ml-4[]
|
||||
```
|
||||
|
||||
The `qrcode` class is important but the rest is up to you.
|
||||
|
||||
---
|
||||
# Export Your Slides To PDFs
|
||||
|
||||
Remark has support for printing slides to a PDF, using Google Chrome's print
|
||||
dialog (not the native system dialog).
|
||||
|
||||
There are some bugs in it... but Story implements workarounds so you don't even
|
||||
need to think about it.
|
||||
|
||||
Just print with Chrome and save to a PDF file.
|
||||
|
||||
This works for both 16:9 and 4:3 ratio slides. Speaking of which, you select
|
||||
that with the `ratio` in the front matter, as shown on the [getting
|
||||
started](#getting-started) slide.
|
||||
|
||||
---
|
||||
layout: true
|
||||
|
||||
.footer[
|
||||
- @xaprb
|
||||
- 
|
||||
]
|
||||
|
||||
---
|
||||
class: compact
|
||||
# Footer Content
|
||||
|
||||
This slide builds on content from the previous (hidden, layout) slide, whose
|
||||
content is:
|
||||
|
||||
```
|
||||
---
|
||||
layout: true
|
||||
.footer[
|
||||
- @xaprb
|
||||
- 
|
||||
]
|
||||
```
|
||||
|
||||
This content uses Adirondack's built-in `footer` css styling to define footer
|
||||
elements. You can see them at the bottom of this slide. In the next section,
|
||||
you'll learn Descartes classes you can add
|
||||
to the div to style it, e.g. `.footer.bt.bc-cornflower[...]`.
|
||||
|
||||
You can hide both the Remark and custom footer on any slide with `class: no-footer`.
|
||||
|
||||
---
|
||||
layout: false
|
||||
# Adirondack’s Slide Classes
|
||||
|
||||
Here are Adirondack's slide classes:
|
||||
|
||||
| Class | Notes |
|
||||
|---------------|----------------------------------------------------------------------|
|
||||
| `smokescreen` | Creates a dark shaded semi-transparent background on `title` slides. |
|
||||
| `fogscreen` | Similar to `smokescreen`, but uses a white shading. |
|
||||
| `fit-h1` | Shrinks the H1 heading's font-size to fit on a single line. |
|
||||
|
||||
---
|
||||
class: title, smokescreen, shelf
|
||||
background-image: url(will-turner-508747-unsplash.jpg)
|
||||
|
||||
# Positioning Images And Elements
|
||||
## Using Descartes To Create Intricate Layouts
|
||||
|
||||
---
|
||||
# Descartes' Styling Functionality
|
||||
|
||||
Descartes is an add-on that gives lots of power over image and element formatting with
|
||||
Markdown. It uses composable, functional pseudo-classes in the image's URL
|
||||
fragment (the part after the `#` character). For example, this image will be 33% width,
|
||||
display as block, 2rem right margin, and float left:
|
||||
|
||||
```
|
||||

|
||||
```
|
||||
|
||||

|
||||
|
||||
That URL has four "words" in the fragment, delimited by whitespace. The
|
||||
whitespace is important!
|
||||
|
||||
Image classes are also available for `<div>`s.
|
||||
|
||||
---
|
||||
class: center
|
||||
|
||||
This image collage has no "raw" markup or Remark `<div>` extensions. The next
|
||||
slide illustrates Descartes's grid of 12ths.
|
||||
|
||||

|
||||

|
||||

|
||||
|
||||
---
|
||||
class: fullbleed
|
||||
background-color: black
|
||||
|
||||

|
||||

|
||||

|
||||

|
||||

|
||||

|
||||

|
||||

|
||||
|
||||
.absolute.w-7-12th.pa-3.l-1-12th.t-20pct.ba.bw-4.br-4.bg-white-60pct[
|
||||
This slide is composed only of simple Markdown markup, no raw HTML.
|
||||
]
|
||||
|
||||
---
|
||||
# Using Descartes' Coordinate Grids
|
||||
|
||||
Descartes offers several length scales for element sizes and positions. For
|
||||
each, a class naming convention selects the value:
|
||||
|
||||
- rems, from 1 rem (-1) to 96rem (-9)
|
||||
- tenths, in 10% increments from -10pct to -100pct, plus -33pct, -34pct, and -75pct
|
||||
- twelfths, in 1/12th increments from -1-12th to -11-12th
|
||||
- thirds, as -third and -two-thirds
|
||||
|
||||
There's always a prefix that specifies what the item is, and a suffix that
|
||||
selects the units. So for example, if you want an element to have a width of
|
||||
50%, you can give it a class of `w-50pct`, and if you want it to be 25% width
|
||||
you can use `w-3-12th`.
|
||||
|
||||
---
|
||||
class: col-2
|
||||
# Descartes' Coordinate Selectors
|
||||
|
||||
You can apply the length scales from the previous slide to a variety of element
|
||||
properties (see right). The X can be any of the suffixes discussed on the
|
||||
previous slide.
|
||||
|
||||
These can be applied as classes to a DIV, or image pseudo-classes:
|
||||
|
||||
```
|
||||
.w-50pct.h-1-12th.t-0.l-50pct[....]
|
||||

|
||||
```
|
||||
|
||||
- w-X: width
|
||||
- maxw-X: max-width
|
||||
- minw-X: min-width
|
||||
- h-X: height
|
||||
- maxh-X: max-height
|
||||
- minh-X: min-height
|
||||
- t-X: top
|
||||
- r-X: right
|
||||
- b-X: bottom
|
||||
- l-X: left
|
||||
|
||||
---
|
||||
# Descartes' Other Features
|
||||
|
||||
Descartes also has classes to control color (text, border, background,
|
||||
transparency), opacity, borders (sides, width, radius), spacing (padding,
|
||||
margin), centering, display types, floats, clearfix, position types, background
|
||||
image fitting and positioning, and box shadows.
|
||||
|
||||
For many of these, there's a set of units and sizing scales.
|
||||
|
||||
These cannot be documented fully in this slideshow, but hopefully it gives you a
|
||||
sense of what's possible. You should read the `.less` files; they are short and
|
||||
easy to understand.
|
||||
|
||||
---
|
||||
# Where Did The Names Come From?
|
||||
|
||||
For some reason, I named my Remark slideshow layouts after iconic chair designs
|
||||
(Monobloc, Adirondack, etc).
|
||||
|
||||

|
||||
|
||||
The apron is the part of the chair upon which everything rests, so I gave the
|
||||
underlying "supporting" set of CSS that name. I named Descartes after the famous
|
||||
inventor of the Cartesian coordinate system.
|
||||
|
||||
Credit: http://www.props.eric-hart.com/
|
||||
|
Before Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 221 KiB |
|
|
@ -1,415 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 731.0755 360.29779"
|
||||
height="360.29779"
|
||||
width="731.0755"
|
||||
xml:space="preserve"
|
||||
version="1.1"
|
||||
id="svg2"><metadata
|
||||
id="metadata8"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs6"><clipPath
|
||||
id="clipPath12"
|
||||
clipPathUnits="userSpaceOnUse"><path
|
||||
id="path14"
|
||||
d="M 0,0 612,0 612,360 0,360 0,0 Z" /></clipPath><clipPath
|
||||
id="clipPath22"
|
||||
clipPathUnits="userSpaceOnUse"><path
|
||||
id="path24"
|
||||
d="M 0,0 612,0 612,360 0,360 0,0 Z" /></clipPath><clipPath
|
||||
id="clipPath32"
|
||||
clipPathUnits="userSpaceOnUse"><path
|
||||
id="path34"
|
||||
d="m 59.04,73.44 522.72,0 0,227.52 -522.72,0 0,-227.52 z" /></clipPath><clipPath
|
||||
id="clipPath78"
|
||||
clipPathUnits="userSpaceOnUse"><path
|
||||
id="path80"
|
||||
d="M 0,0 612,0 612,360 0,360 0,0 Z" /></clipPath><clipPath
|
||||
id="clipPath158"
|
||||
clipPathUnits="userSpaceOnUse"><path
|
||||
id="path160"
|
||||
d="m 59.04,73.44 522.72,0 0,227.52 -522.72,0 0,-227.52 z" /></clipPath><clipPath
|
||||
id="clipPath204"
|
||||
clipPathUnits="userSpaceOnUse"><path
|
||||
id="path206"
|
||||
d="M 0,0 612,0 612,360 0,360 0,0 Z" /></clipPath></defs><g
|
||||
clip-path="url(#clipPath12)"
|
||||
transform="matrix(1.25,0,0,-1.25,0,380.214)"
|
||||
id="g10"><g
|
||||
id="g16" /><g
|
||||
id="g18"><g
|
||||
clip-path="url(#clipPath22)"
|
||||
id="g20"><path
|
||||
id="path26"
|
||||
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="M 0,0 612,0 612,360 0,360 0,0 Z" /></g></g><g
|
||||
id="g28"><g
|
||||
clip-path="url(#clipPath32)"
|
||||
id="g30"><path
|
||||
id="path36"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 133.5,103.45 35,13.71" /><path
|
||||
id="path38"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 181.9,122.41 35,13.71" /><path
|
||||
id="path40"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 230.3,141.37 35,13.71" /><path
|
||||
id="path42"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 278.7,160.33 35,13.71" /><path
|
||||
id="path44"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 327.1,179.29 35,13.71" /><path
|
||||
id="path46"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 375.5,198.25 35,13.71" /><path
|
||||
id="path48"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 423.9,217.21 35,13.71" /><path
|
||||
id="path50"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 472.3,236.17 35,13.71" /><path
|
||||
id="path52"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 520.7,255.13 35,13.71" /><path
|
||||
id="path54"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 124.1,100.83 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path56"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 172.5,119.79 c 0,1.48 1.21,2.7 2.7,2.7 1.49,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.21,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path58"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 220.9,138.75 c 0,1.48 1.21,2.7 2.7,2.7 1.49,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.21,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path60"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 269.3,157.71 c 0,1.48 1.21,2.7 2.7,2.7 1.49,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.21,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path62"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 317.7,176.67 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path64"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 366.1,195.63 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path66"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 414.5,214.59 c 0,1.48 1.21,2.7 2.7,2.7 1.49,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.21,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path68"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 462.9,233.55 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path70"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 511.3,252.51 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path72"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 559.7,271.47 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /></g></g><g
|
||||
id="g74"><g
|
||||
clip-path="url(#clipPath78)"
|
||||
id="g76"><path
|
||||
id="path82"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 78.4,73.44 484,0" /><path
|
||||
id="path84"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 78.4,73.44 0,-7.2" /><path
|
||||
id="path86"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 175.2,73.44 0,-7.2" /><path
|
||||
id="path88"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 272,73.44 0,-7.2" /><path
|
||||
id="path90"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 368.8,73.44 0,-7.2" /><path
|
||||
id="path92"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 465.6,73.44 0,-7.2" /><path
|
||||
id="path94"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 562.4,73.44 0,-7.2" /><text
|
||||
id="text96"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(1,0,0,-1,73.95,47.52)"><tspan
|
||||
id="tspan98"
|
||||
y="0"
|
||||
x="0">0</tspan></text>
|
||||
<text
|
||||
id="text100"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(1,0,0,-1,170.75,47.52)"><tspan
|
||||
id="tspan102"
|
||||
y="0"
|
||||
x="0">2</tspan></text>
|
||||
<text
|
||||
id="text104"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(1,0,0,-1,267.55,47.52)"><tspan
|
||||
id="tspan106"
|
||||
y="0"
|
||||
x="0">4</tspan></text>
|
||||
<text
|
||||
id="text108"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(1,0,0,-1,364.35,47.52)"><tspan
|
||||
id="tspan110"
|
||||
y="0"
|
||||
x="0">6</tspan></text>
|
||||
<text
|
||||
id="text112"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(1,0,0,-1,461.15,47.52)"><tspan
|
||||
id="tspan114"
|
||||
y="0"
|
||||
x="0">8</tspan></text>
|
||||
<text
|
||||
id="text116"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(1,0,0,-1,553.5,47.52)"><tspan
|
||||
id="tspan118"
|
||||
y="0"
|
||||
x="0 8.8959999">10</tspan></text>
|
||||
<path
|
||||
id="path120"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 59.04,81.87 0,210.66" /><path
|
||||
id="path122"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 59.04,81.87 -7.2,0" /><path
|
||||
id="path124"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 59.04,134.53 -7.2,0" /><path
|
||||
id="path126"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 59.04,187.2 -7.2,0" /><path
|
||||
id="path128"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 59.04,239.87 -7.2,0" /><path
|
||||
id="path130"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 59.04,292.53 -7.2,0" /><text
|
||||
id="text132"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0,1,1,0,41.76,77.42)"><tspan
|
||||
id="tspan134"
|
||||
y="0"
|
||||
x="0">0</tspan></text>
|
||||
<text
|
||||
id="text136"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0,1,1,0,41.76,116.74)"><tspan
|
||||
id="tspan138"
|
||||
y="0"
|
||||
x="0 8.8959999 17.792 26.688">5000</tspan></text>
|
||||
<text
|
||||
id="text140"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0,1,1,0,41.76,217.63)"><tspan
|
||||
id="tspan142"
|
||||
y="0"
|
||||
x="0 8.8959999 17.792 26.688 35.584">15000</tspan></text>
|
||||
<path
|
||||
id="path144"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 59.04,73.44 522.72,0 0,227.52 -522.72,0 0,-227.52" /><text
|
||||
id="text146"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(1,0,0,-1,298.61,18.72)"><tspan
|
||||
id="tspan148"
|
||||
y="0"
|
||||
x="0 8.8959999 17.792 26.688 35.584">nodes</tspan></text>
|
||||
<text
|
||||
id="text150"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0,1,1,0,12.96,148.95)"><tspan
|
||||
id="tspan152"
|
||||
y="0"
|
||||
x="0 4.448 13.344 18.672001 27.568001 36.464001 45.360001 54.256001 63.152 72.047997">throughput</tspan></text>
|
||||
</g></g><g
|
||||
id="g154"><g
|
||||
clip-path="url(#clipPath158)"
|
||||
id="g156"><path
|
||||
id="path162"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 133.64,103.07 34.72,11.35" /><path
|
||||
id="path164"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 182.19,118.37 34.42,8.41" /><path
|
||||
id="path166"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 230.7,129.65 34.2,5.61" /><path
|
||||
id="path168"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 279.17,137.12 34.06,3.3" /><path
|
||||
id="path170"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 327.59,141.45 34.02,1.57" /><path
|
||||
id="path172"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 376,143.43 34,0.38" /><path
|
||||
id="path174"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 424.4,143.8 34,-0.43" /><path
|
||||
id="path176"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 472.8,143.08 34,-0.93" /><path
|
||||
id="path178"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 521.2,141.69 34,-1.23" /><path
|
||||
id="path180"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 124.1,100.83 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path182"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 172.5,116.66 c 0,1.48 1.21,2.7 2.7,2.7 1.49,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.21,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path184"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 220.9,128.49 c 0,1.48 1.21,2.7 2.7,2.7 1.49,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.21,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path186"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 269.3,136.43 c 0,1.48 1.21,2.7 2.7,2.7 1.49,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.21,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path188"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 317.7,141.12 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path190"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 366.1,143.35 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path192"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 414.5,143.89 c 0,1.48 1.21,2.7 2.7,2.7 1.49,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.21,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path194"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 462.9,143.28 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path196"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 511.3,141.95 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
|
||||
id="path198"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 559.7,140.2 c 0,1.49 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.21 2.7,-2.7 0,-1.48 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.22 -2.7,2.7" /></g></g><g
|
||||
id="g200"><g
|
||||
clip-path="url(#clipPath204)"
|
||||
id="g202"><path
|
||||
id="path208"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 78.4,73.44 484,0" /><path
|
||||
id="path210"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 78.4,73.44 0,-7.2" /><path
|
||||
id="path212"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 175.2,73.44 0,-7.2" /><path
|
||||
id="path214"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 272,73.44 0,-7.2" /><path
|
||||
id="path216"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 368.8,73.44 0,-7.2" /><path
|
||||
id="path218"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 465.6,73.44 0,-7.2" /><path
|
||||
id="path220"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 562.4,73.44 0,-7.2" /><text
|
||||
id="text222"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(1,0,0,-1,73.95,47.52)"><tspan
|
||||
id="tspan224"
|
||||
y="0"
|
||||
x="0">0</tspan></text>
|
||||
<text
|
||||
id="text226"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(1,0,0,-1,170.75,47.52)"><tspan
|
||||
id="tspan228"
|
||||
y="0"
|
||||
x="0">2</tspan></text>
|
||||
<text
|
||||
id="text230"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(1,0,0,-1,267.55,47.52)"><tspan
|
||||
id="tspan232"
|
||||
y="0"
|
||||
x="0">4</tspan></text>
|
||||
<text
|
||||
id="text234"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(1,0,0,-1,364.35,47.52)"><tspan
|
||||
id="tspan236"
|
||||
y="0"
|
||||
x="0">6</tspan></text>
|
||||
<text
|
||||
id="text238"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(1,0,0,-1,461.15,47.52)"><tspan
|
||||
id="tspan240"
|
||||
y="0"
|
||||
x="0">8</tspan></text>
|
||||
<text
|
||||
id="text242"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(1,0,0,-1,553.5,47.52)"><tspan
|
||||
id="tspan244"
|
||||
y="0"
|
||||
x="0 8.8959999">10</tspan></text>
|
||||
<path
|
||||
id="path246"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 59.04,81.87 0,210.66" /><path
|
||||
id="path248"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 59.04,81.87 -7.2,0" /><path
|
||||
id="path250"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 59.04,134.53 -7.2,0" /><path
|
||||
id="path252"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 59.04,187.2 -7.2,0" /><path
|
||||
id="path254"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 59.04,239.87 -7.2,0" /><path
|
||||
id="path256"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 59.04,292.53 -7.2,0" /><text
|
||||
id="text258"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0,1,1,0,41.76,77.42)"><tspan
|
||||
id="tspan260"
|
||||
y="0"
|
||||
x="0">0</tspan></text>
|
||||
<text
|
||||
id="text262"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0,1,1,0,41.76,116.74)"><tspan
|
||||
id="tspan264"
|
||||
y="0"
|
||||
x="0 8.8959999 17.792 26.688">5000</tspan></text>
|
||||
<text
|
||||
id="text266"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0,1,1,0,41.76,217.63)"><tspan
|
||||
id="tspan268"
|
||||
y="0"
|
||||
x="0 8.8959999 17.792 26.688 35.584">15000</tspan></text>
|
||||
<path
|
||||
id="path270"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 59.04,73.44 522.72,0 0,227.52 -522.72,0 0,-227.52" /><text
|
||||
id="text272"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(1,0,0,-1,298.61,18.72)"><tspan
|
||||
id="tspan274"
|
||||
y="0"
|
||||
x="0 8.8959999 17.792 26.688 35.584">nodes</tspan></text>
|
||||
<text
|
||||
id="text276"
|
||||
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
transform="matrix(0,1,1,0,12.96,148.95)"><tspan
|
||||
id="tspan278"
|
||||
y="0"
|
||||
x="0 4.448 13.344 18.672001 27.568001 36.464001 45.360001 54.256001 63.152 72.047997">throughput</tspan></text>
|
||||
</g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 28 KiB |