hugo-theme-introduction/exampleSite/docs/blog/configuration/index.html

425 lines
21 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer">
<meta name="description" content="Website Description">
<title>
Theme Features - Introduction
</title>
<meta property="og:title" content="Theme Features - Introduction" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Website Description"/>
<meta property="og:url" content="http://example.com/blog/configuration/"/>
<meta property="og:site_name" content="Introduction"/>
<meta property="og:image" content="http://example.com/home/profile.jpg"/>
<link rel="shortcut icon" href="/img/fav.ico">
<link rel="stylesheet" href="/css/main.min.daa833377fb1636f8cbfa65c601050bb5475623deb7aa6e6fdde94a064a6185d.css" integrity="sha256-2qgzN3&#43;xY2&#43;Mv6ZcYBBQu1R1Yj3reqbm/d6UoGSmGF0=" crossorigin="anonymous" media="screen">
</head>
<body>
<section id="top" class="section">
<div class="container hero fade-in one ">
<h1 class="bold-title is-1">Blog</h1>
</div>
<div class="section fade-in two ">
<div class="container">
<hr>
<nav class="navbar" role="navigation" aria-label="main navigation">
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false" >
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div class="navbar-menu " id="navMenu">
<a class="navbar-item" href="/">main</a>
<a class="navbar-item" href="/#about">About</a>
<a class="navbar-item" href="http://example.com/projects/">
Project
</a>
<a class="navbar-item" href="http://example.com/blog/">
Back to Blog
</a>
<a class="navbar-item" href="/#lorem">Lorem Ipsum</a>
<a class="navbar-item" href="/#contact">Contact</a>
<a class="navbar-item" href="http://example.com/es/">Español</a>
<a class="navbar-item" href="http://example.com/de/">Deutsch</a>
</div>
</nav>
<hr>
</div>
<div class="container">
<h2 class="title is-1 top-pad strong-post-title">
<a href="http://example.com/blog/configuration/">Theme Features</a>
</h2>
<div class="post-data">
Jul 25, 2020 |
4 minutes read
</div>
<div class="blog-share">
Share this:
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Theme%20Features%20http%3a%2f%2fexample.com%2fblog%2fconfiguration%2f" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
<i class="fab fa-twitter"></i>
<span class="hidden">Twitter</span>
</a>
<a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u=http%3a%2f%2fexample.com%2fblog%2fconfiguration%2f" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
<i class="fab fa-facebook-f"></i>
<span class="hidden">Facebook</span>
</a>
<a class="icon-pinterest" href="http://pinterest.com/pin/create/button/?url=http%3a%2f%2fexample.com%2fblog%2fconfiguration%2f&amp;description=Theme%20Features" onclick="window.open(this.href, 'pinterest-share','width=580,height=296');return false;">
<i class="fab fa-pinterest-p"></i>
<span class="hidden">Pinterest</span>
</a>
<a class="icon-google-plus" href="https://plus.google.com/share?url=http%3a%2f%2fexample.com%2fblog%2fconfiguration%2f" onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
<i class="fab fa-google-plus-g"></i>
<span class="hidden">Google+</span>
</a>
</div>
<p>
Tag:
<a href="/tags/code">code</a>
</p>
</div>
<div class="container markdown top-pad">
<p>Here are some helpful tips for setting up this theme.</p>
<h2 id="syntax-highlighting">Syntax Highlighting</h2>
<p>Introduction allows the use of Hugo&rsquo;s rich built-in syntax highlighting capabilities. See <a href="https://gohugo.io/content-management/syntax-highlighting/">Syntax Highlighting</a> in the Hugo docs.</p>
<p>Below is an example configuration for Highlight. See <a href="https://gohugo.io/getting-started/configuration-markup#highlight">Highlight in the Hugo docs</a> for more.</p>
<div class="highlight"><pre style="background-color:#f0f0f0;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml">[markup]
[markup.highlight]
codeFences = <span style="color:#007020;font-weight:bold">true</span>
guessSyntax = <span style="color:#007020;font-weight:bold">false</span>
hl_Lines = <span style="color:#4070a0">&#34;&#34;</span>
lineNoStart = <span style="color:#40a070">1</span>
lineNos = <span style="color:#007020;font-weight:bold">false</span>
lineNumbersInTable = <span style="color:#007020;font-weight:bold">true</span>
noClasses = <span style="color:#007020;font-weight:bold">true</span>
<span style="color:#60a0b0;font-style:italic"># For styles, see https://xyproto.github.io/splash/docs/longer/all.html</span>
style = <span style="color:#4070a0">&#34;friendly&#34;</span>
tabWidth = <span style="color:#40a070">4</span>
</code></pre></div><h2 id="shortcodes">Shortcodes</h2>
<p><a href="https://gohugo.io/templates/shortcode-templates/">Custom shortcodes</a> can be added to a <code>layouts/shortcodes/</code> directory in your site root. Below, I use two custom shortcodes to display a data file: the current configuration file for this site! See the <a href="https://github.com/victoriadrake/hugo-theme-introduction/blob/master/exampleSite/content/en/blog/configuration.md">source for this page</a> to understand how to use shortcodes.</p>
<h2 id="show-html-in-posts">Show HTML in Posts</h2>
<p>To ensure Hugo renders any HTML that your shortcode or other additions like Font Awesome uses in posts, make sure these lines for <a href="https://gohugo.io/getting-started/configuration-markup">the Goldmark renderer</a> are in your <code>config.toml</code>:</p>
<div class="highlight"><pre style="background-color:#f0f0f0;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml">[markup]
defaultMarkdownHandler = <span style="color:#4070a0">&#34;goldmark&#34;</span>
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = <span style="color:#007020;font-weight:bold">true</span>
</code></pre></div><h2 id="configuration">Configuration</h2>
<p>Introduction can be easily configured using <a href="https://gohugo.io/getting-started/configuration/">Hugo&rsquo;s configuration file</a>. You can copy the <code>config.toml</code> in the <code>exampleSite/</code> to your site root get started.</p>
<p>Here are all the options included in the configuration file for this example site!</p>
<div class="highlight"><pre style="background-color:#f0f0f0;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml">
baseURL = <span style="color:#4070a0">&#34;http://example.com/&#34;</span> <span style="color:#60a0b0;font-style:italic"># Your domain name. Must end with &#34;/&#34;</span>
theme = <span style="color:#4070a0">&#34;introduction&#34;</span>
DefaultContentLanguage = <span style="color:#4070a0">&#34;en&#34;</span> <span style="color:#60a0b0;font-style:italic"># Default language for multilingual sites</span>
<span style="color:#60a0b0;font-style:italic"># disqusshortname = &#34;&#34; # https://gohugo.io/content-management/comments</span>
<span style="color:#60a0b0;font-style:italic"># googleAnalytics = &#34;&#34; # https://gohugo.io/templates/internal/#google-analytics</span>
[params]
themeStyle = <span style="color:#4070a0">&#34;light&#34;</span> <span style="color:#60a0b0;font-style:italic"># Choose &#34;light&#34; or &#34;dark&#34;</span>
favicon = <span style="color:#4070a0">&#34;/img/fav.ico&#34;</span> <span style="color:#60a0b0;font-style:italic"># Path to favicon file</span>
showRSSButton = <span style="color:#007020;font-weight:bold">false</span> <span style="color:#60a0b0;font-style:italic"># Show rss button in navigation</span>
fadeIn = <span style="color:#007020;font-weight:bold">true</span> <span style="color:#60a0b0;font-style:italic"># Turn on/off the fade-in effect</span>
fadeInIndex = <span style="color:#007020;font-weight:bold">false</span> <span style="color:#60a0b0;font-style:italic"># Turn on/off the fade-in effect on the index page even if fade-in was otherwise turned off</span>
dateFormat = <span style="color:#4070a0">&#34;Jan 2, 2006&#34;</span>
email = <span style="color:#4070a0">&#34;youremail@email.com&#34;</span> <span style="color:#60a0b0;font-style:italic"># E-mail address for contact section</span>
<span style="color:#60a0b0;font-style:italic"># customCSS = [&#34;foo.css&#34;] # Include custom css files placed under assets/</span>
<span style="color:#60a0b0;font-style:italic"># Configure the home page</span>
[params.home]
introHeight = <span style="color:#4070a0">&#34;fullheight&#34;</span> <span style="color:#60a0b0;font-style:italic"># Input either &#34;medium&#34; or &#34;large&#34; or &#34;fullheight&#34;</span>
showLatest = <span style="color:#007020;font-weight:bold">true</span> <span style="color:#60a0b0;font-style:italic"># Show latest blog post summary</span>
showAllPosts = <span style="color:#007020;font-weight:bold">false</span> <span style="color:#60a0b0;font-style:italic"># Set true to list all posts on home page, or set false to link to separate blog list page</span>
numberOfProjectsToShow = <span style="color:#40a070">3</span> <span style="color:#60a0b0;font-style:italic"># Maximum number of projects to show on home page. Unset or comment out to show all projects</span>
localTime = <span style="color:#007020;font-weight:bold">true</span> <span style="color:#60a0b0;font-style:italic"># Show your current local time in contact section</span>
timeZone = <span style="color:#4070a0">&#34;America/Los_Angeles&#34;</span> <span style="color:#60a0b0;font-style:italic"># Your timezone as in the TZ* column of this list: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones</span>
timeFormat = <span style="color:#4070a0">&#34;h:mm A&#34;</span> <span style="color:#60a0b0;font-style:italic"># https://momentjs.com/docs/#/displaying/format/</span>
[params.projects]
useTwoColumns = <span style="color:#007020;font-weight:bold">false</span> <span style="color:#60a0b0;font-style:italic"># Use a layout with two columns instead of three</span>
<span style="color:#60a0b0;font-style:italic"># Share buttons on blog post pages</span>
[params.share]
twitter = <span style="color:#007020;font-weight:bold">true</span>
facebook = <span style="color:#007020;font-weight:bold">true</span>
googlePlus = <span style="color:#007020;font-weight:bold">true</span>
pinterest = <span style="color:#007020;font-weight:bold">true</span>
<span style="color:#60a0b0;font-style:italic"># Social icons appear in introduction and contact section. Add as many more as you like.</span>
<span style="color:#60a0b0;font-style:italic"># Icon pack &#34;fab&#34; includes social network icons, see: https://fontawesome.com/icons?d=gallery&amp;s=brands&amp;m=free</span>
<span style="color:#60a0b0;font-style:italic"># Icon pack &#34;fas&#34; includes solid style icons, see: https://fontawesome.com/icons?d=gallery&amp;s=solid&amp;m=free</span>
[[params.social]]
url = <span style="color:#4070a0">&#34;https://twitter.com/&#34;</span>
icon = <span style="color:#4070a0">&#34;twitter&#34;</span> <span style="color:#60a0b0;font-style:italic"># icon name without the &#39;fa-&#39;</span>
icon_pack = <span style="color:#4070a0">&#34;fab&#34;</span>
[[params.social]]
url = <span style="color:#4070a0">&#34;https://facebook.com/&#34;</span>
icon = <span style="color:#4070a0">&#34;facebook-f&#34;</span> <span style="color:#60a0b0;font-style:italic"># icon name without the &#39;fa-&#39;</span>
icon_pack = <span style="color:#4070a0">&#34;fab&#34;</span>
[[params.social]]
url = <span style="color:#4070a0">&#34;https://linkedin.com/&#34;</span>
icon = <span style="color:#4070a0">&#34;linkedin-in&#34;</span> <span style="color:#60a0b0;font-style:italic"># icon name without the &#39;fa-&#39;</span>
icon_pack = <span style="color:#4070a0">&#34;fab&#34;</span>
[[params.social]]
url = <span style="color:#4070a0">&#34;mailto:youremail@email.com&#34;</span> <span style="color:#60a0b0;font-style:italic"># For a direct email link, use &#34;mailto:test@example.org&#34;.</span>
icon = <span style="color:#4070a0">&#34;paper-plane&#34;</span> <span style="color:#60a0b0;font-style:italic"># icon name without the &#39;fa-&#39;</span>
icon_pack = <span style="color:#4070a0">&#34;fas&#34;</span>
[[params.social]]
url = <span style="color:#4070a0">&#34;https://mastodon.social/&#34;</span>
icon = <span style="color:#4070a0">&#34;mastodon&#34;</span> <span style="color:#60a0b0;font-style:italic"># icon name without the &#39;fa-&#39;</span>
icon_pack = <span style="color:#4070a0">&#34;fab&#34;</span>
html_attributes = <span style="color:#4070a0">&#34;rel=\&#34;me\&#34;&#34;</span> <span style="color:#60a0b0;font-style:italic"># Add rel attribute for Mastodon profile link verification</span>
<span style="color:#60a0b0;font-style:italic"># If you don&#39;t want to use the default menu, you can define one by yourself</span>
<span style="color:#60a0b0;font-style:italic"># [[menu.main]]</span>
<span style="color:#60a0b0;font-style:italic"># name = &#34;Home&#34;</span>
<span style="color:#60a0b0;font-style:italic"># url = &#34;/&#34;</span>
<span style="color:#60a0b0;font-style:italic"># weight = 0</span>
<span style="color:#60a0b0;font-style:italic"># [[menu.main]]</span>
<span style="color:#60a0b0;font-style:italic"># name = &#34;Blog&#34;</span>
<span style="color:#60a0b0;font-style:italic"># url = &#34;/blog/&#34;</span>
<span style="color:#60a0b0;font-style:italic"># weight = 1</span>
<span style="color:#60a0b0;font-style:italic"># We only use tag as a taxonomies</span>
<span style="color:#60a0b0;font-style:italic"># You can add more by yourself</span>
[taxonomies]
tag = <span style="color:#4070a0">&#34;tags&#34;</span>
[markup]
defaultMarkdownHandler = <span style="color:#4070a0">&#34;goldmark&#34;</span>
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = <span style="color:#007020;font-weight:bold">true</span>
[markup.highlight]
codeFences = <span style="color:#007020;font-weight:bold">true</span>
guessSyntax = <span style="color:#007020;font-weight:bold">false</span>
hl_Lines = <span style="color:#4070a0">&#34;&#34;</span>
lineNoStart = <span style="color:#40a070">1</span>
lineNos = <span style="color:#007020;font-weight:bold">false</span>
lineNumbersInTable = <span style="color:#007020;font-weight:bold">true</span>
noClasses = <span style="color:#007020;font-weight:bold">true</span>
<span style="color:#60a0b0;font-style:italic"># For styles, see https://xyproto.github.io/splash/docs/longer/all.html</span>
style = <span style="color:#4070a0">&#34;friendly&#34;</span>
tabWidth = <span style="color:#40a070">4</span>
[languages]
[languages.en]
languageName = <span style="color:#4070a0">&#34;English&#34;</span>
languageCode = <span style="color:#4070a0">&#34;en-us&#34;</span>
contentDir = <span style="color:#4070a0">&#34;content/en&#34;</span>
weight = <span style="color:#40a070">0</span>
title = <span style="color:#4070a0">&#34;Introduction&#34;</span>
[languages.en.params]
description = <span style="color:#4070a0">&#34;Website Description&#34;</span> <span style="color:#60a0b0;font-style:italic"># Max 160 characters show in search results</span>
<span style="color:#60a0b0;font-style:italic"># footerText = &#34;&#34; # Text to override default footer text (markdown allowed)</span>
[languages.es]
languageName = <span style="color:#4070a0">&#34;Español&#34;</span>
languageCode = <span style="color:#4070a0">&#34;es&#34;</span>
contentDir = <span style="color:#4070a0">&#34;content/es&#34;</span>
weight = <span style="color:#40a070">1</span>
title = <span style="color:#4070a0">&#34;Introducción&#34;</span>
[languages.es.params]
description = <span style="color:#4070a0">&#34;Descripcion del sitio web&#34;</span>
<span style="color:#60a0b0;font-style:italic"># footerText = &#34;&#34;</span>
[languages.de]
languageName = <span style="color:#4070a0">&#34;Deutsch&#34;</span>
languageCode = <span style="color:#4070a0">&#34;de&#34;</span>
contentDir = <span style="color:#4070a0">&#34;content/de&#34;</span>
weight = <span style="color:#40a070">2</span>
title = <span style="color:#4070a0">&#34;Vorstellung&#34;</span>
[languages.de.params]
dateFormat = <span style="color:#4070a0">&#34;2. January 2006&#34;</span>
description = <span style="color:#4070a0">&#34;Beschreibung der Webseite&#34;</span>
<span style="color:#60a0b0;font-style:italic"># footerText = &#34;&#34;</span>
</code></pre></div>
</div>
<div class="container">
<hr>
</div>
<div class="container has-text-centered top-pad">
<a href="#top">
<i class="fa fa-arrow-up"></i>
</a>
</div>
<div class="container">
<hr>
</div>
<div class="section" id="footer">
<div class="container has-text-centered">
<span class="footer-text">
<a href="https://github.com/victoriadrake/hugo-theme-introduction/"><strong>Introduction</strong></a> theme for <a href="http://gohugo.io/">Hugo</a>. Made with <a href="https://victoria.dev"><i class="fa fa-heart"></i> and <i class="fa fa-coffee"></i></a> by open source contributors.
</span>
</div>
</div>
</div>
</section>
<script src="http://example.com/js/bundle.e6934e69d06bb8a213134f4c1468f9478bb7755e786dfb60e3c5a917c5335805.js" integrity="sha256-5pNOadBruKITE09MFGj5R4u3dV54bftg48WpF8UzWAU="></script>
</body>
</html>