I'm sort of updating my Octopress website, and decided to start from a clean install and add my customizations. I'm noticing a buggy behavior that was not there before in how Octopress parses html tags in particular situations.
An example. In the head section, I have the following commented out line:
<!--<link href="{{ root_url }}/favicon.png" rel="icon"> -->
This should be a perfectly valid commented out line, and works perfectly except when there's another html tag within the comment (i.e. <link ...>). In the above case, Octopress replaces the -- at the end of the comment with –, the HTML code for en-dash, with the result that the comment never actually ends when it should.
I found a workaround for this case by using <--> for closing the comment tag.
This is also happening in another instance, and I need help with this one. A few of my blog titles have an <em> in them, so that when Octopress creates an html for it, the result should be, for example:
My Title With <em>Emphasized</em> Text
However, once again, since there's a nested tag here, the actual result is the following:
<a href="/blog/link/to/post" title="My Title With <em>Emphasized</em> Text”>My Title With <em>Emphasized</em> Text</a>
i.e., the closing " at the end of the title is replaced with ”, the HTML code for ", with disastrous results.
I can't find a solution or a workaround for this... help!
I found a bug report here, but there doesn't seem to be any activity about this.
https://github.com/imathis/octopress/issues/1662
Once again, I should emphasize that this is a bug in a more recent build of Octopress (or its dependencies), and was not present in an earlier version that I have been using.
Help! :)
OK, found a solution!
Find the html layout file for your post type, usually here: /source/_layouts/post.html, and find this section:
<p class="meta">
{% if page.previous.url %}
<a class="basic-alignment left" href="{{page.previous.url}}" title="Previous Post: {{page.previous.title}}">« {{page.previous.title}}</a>
{% endif %}
{% if page.next.url %}
<a class="basic-alignment right" href="{{page.next.url}}" title="Next Post: {{page.next.title}}">{{page.next.title}} »</a>
{% endif %}
</p>
Add | strip_html after the two instances of title, as follows:
title="Previous Post: {{page.previous.title | strip_html}}
and
title="Next Post: {{page.next.title | strip_html}}"
And that's it! Now there's no html inside the title quote, and no issues!
Related
In an html file for my first (very basic) blog site, I am able to successfully show the blog title, blog poster's name, the date it was published and also a short summary of the actual blog text with the following HTML:
<h2><a class="card-title" href=" {{ url_for('blog_posts.blog_post', blog_post_id=post.blog_id) }}">{{ post.title }}</a></h2>
Written By: {{ post.author.username }}
<p>Published on: {{ post.date.strftime('%Y-%m-%d') }}</p>
<p class="card-text">{{ post.text[:150] }}...</p>
Read Blog Post
However, I'd like to display a picture of the author's (users) profile picture next after the author's username, which is shown above on the second line.
What I've attempted to do is add this snippet of code:
<p> {{post.author.profile_image}} </p>
as this is the actual profile image from the posting author as I've already defined. Though I realize this is a paragraph and not actually an image. How do I convert the line of code above into something that actually renders their profile image? Many thanks!
I think this will work
instead of
<p> {{post.author.profile_image}} </p>
use
<img src={{post.author.profile_image}} />
I'm making a jekyll blog, and this is the link.
https://jinmc.github.io/programmingTips/
You can also look at the code from here : https://github.com/jinmc/programmingTips
Right now I just finished making the sidebars,
and I know how it works, and implemented on just one keyword csharp.
Rest of it doesn't work.
I implemented this by making a csharp.html file and implementing this code on it.
---
layout: default
sidebar: sidebar_nav
---
<h1>C Sharp</h1>
<ul>
{% for posts in site.categories.csharp %}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ posts.date | date: date_format }}</span>
<h3>
<a class="post-link" href="{{ posts.url | relative_url }}">{{posts.title}}</a>
</h3>
<p>{{posts.meta}}</p>
</li>
{% endfor %}
</ul>
something like this.
I can make every html regarding the sidebar navigations but I'm starting to wonder
if this is good practice as the content inside it would be almost similar. Plus, I'll have to make every other html files every time I make a new category. But still, can't think of anything that could automate this.
Thanks in advance!
I would recommend writing a JavaScript method that listens for clicks on the navbar elements and selectively hiding or showing the relevant post links.
Modify _layouts/home.html so that it renders a ul containing all post links and a ul for each category that contains all the post links for that category. Add ids to these ul element that identify the category or 'all'. Use jQuery to hide all the category specific ul elements on page load. Use another script in the _layouts/default.html defining a global var initialized to 'all', a click listener that listens for which the different category clicks in the navbar and hides the previously shown ul and shows the desired ul by applying css styles. You can also change text on the page to show what the current category is.
I know how to use to define the end of the excerpt, but I'd like to omit the first paragraph of the post as well.
How can this be done?
Thanks in advance all!
Just got into the same issue. I have a separate place for excerpt and below I want post without excerpt (because it was already displayed). What worked for me was:
<header>
{{ page.excerpt }}
</header>
<article>
{{ content | remove_first:page.excerpt }}
</article>
It has to be defined in the same layout you use for posts and posts only.
If I understand right you just want the first paragraph.
post.excerpt gets the first paragraph of your post. An alternative would be to create a variable in your markdown files and call it whenever you want.
e.g.
---
layout: post
title: Your title
post_description: A plugin to extend Swiper for easier JW Player integration.
---
and call {{ post.post_description }} in your lists.
I want to introduce hash links to the headings of a page into the menu of a web page. The web page is generated with Jekyll and it's default layout looks as follows:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div id="BigFatContainer">
{{ content }}
{% include footer.html %}
</div>
</body>
</html>
It is in the header that the menu for navigating to the different pages is located. I've been able to add a table of contents to the {{ content }} with the help of the following Kramdown command:
* Point at which the TOC is attached
{:toc}
One could use some ugly JavaScript hack to move this table of contents from the {{ content }} and into header.html but that'd be a bad solution. It's not possible to place the {:toc} macro inside header.html since that's not parsed by Kramdown, and even if you make sure that it's parsed by Kramdown using for example this plugin it outputs the TOC of header.md instead of the TOC for the content.
#miroslav-nedyalkov was on the right track here. Following his suggestion of looking at the Bootstrap documentation, I found that it uses a Ruby Gem - jekyll-toc that allows you to place a TOC anywhere in a layout file. You enable it in the front matter. I'm now successfully using:
<nav aria-label="Table of Contents">
{{ content | toc_only }}
</nav>
<section itemprop="articleBody">
{{ content }}
</section>
I would suggest you to use the approach Bootstrap website (scroll down and observe the right navigation area) is using - make your TOC as part of the content area, but style it to be placed on the side like main navigation. The main reason I'm suggesting you this approach is that you may (and most probably will) have more than one page. In this case you will need to display different page navigation for every page and display some navigation between the pages.
For more information you may refer to this article - http://idratherbewriting.com/2015/01/20/implementing-scrollspy-with-jekyll-to-auto-build-a-table-of-contents/
Why moving the toc block ?
This is correct to say that this toc is part of the page content. Semantically speaking.
You problem here is not at the document structure level but at the presentational one.
In this case the use of CSS is recommended to solve your problem.
I've seen some posts saying you can only pass literal strings to Jekyll's front matter include statement like so:
{% include mypage.ext %}
However, I have the following HTML layout for pretty much every page:
<section id="feature">
<div class="container_12">
<div class="grid_12 alpha omega">
{% include myfile.ext %}
</div>
</div>
</section>
<section id="main">
<div class="container_12">
<div class="grid_12 alpha omega">
{{ content }}
</div>
</div>
</section>
This would be painful to have to include in every single page in order to achieve the layout I'm looking for. The included file would be relevant to the current page, so I was hoping someone knew of some kind of way to do this. Of course it'd be something along the lines of:
{% include {{page.file}} %}
I've seen some other posts saying this just can't happen though.
So, I just want to be able to dynamically load includes in Jekyll.
Edit: https://github.com/mojombo/jekyll/issues/176
This will be perhaps possible when that issue will be fixed with the pull request #1495 which propose exactly what you are looking for : {% include {{page.file}} %}
This is currently intentionally not possible, as the maintainers of Jekyll don't want the project to get too dynamic. You can read this comment & thread for a bit of background. The suggestion that qrush (the maintainer) gives is to use rails or sinatra. Probably not the answer you're looking for, but that's the current status.
If you want to use a plugin, there's one that will let you do this here