You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
615 lines
21 KiB
615 lines
21 KiB
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="author" content="Lednerb">
|
|
<meta name="description" content="Bilberry Premium Theme for Hugo.">
|
|
<meta name="keywords" content="blog,personal,responsive,search,font awesome,pages,posts,multilingual,highlight.js,syntax highlighting,premium,shortcuts">
|
|
<meta name="generator" content="Hugo 0.50" />
|
|
<title> Hugo Travelify Theme Features | My cool new Blog</title>
|
|
<meta name="description" content="Hugo Travelify Theme Features - Bilberry Premium Theme for Hugo.">
|
|
<meta itemprop="name" content="Hugo Travelify Theme Features">
|
|
<meta itemprop="description" content="Hugo Travelify Theme Features - Bilberry Premium Theme for Hugo.">
|
|
<meta property="og:title" content="Hugo Travelify Theme Features">
|
|
<meta property="og:description" content="Hugo Travelify Theme Features - Bilberry Premium Theme for Hugo.">
|
|
<meta property="og:image" content="https://www.gravatar.com/avatar/88188b6cc451928eba90e8400bc68086?size=200">
|
|
<meta property="og:url" content="https://h.cowbay.org/article/hugo-travelify-theme-features/">
|
|
<meta property="og:site_name" content="My cool new Blog">
|
|
<meta property="og:type" content="article">
|
|
<link rel="icon" type="image/png" href="https://h.cowbay.org/favicon-32x32.png" sizes="32x32">
|
|
<link rel="icon" type="image/png" href="https://h.cowbay.org/favicon-16x16.png" sizes="16x16">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://h.cowbay.org/sass/combined.min.717098cb5503581e75f12e486a847ca410bf8367d4d8713f4c37affc868c5a1d.css">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
<body class="bilberry-hugo-theme">
|
|
|
|
<nav>
|
|
|
|
<div class="container">
|
|
<ul class="topnav">
|
|
|
|
|
|
<li><a href="/page/about-bilberry/">About Bilberry</a></li>
|
|
|
|
|
|
|
|
<li><a href="https://github.com/Lednerb/bilberry-hugo-theme" target="_blank">Github</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<div id="search-box" class="search">
|
|
<i class="fa fa-search"></i>
|
|
<input id="search" type="text" placeholder="Search ...">
|
|
</div>
|
|
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<header>
|
|
<div class="container">
|
|
<div class="logo">
|
|
<a href="/" class="logo">
|
|
|
|
<img src="https://www.gravatar.com/avatar/88188b6cc451928eba90e8400bc68086?d=mm&size=200" alt="">
|
|
|
|
|
|
<span class="overlay"><i class="fa fa-home"></i></span>
|
|
</a>
|
|
</div>
|
|
<div class="titles">
|
|
<h3 class="title"><a href="/">My cool new Blog</a></h3>
|
|
|
|
<span class="subtitle">Hello World! This is the most epic subtitle ever.</span>
|
|
|
|
</div>
|
|
|
|
<div class="languages">
|
|
|
|
|
|
<a href="/en" class="active">en</a>
|
|
|
|
|
|
|
|
<a href="/de">de</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="toggler">
|
|
|
|
<i class="fa fa-bars" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<div class="main container">
|
|
|
|
|
|
<div class="article-wrapper u-cf single">
|
|
|
|
<a class="bubble" href="/article/hugo-travelify-theme-features/">
|
|
<i class="fa fa-fw fa-pencil"></i>
|
|
</a>
|
|
|
|
<article class="default article">
|
|
|
|
|
|
<div class="content">
|
|
<h3><a href="/article/hugo-travelify-theme-features/">Hugo Travelify Theme Features</a></h3>
|
|
<div class="meta">
|
|
|
|
|
|
<span class="date moment">2016-06-28</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<span class="categories">
|
|
|
|
<a href="/categories/lorem">lorem</a>
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p><strong>Hugo-Travelify-Theme</strong> is the Hugo version of the Wordpress theme - Travelify . The source code was adapted from <em>digitalcraftsman</em>’s Icarus theme with a few changes for additional features (Even this README is a fork from his original theme README :)).</p>
|
|
|
|
<p></p>
|
|
|
|
<p>Some of the important features of Hugo-Travelify-Theme are:</p>
|
|
|
|
<ul>
|
|
<li>Automatic slider generation with banner images</li>
|
|
<li>Subscribe via Email through Mailchimp integration (You have to sign up and generate the HTML code)</li>
|
|
<li>Multiple author support (Included in the taxonomy)</li>
|
|
<li>i10n data</li>
|
|
<li>Disqus integration</li>
|
|
<li>Social media share</li>
|
|
<li>Google Analytics</li>
|
|
</ul>
|
|
|
|
<p><img src="/screenshot-1.png" alt="" /></p>
|
|
|
|
<p><img src="/screenshot-2.png" alt="" /></p>
|
|
|
|
<p><img src="/screenshot-3.png" alt="" /></p>
|
|
|
|
<h2 id="get-the-theme">Get the theme</h2>
|
|
|
|
<p>If you have <code>git</code> installed, you can do the following at the command-line-interface at the Hugo directory/folder:</p>
|
|
|
|
<pre><code>$ cd themes
|
|
$ git clone https://github.com/balaramadurai/hugo-travelify-theme.git
|
|
</code></pre>
|
|
|
|
<p>You should see a folder called <code>hugo-travelify-theme</code> inside the <code>themes</code> directory that we created a few moments ago. For more information read the official <a href="https://gohugo.io/overview/installing/">setup guide</a> of Hugo.</p>
|
|
|
|
<h2 id="setup">Setup</h2>
|
|
|
|
<p>In the next step navigate to the <code>exampleSite</code> folder at <code>themes/hugo-travelify-theme/exampleSite/</code>. Its structure should look similar to this:</p>
|
|
|
|
<pre><code>exampleSite
|
|
| config.toml
|
|
+---content
|
|
| | about.md
|
|
| | contact.md
|
|
| \---post
|
|
| creating-a-new-theme.md
|
|
| go-is-for-lovers.md
|
|
| hugo-is-for-lovers.md
|
|
| linked-post.md
|
|
| migrate-from-jekyll.md
|
|
| this-post-has-no-body.md
|
|
+---data
|
|
| l10n.toml
|
|
\---static
|
|
| new-york-featured.jpg
|
|
\---banners
|
|
7148951717_9bbf185db3_h-1018x460.jpg
|
|
featured-4.jpg
|
|
featured-5.jpg
|
|
new-york-featured.jpg
|
|
placeholder.png
|
|
Spain-Plaza-de-Cibeles-Madrid-1018x460.jpg
|
|
Spain-Plaza-de-Cibeles-Madrid-670x300.jpg
|
|
spain6-1018x460.jpg
|
|
</code></pre>
|
|
|
|
<p>In order to get your site running, you need to copy <code>config.toml</code> and <code>data/l10n.toml</code> into the root folders.</p>
|
|
|
|
<h2 id="the-config-file">The config file</h2>
|
|
|
|
<p>Now, let us take a look into the <code>config.toml</code>. Feel free to play around with the settings.</p>
|
|
|
|
<h3 id="automatic-slider">Automatic Slider</h3>
|
|
|
|
<p>The slider can be switched on and off at will and you can customize the number of banner images you want on the carousel using the parameters in the config.</p>
|
|
|
|
<pre><code>[params.slider]
|
|
enable = true
|
|
num_features = 4 # The slider picks up the banner images from the N most recent posts, where num_features is N.
|
|
</code></pre>
|
|
|
|
<p><em>Tip</em> - For best results in the slider, use <strong>1018x460</strong> resolution for the banner images</p>
|
|
|
|
<h3 id="google-analytics">Google Analytics</h3>
|
|
|
|
<pre><code>GoogleAnalytics = ""
|
|
</code></pre>
|
|
|
|
<h3 id="comments">Comments</h3>
|
|
|
|
<p>The optional comment system is powered by Disqus. Enter your shortname to enable the comment section under your posts.</p>
|
|
|
|
<pre><code>disqusShortname = ""
|
|
</code></pre>
|
|
|
|
<p>Tip: you can disable the comment section for a single page in its frontmatter:</p>
|
|
|
|
<pre><code class="language-toml">+++
|
|
disable_comments = true
|
|
+++
|
|
</code></pre>
|
|
|
|
<h3 id="menu">Menu</h3>
|
|
|
|
<p>You can also define the items menu entries as you like. First, let us link a post that you’ve written. We can do this in the frontmatter of the post’s content file by setting <code>menu</code> to <code>main</code>.</p>
|
|
|
|
<pre><code>+++
|
|
menu = "main"
|
|
+++
|
|
</code></pre>
|
|
|
|
<p>Furthermore, we can add entries that don’t link to posts. Back in the <code>config.toml</code> you’ll find a section for the menus:</p>
|
|
|
|
<pre><code>[[menu.main]]
|
|
name = "Contact"
|
|
url = "/contact/"
|
|
weight = 20
|
|
</code></pre>
|
|
|
|
<p>Define a label and enter the URL to resource you want to link. With <code>before</code> you can decide whether the link should appear before <strong>or</strong> after all linked posts in the menu. Therefore, <code>Home</code> appears before the linked post.</p>
|
|
|
|
<h3 id="sidebars">Sidebars</h3>
|
|
|
|
<p>In order to use the full width of the website you can disable the profile on the left and / or the widgets on the right for a single page in the frontmatter:</p>
|
|
|
|
<pre><code class="language-toml">+++
|
|
disable_profile = true
|
|
disable_widgets = true
|
|
+++
|
|
</code></pre>
|
|
|
|
<h3 id="tell-me-who-you-are">Tell me who you are</h3>
|
|
|
|
<p>This theme also provides a profile section on the left. Add your social network accounts to the profile section on the left by entering your username under <code>social</code>. The links to your account will be create automatically.</p>
|
|
|
|
<h3 id="widgets">Widgets</h3>
|
|
|
|
<p>Beside the profile section you can add widgets on the right sidebar. The following widgets are available:</p>
|
|
|
|
<ul>
|
|
<li>recent articles</li>
|
|
<li>Subscribe via email (Mailchimp integration - Use the method prescribed in <a href="http://kb.mailchimp.com/lists/signup-forms/add-a-signup-form-to-your-website">http://kb.mailchimp.com/lists/signup-forms/add-a-signup-form-to-your-website</a> and copy the text from <code>form=//username/mailchimp/path/</code>and copy this path to the <code>mailchimpform</code> variable under <code>[params.widget]</code> in your <code>config.toml</code>)</li>
|
|
<li>Multiple author support</li>
|
|
<li>category list</li>
|
|
<li>tag list</li>
|
|
<li>tag cloud</li>
|
|
<li>Duckduckgo search enabled on your website</li>
|
|
</ul>
|
|
|
|
<p>You can deactivate them under <code>params.widgets</code>:</p>
|
|
|
|
<pre><code># Enable and disable widgets for the right sidebar
|
|
[params.widgets]
|
|
recent_articles = true
|
|
categories = true
|
|
tags = true
|
|
tag_cloud = true
|
|
archives = false # This feature is yet to be implemented because of limitations in Hugo's way of working.
|
|
search = true
|
|
author = true
|
|
mailchimp = true
|
|
mailchimpform = "//mailchimp/url/goes/here"
|
|
</code></pre>
|
|
|
|
<h3 id="date-line">Date line</h3>
|
|
|
|
<p>The date line includes: post date, categories, comments and sharing links. However, if you want certain pages to omit the date line, simply put <code>nodateline = true</code> in the front matter for that page.</p>
|
|
|
|
<h3 id="disable-previous-next-article-links-and-remove-tags">Disable Previous / next article links and remove tags</h3>
|
|
|
|
<p>To disable the inclusion of a previous/next article link at the bottom of the page, add <code>noprevnext = true</code> to the front matter. Along with this feature, along with <code>nodateline = true</code> can be used to create standalone pages that are less “blog-like”.</p>
|
|
|
|
<h2 id="localization-l10n">Localization (l10n)</h2>
|
|
|
|
<p>You don’t blog in English and you want to translate the theme into your native locale? No problem. Take a look in the <code>data</code> folder and you’ll find a file <code>l10n.toml</code> that we’ve copied at the beginning. It contains all strings related to the theme. Just replace the original strings with your own.</p>
|
|
|
|
<h2 id="linking-thumbnails">Linking thumbnails</h2>
|
|
|
|
<p>After creating a new post you can define a banner by entering the relative path to the image.</p>
|
|
|
|
<pre><code>banner = "banners/placeholder.png"
|
|
</code></pre>
|
|
|
|
<p>This way you can store them either next to the content file or in the <code>static</code> folder.</p>
|
|
|
|
<p><em>Tip</em> - For best results in the slider, use <strong>1018x460</strong> resolution for the banner images</p>
|
|
|
|
<h2 id="nearly-finished">Nearly finished</h2>
|
|
|
|
<p>In order to see your site in action, run Hugo’s built-in local server.</p>
|
|
|
|
<pre><code>$ hugo server
|
|
</code></pre>
|
|
|
|
<p>Now enter <a href="http://localhost:1313"><code>localhost:1313</code></a> in the address bar of your browser.</p>
|
|
|
|
<h2 id="contributing">Contributing</h2>
|
|
|
|
<p>Have you found a bug or got an idea for a new feature? Feel free to use the <a href="//github.com/balaramadurai/hugo-travelify-theme/issues">issue tracker</a> to let me know. Or make directly a <a href="//github.com/digitalcraftsman/hugo-travelify-theme/pulls">pull request</a>.</p>
|
|
|
|
<h2 id="license">License</h2>
|
|
|
|
<p>This theme is released under the MIT license. For more information read the <a href="https://github.com/balaramadurai/hugo-travelify-theme/blob/master/LICENSE.md">license</a>.</p>
|
|
|
|
<h2 id="acknowledgements">Acknowledgements</h2>
|
|
|
|
<p>Thanks to</p>
|
|
|
|
<ul>
|
|
<li><a href="//colorlib.com/travelify/">Aigars Silkalns</a> for creating this theme</li>
|
|
<li><a href="//github.com/spf13">Steve Francia</a> for creating Hugo and the awesome community around the project</li>
|
|
<li><a href="https://github.com/digitalcraftsman">digitalcraftsman</a> for creating the source code for Icarus theme</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="footer">
|
|
|
|
|
|
|
|
<div class="tags">
|
|
<i class="fa fa-tags"></i>
|
|
<div class="links">
|
|
|
|
<a href="/tags/ipsum">ipsum</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</article>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="disqus_thread"></div>
|
|
<script type="application/javascript">
|
|
var disqus_config = function () {
|
|
|
|
|
|
|
|
};
|
|
(function() {
|
|
if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
|
|
document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
|
|
return;
|
|
}
|
|
var d = document, s = d.createElement('script'); s.async = true;
|
|
s.src = '//' + "bilberry-hugo-theme" + '.disqus.com/embed.js';
|
|
s.setAttribute('data-timestamp', +new Date());
|
|
(d.head || d.body).appendChild(s);
|
|
})();
|
|
</script>
|
|
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
|
|
<a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<footer>
|
|
<div class="container">
|
|
|
|
|
|
<div class="recent-posts">
|
|
<strong>Latest posts</strong>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/article/google-550-5-7-1-sloution/">寄信給google被退信 錯誤 550-5.7.1的解法</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/article/netdata-linux-system-performance-monitor-dashboard/">Netdata Linux System Performance Monitor Dashboard</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/article/linux-performance-monitor-dashboard-netdata-md/">Linux 底下極其詳細的System performace Monitor Dashboard - Netdata</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/article/syntax-test/">Syntax Test</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/article/psql-create-role-and-assign-priviledges/">psql create role and assign priviledges</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/article/study-url/">Study URL</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/article/rsync-time-backup/">[筆記] Linux 底下好用的備份工具 rsync-time-backup</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="categories">
|
|
<a href="/categories/"><strong>Categories</strong></a>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/categories/%E6%9C%AA%E5%88%86%E9%A1%9E">未分類 (86)</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/categories/%E5%B7%A5%E4%BD%9C%E7%AD%86%E8%A8%98">工作筆記 (68)</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/categories/%E5%85%B6%E4%BB%96">其他 (46)</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/categories/%E7%AD%86%E8%A8%98">筆記 (30)</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/categories/%E5%89%AA%E5%A0%B1">剪報 (18)</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/categories/starting">Starting (5)</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/categories/blog">Blog (4)</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div class="right">
|
|
|
|
<div class="external-profiles">
|
|
<strong>Social media</strong>
|
|
|
|
|
|
|
|
<a href="https://twitter.com/TheRealLednerb" target="_blank"><i class="fa fa-twitter-adblock-proof"></i></a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://github.com/Lednerb" target="_blank"><i class="fa fa-github"></i></a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="languages">
|
|
<strong>Other languages</strong>
|
|
|
|
|
|
<a href="/en" class="active">en</a>
|
|
|
|
|
|
|
|
<a href="/de">de</a>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<div class="credits">
|
|
<div class="container">
|
|
<div class="copyright">
|
|
<a href="https://github.com/Lednerb" target="_blank">
|
|
©
|
|
|
|
2017
|
|
|
|
by Lednerb
|
|
</a>
|
|
|
|
</div>
|
|
<div class="author">
|
|
<a href="https://github.com/Lednerb/bilberry-hugo-theme" target="_blank">Bilberry Hugo Theme</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="https://h.cowbay.org/js/externalDependencies.39c47e10e241eae2947b3fe21809c572.js" integrity="md5-OcR+EOJB6uKUez/iGAnFcg=="></script>
|
|
|
|
|
|
|
|
<script type="text/javascript" src="https://h.cowbay.org/js/theme.ff50ae6dc1bfc220b23bf69dbb41b54e.js" integrity="md5-/1CubcG/wiCyO/adu0G1Tg=="></script>
|
|
|
|
<script>
|
|
$(".moment").each(function() {
|
|
$(this).text(
|
|
moment( $(this).text() )
|
|
.locale( "en" )
|
|
.format('LL')
|
|
);
|
|
});
|
|
|
|
$(".footnote-return sup").html("");
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
var client = algoliasearch("Y2C4RWMPXW", "50ea7f8c41c0ad233926e0be2b769ed1");
|
|
var index = client.initIndex("default-content");
|
|
|
|
$('#search').autocomplete({ hint: false, autoselect: true, debug: false },
|
|
[
|
|
{
|
|
|
|
source: $.fn.autocomplete.sources.hits(index, { hitsPerPage: 5, filters: 'language: en' }),
|
|
|
|
displayKey: function(suggestion) {
|
|
return suggestion.title || suggestion.author
|
|
},
|
|
templates: {
|
|
suggestion: function(suggestion) {
|
|
return "<span class='entry " + suggestion.type + "'>"
|
|
+ "<span class='title'>" + suggestion.title + "</span>"
|
|
+ "<span class='fa fa-fw " + suggestion.iconClass + "'></span>"
|
|
+ "</span>"
|
|
;
|
|
},
|
|
empty: function() {
|
|
return "<span class='empty'>Nothing found.</span>"
|
|
},
|
|
footer: function() {
|
|
return '<div class="branding">Powered by <img src="https:\/\/h.cowbay.org\/dist\/algolia-logo-light.svg" /></div>'
|
|
}
|
|
|
|
},
|
|
}
|
|
])
|
|
.on('autocomplete:selected', function(event, suggestion, dataset) {
|
|
window.location = (suggestion.url);
|
|
})
|
|
.keypress(function (event, suggestion) {
|
|
if (event.which == 13) {
|
|
window.location = (suggestion.url);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|