search

getnikola / nikola-themes

Themes for Nikola
https://themes.getnikola.com/
71 stars 51 forks source link

[canterville] Banner and Twitter/Github buttons don't display #134

Closed GrantRVD closed 6 years ago

GrantRVD commented 6 years ago

I tried using the canterville theme to create a new Nikola site tonight, and while there are no errors reported on when I run nikola build and the theme install seems to have gone fine, the banner image, github icon, and twitter icon are not present on the rendered page - I checked the source and didn't see them placed anywhere in the HTML. I then made a new directory to run nikola init --demo demo/ to see if the canterville theme would work correctly, and it did not - the banner and icons are also missing from the demo site render.

There doesn't appear to be any specific documentation on the canterville theme or how to debug it, so I'm not sure why the assets aren't being properly compiled into the output. I'm using nikola v7.8.10.

GrantRVD commented 6 years ago

I've now noticed that I seem to have issues with other themes as well. The reveal theme displays almost correctly, but there are no transitions or even scrolling. It seems like something is wrong with my nikola defaults, because these issues also occur with the demo site, where the only changes I've made to conf.py are to add entries to GLOBAL_CONTEXT required by the themes.

Kwpolska commented 6 years ago

This sounds like an issue with assets.

  1. How did you install Nikola?
  2. What OS are you on?
  3. How does the bootstrap3 theme look?
  4. Does your browser have JavaScript enabled?
  5. How are you testing the site?
GrantRVD commented 6 years ago

  1. I did pip install nikola in a conda environment. I have also tried installing nikola without a conda env, but the problem still persists. I used nikola theme -i canterville and nikola theme -i reveal for the themes.

  2. Ubuntu 16.04 LTS

  3. The bootstrap3 theme on the demo site build looks almost identical to the one hosted on the theme webpage, except for one thing: the line break between "Welcome to Nikola" and the author line is a little smaller, and the author name, "Robert Alsina" is not hyperlinked in my build, whereas it is on the web-hosted version. This remains true even when I click the sample post title to go to its specific page.

  4. Yes, and I'm using Chrome 61.0.3163.79 official build.

  5. nikola serve --browser, which opens a tab in the aforementioned Chrome browser at 127.0.0.1:8000.

GrantRVD commented 6 years ago

To allow for easier reproducibility, these are the only lines I added/changed in the conf.py for the demo site, generated by nikola init --demo -q:

THEME = 'canterville'
LOGO_URL = 'https://getnikola.com/assets/img/logo.svg'
GLOBAL_CONTEXT = {
        'TWITTER_URL': 'https://twitter.com/getnikola',
        'GITHUB_URL': 'https://github.com/getnikola',
        'BANNER_URL': '/assets/img/silk-road.jpg'
}

The site should look like this but this is a screenshot of what I get. screenshot from 2017-09-16 14-52-55

A copy of the HTML source for the above image, from index.html:

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article# " vocab="http://ogp.me/ns" lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="This is a demo site for Nikola.">
<meta name="viewport" content="width=device-width">
<title>Demo Site</title>
<link href="assets/css/rst.css" rel="stylesheet" type="text/css">
<link href="assets/css/code.css" rel="stylesheet" type="text/css">
<link href="assets/css/theme.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="assets/css/screen.css">
<link rel="stylesheet" type="text/css" href="assets/css/nav.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic%7COpen+Sans:700,400%7CInconsolata">
<meta name="theme-color" content="#5670d4">
<meta name="generator" content="Nikola (getnikola.com)">
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
<link rel="canonical" href="https://example.com/index.html">
<!--[if lt IE 9]><script src="assets/js/html5.js"></script><![endif]--><link rel="prefetch" href="posts/welcome-to-nikola.html" type="text/html">
</head>
<body class="nav-closed">

<div class="nav">
    <h3 class="nav-title">Menu</h3>
    <a href="#" class="nav-close">
        <span class="hidden">Close</span>
    </a>
    <ul>
<li class="nav-opened" role="presentation">
            <a href="archive.html">Archives</a>
        </li>
        <li class="nav-opened" role="presentation">
            <a href="categories/index.html">Tags</a>
        </li>
        <li class="nav-opened" role="presentation">
            <a href="rss.xml">RSS feed</a>
        </li>

    </ul>
</div>
<span class="nav-cover"></span>

<div class="site-wrapper">
    <header class="main-header post-head no-cover"><nav class="main-nav overlay clearfix"><a class="blog-logo" href="https://example.com/"><img src="https://getnikola.com/assets/img/logo.svg" alt="Blog Logo"></a>
            <a class="menu-button" href="#"><span class="burger">☰</span><span class="word">Menu</span></a>
        </nav><div class="vertical">
            <div class="main-header-content inner">
                <h1 class="page-title">Demo Site</h1>
                <h2 class="page-description">This is a demo site for Nikola.</h2>
            </div>
        </div>
        <a class="scroll-down icon-arrow-left" href="#content"><span class="hidden">Scroll Down</span></a>
    </header><main id="content" class="content" role="main"><div class="postindex">

<article class="post post"><header class="post-header"><h2 class="post-title"><a href="posts/welcome-to-nikola.html">Welcome to Nikola</a></h2>
    </header><section class="post-excerpt"><div>
<div class="figure">
<a class="reference external image-reference" href="https://farm1.staticflickr.com/138/352972944_4f9d568680_z.jpg?zz=1"><img alt="Nikola Tesla Corner by nicwest, on Flickr" class="thumbnail" src="https://farm1.staticflickr.com/138/352972944_4f9d568680.jpg"></a>
</div>
<p>If you can see this in a web browser, it means you managed to install Nikola,
and build a site using it. Congratulations!</p>
<p>Next steps:</p>
<ul class="simple">
<li><a class="reference external" href="pages/handbook.html">Read the manual</a></li>
<li><a class="reference external" href="https://getnikola.com">Visit the Nikola website to learn more</a></li>
<li><a class="reference external" href="galleries/demo/index.html">See a demo photo gallery</a></li>
<li><a class="reference external" href="pages/listings-demo.html">See a demo listing</a></li>
<li><a class="reference external" href="pages/slides-demo.html">See a demo slideshow</a></li>
<li><a class="reference external" href="pages/dr-nikolas-vendetta.html">See a demo of a longer text</a></li>
</ul>
<p>Send feedback to <a class="reference external" href="mailto:info@getnikola.com">info@getnikola.com</a>!</p>
</div>
    </section><footer class="post-meta">
                Roberto Alsina

        on
                <a href="categories/blog.html">#blog</a>,
                <a href="categories/demo.html">#demo</a>,
                <a href="categories/nikola.html">#nikola</a>,
                <a href="categories/python.html">#python</a>,

        <time class="post-date" datetime="2012-03-30T23:00:00-03:00">
            2012-03-30 23:00
        </time></footer></article>
</div>

       <script>var disqus_shortname="nikolademo";(function(){var a=document.createElement("script");a.async=true;a.src="https://"+disqus_shortname+".disqus.com/count.js";(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(a)}());</script></main><footer class="site-footer clearfix"><section class="poweredby">Contents © 2017         <a href="mailto:joe@demo.site">Your Name</a> - Powered by         <a href="https://getnikola.com" rel="nofollow">Nikola</a>         </section></footer>
</div>

    <script type="text/javascript" src="assets/js/jquery.js"></script><script type="text/javascript" src="assets/js/jquery.fitvids.js"></script><script type="text/javascript" src="assets/js/index.js"></script>
</body>
</html>
Kwpolska commented 6 years ago

The changes you see in bootstrap3 are caused by (a) having two post authors on the web version and (b) some CSS changes in Nikola v8 (from which the demo site is built).

It looks like your global context is ignored. Where did you put it? Note that we create an empty GLOBAL_CONTEXT at the end of the default conf.py file, so it would override anything you inserted above it.

GrantRVD commented 6 years ago

Now I feel silly. I should have noticed conf.py had another assignment for GLOBAL_CONTEXT, since I already noticed the assets weren't included in the output HTML. I copied from the theme's sample conf file into the same place where the theme is defined. Everything works fine now. Thanks a lot for debugging such a simple issue!

bl4ckj4ck777 commented 2 years ago

Had the exact same issue 4 years later. Was not obvious that the GLOBAL_CONTEXT was being overwritten until I read this post, glad it was here, I've been fighting this for hours!