Can Hugo play to a wider audience?

support
9

@davidj3

Here are some shooting-from-the-hip responses to your comments:

  1. Hugo shouldn’t preclude you from setting up any template you’d like. You can use go templates to create div.row, .div.columns, sections, list items, etc. I think what you’re talking about here is layout, which is different than your template and a matter of CSS, which is not handled by Hugo. The templating layer, once you get the hang of the Golang templates, is considerably more robust (and a whole lot faster) than what you’ll find in Jekyll, Hexo, etc. That said, it is a little less easy to grok at times.
  2. You can do this already. Look into first and sort in the docs. As far as defining variables in each article, you have more or less free reign with Hugo’s ability to parse yaml, toml, and json front matter in content files. Your metadata capabilities are only bound by the limits of your imagination:smiley:
  3. So this seems to be asking for three different things: commenting, share functionality (ie, auto-completing email fields), and a forms solution equivalent to “contact me.” If you’re talking about commenting, Disqus isn’t a bad solution. If you’re worried about management, you can set a global config param and then set a param at the content-page level as well. Add this to your template for article pages and you should be golden. As for the contact form, check out formspree.io, which will send information directly to your email account. I guess you could even set up a formspree html form in each content page that pulled in the title of the piece as a hidden value (hidden as in just hide it in css but have it sent over the wire to formspree).

To be less abstract, you here is an example of a share menu that includes an email share link as the last list item:

{{$siteName := "davidj3.com" }}
<div class="social-media-share-menu">
    <ul class="share-menu">
      <li><a class="facebook share" href="https://www.facebook.com/sharer/sharer.php?u={{.Permalink}}"><i class="icon-facebook"></i></a></li>
        <li><a href="https://twitter.com/home?status={{.Permalink}}" class="twitter share"><i class="icon-twitter"></i></a></li>
        <li><a href="https://www.linkedin.com/shareArticle?mini=true&url={{.Permalink}}&title={{.Title}}&summary={{.Description}}" class="linkedin share"><i class="icon-linkedin"></i></a></li>
        <li><a href="https://plus.google.com/share?url={{.Permalink}}" class="googleplus share"><i class="icon-googleplus"></i></a></li>
        <li><a href="mailto:?subject=Read %22{{.Title}}%22 on {{$siteName}}&body=Check out %22{{.Title}}%22 on {{$siteName}}%0D%0DDescription:%0D%0D%22{{ .Description }}%22%0D%0D{{.Permalink}}" class="email share"><i class="icon-email"></i></a></li>
    </ul>
    <a id="share-button" href="#"><i class="icon-share"></i></a>
</div>

If you’re looking to use Disqus per the example I mentioned above, you can set the following in your config.toml (this is all assuming you don’t want to use the built-in shortcode):

[params]
  UseDisqus = true

Then in your content file front matter:

title: My Academic-Type Character Blog Post
include_comments: true

Then you could use a similar partial to the following once you sign up for Disqus:

{{ if and .Site.Params.UseDisqus .Params.include_comments}}
	<div id="disqus_thread"></div>
	<script async>
	var disqus_config = function () {
	this.page.url = {{.Permalink}}; // Replace PAGE_URL with your page's canonical URL variable
	// this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
	};
	(function() { // DON'T EDIT BELOW THIS LINE
	var d = document, s = d.createElement('script');
	s.src = '//yourdisqusid.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" rel="nofollow">comments powered by Disqus.</a></noscript>
{{ end }}

As for this, I’m not sure what you mean. If you’re looking for full client-side rendering a la a JavaScript MVC, you may have a point that Hugo is not the right tool for what you’re trying to do. I guess you could create markdown files and have Hugo spit them into .json that is then digested by your Ember/Angular/React application, but there are other tools out there better built for that purpose, and I personally think that defeats the whole purpose of an SSG, no?