mirror of
https://git.adityakumar.xyz/hugo-theme-introduction.git
synced 2024-12-23 07:02:53 +00:00
424 lines
21 KiB
HTML
424 lines
21 KiB
HTML
<!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+xY2+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&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’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">""</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">"friendly"</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">"goldmark"</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’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">"http://example.com/"</span> <span style="color:#60a0b0;font-style:italic"># Your domain name. Must end with "/"</span>
|
|
theme = <span style="color:#4070a0">"introduction"</span>
|
|
DefaultContentLanguage = <span style="color:#4070a0">"en"</span> <span style="color:#60a0b0;font-style:italic"># Default language for multilingual sites</span>
|
|
<span style="color:#60a0b0;font-style:italic"># disqusshortname = "" # https://gohugo.io/content-management/comments</span>
|
|
<span style="color:#60a0b0;font-style:italic"># googleAnalytics = "" # https://gohugo.io/templates/internal/#google-analytics</span>
|
|
|
|
[params]
|
|
themeStyle = <span style="color:#4070a0">"light"</span> <span style="color:#60a0b0;font-style:italic"># Choose "light" or "dark"</span>
|
|
favicon = <span style="color:#4070a0">"/img/fav.ico"</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">"Jan 2, 2006"</span>
|
|
email = <span style="color:#4070a0">"youremail@email.com"</span> <span style="color:#60a0b0;font-style:italic"># E-mail address for contact section</span>
|
|
<span style="color:#60a0b0;font-style:italic"># customCSS = ["foo.css"] # 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">"fullheight"</span> <span style="color:#60a0b0;font-style:italic"># Input either "medium" or "large" or "fullheight"</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">"America/Los_Angeles"</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">"h:mm A"</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 "fab" includes social network icons, see: https://fontawesome.com/icons?d=gallery&s=brands&m=free</span>
|
|
<span style="color:#60a0b0;font-style:italic"># Icon pack "fas" includes solid style icons, see: https://fontawesome.com/icons?d=gallery&s=solid&m=free</span>
|
|
[[params.social]]
|
|
url = <span style="color:#4070a0">"https://twitter.com/"</span>
|
|
icon = <span style="color:#4070a0">"twitter"</span> <span style="color:#60a0b0;font-style:italic"># icon name without the 'fa-'</span>
|
|
icon_pack = <span style="color:#4070a0">"fab"</span>
|
|
[[params.social]]
|
|
url = <span style="color:#4070a0">"https://facebook.com/"</span>
|
|
icon = <span style="color:#4070a0">"facebook-f"</span> <span style="color:#60a0b0;font-style:italic"># icon name without the 'fa-'</span>
|
|
icon_pack = <span style="color:#4070a0">"fab"</span>
|
|
[[params.social]]
|
|
url = <span style="color:#4070a0">"https://linkedin.com/"</span>
|
|
icon = <span style="color:#4070a0">"linkedin-in"</span> <span style="color:#60a0b0;font-style:italic"># icon name without the 'fa-'</span>
|
|
icon_pack = <span style="color:#4070a0">"fab"</span>
|
|
[[params.social]]
|
|
url = <span style="color:#4070a0">"mailto:youremail@email.com"</span> <span style="color:#60a0b0;font-style:italic"># For a direct email link, use "mailto:test@example.org".</span>
|
|
icon = <span style="color:#4070a0">"paper-plane"</span> <span style="color:#60a0b0;font-style:italic"># icon name without the 'fa-'</span>
|
|
icon_pack = <span style="color:#4070a0">"fas"</span>
|
|
[[params.social]]
|
|
url = <span style="color:#4070a0">"https://mastodon.social/"</span>
|
|
icon = <span style="color:#4070a0">"mastodon"</span> <span style="color:#60a0b0;font-style:italic"># icon name without the 'fa-'</span>
|
|
icon_pack = <span style="color:#4070a0">"fab"</span>
|
|
html_attributes = <span style="color:#4070a0">"rel=\"me\""</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'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 = "Home"</span>
|
|
<span style="color:#60a0b0;font-style:italic"># url = "/"</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 = "Blog"</span>
|
|
<span style="color:#60a0b0;font-style:italic"># url = "/blog/"</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">"tags"</span>
|
|
|
|
[markup]
|
|
defaultMarkdownHandler = <span style="color:#4070a0">"goldmark"</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">""</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">"friendly"</span>
|
|
tabWidth = <span style="color:#40a070">4</span>
|
|
|
|
[languages]
|
|
[languages.en]
|
|
languageName = <span style="color:#4070a0">"English"</span>
|
|
languageCode = <span style="color:#4070a0">"en-us"</span>
|
|
contentDir = <span style="color:#4070a0">"content/en"</span>
|
|
weight = <span style="color:#40a070">0</span>
|
|
title = <span style="color:#4070a0">"Introduction"</span>
|
|
[languages.en.params]
|
|
description = <span style="color:#4070a0">"Website Description"</span> <span style="color:#60a0b0;font-style:italic"># Max 160 characters show in search results</span>
|
|
<span style="color:#60a0b0;font-style:italic"># footerText = "" # Text to override default footer text (markdown allowed)</span>
|
|
|
|
[languages.es]
|
|
languageName = <span style="color:#4070a0">"Español"</span>
|
|
languageCode = <span style="color:#4070a0">"es"</span>
|
|
contentDir = <span style="color:#4070a0">"content/es"</span>
|
|
weight = <span style="color:#40a070">1</span>
|
|
title = <span style="color:#4070a0">"Introducción"</span>
|
|
[languages.es.params]
|
|
description = <span style="color:#4070a0">"Descripcion del sitio web"</span>
|
|
<span style="color:#60a0b0;font-style:italic"># footerText = ""</span>
|
|
|
|
[languages.de]
|
|
languageName = <span style="color:#4070a0">"Deutsch"</span>
|
|
languageCode = <span style="color:#4070a0">"de"</span>
|
|
contentDir = <span style="color:#4070a0">"content/de"</span>
|
|
weight = <span style="color:#40a070">2</span>
|
|
title = <span style="color:#4070a0">"Vorstellung"</span>
|
|
[languages.de.params]
|
|
dateFormat = <span style="color:#4070a0">"2. January 2006"</span>
|
|
description = <span style="color:#4070a0">"Beschreibung der Webseite"</span>
|
|
<span style="color:#60a0b0;font-style:italic"># footerText = ""</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>
|