I'm working with jelkyll and I want to highlight the heading with a predefined liquid variable in the front matter of the specific post.
So in my post.md file I have this:
---
title: hello
color: aaa
---
Next I have a post.html file with the following code:
<h1 class="page-title">{{page.title}}</h1>
Highlighting it a standard yellow does work:
<h1 class="page-title" style="background-color:yellow">{{page.title}}</h1>
But when i change yellow with #{{post.color}} it doesn't work. I also can't seem to move the color around. I want to achieve something like here is done with the word "rams".
You can reach your color with {{ page.color }}.
Related
Can someone please tell me if this is possible and how to do it. I struggled almost all day and I really don't know what to do.
So I need to insert some text at the end of the article. A text stored in a variable lets say site.data.settings.var. So I did this
{{ content }}
{{ site.data.settings.var }}
And everything is ok until I have a post with footnotes. They appear before my text. I have no idea what to do.
I thought I could access the footnotes like this {{ post.footnotes }}, but it doesn't work.
Thank you!
try in markdown the usage of [^1] or [^My_Note]
myText[^1] ... lorem ipusm ... foo bar.
...
[^1]: My note as footnote
Then style the footnote via css.
I will update my answer when I have seen the layout post.html. I was to fast with answering. You are able to set footnotes, but footnotes will break your design.
The problem:
I’m trying to automate adding something to the end of the link text on a Drupal 8 site that uses twig with the ::after CSS function. Something like:
&::after {
content: '!!!!';
}
Although the content is being outputted on the page it is being added on the next line when the display is set to ‘display=block’. In other words the html in the Chrome console looks like:
::before
<div>
a Twig output <a href=”http://link>Link Title Text</a>
</div>
::after
And looks like:
Link Title Text
Continuation of Link Title Text
!!!!
What I’d like the output to look like is:
Link Title Text
Continuation of Link Title Text!!!!
The closest I’ve gotten to figure this out is to change the display to ‘display: inline-flex’. This might work ok if the Title Text were only on one line. HOWEVER, the title text to the links often take 2 (or more) lines so the result in that case is:
Link Title Text !!!!
Continuation of Link Title Text
Instead of the desired:
Link Title Text
Continuation of Link Title Text!!!!
To complicate things I noticed that changing from ‘display: block’ to ‘display: inline-flex’ added addition spacing above and below that will not work for the styling of the page.
I’m assuming that the ::after is being applied to the ‘href=’ and not the title of for the link. Is it possible to apply the ::after to the title text of the link instead of the ‘href=’ link to get the desired outcome?
The Twig relevant Twig code looks something like this:
<div>{% for linktitle in linktitle_arr %}<a {{ attributes.addClass(link_classes) }} target="_blank" href="{{url_}}">{{linktitle.value}}</a>{% endfor %}</div>
Any insight is much appreciated.
UPDATE - SOLUTION - UPDATE -
Just wanted to update this post with what I discovered and how I ‘solved’ this.
The problem didn’t end up being with Twig as I had originally suspected. This is a ‘clear-fix hack’ issue. If you are not familiar the code/hack looks like this:
#mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
The root of the problem is the use of ‘display: table’ which drops the attached pseudo element ‘below’ the parent element into a new column, rather than along the same row, as expected, and as described above in my original question.
If you run into this issue and you use clear-fix you’ll have to modify it for your particular use-case. In my case I solved this while raising new issues to deal with as a result which are outside the scope of this update. Whack-a-mole.
It should also be noted that in my particular case the page in question is a custom theme built on a Bootstrap 3 sub-theme. Bootstrap itself utilizes the full clear-fix code, HOWEVER, there is also a modified version of it deep inside Drupal core that was influencing the proper expected function of the :after pseudo element as well.
You can find the Drupal core clear-fix at:
/core/modules/system/css/components/clearfix.module.css
You can use the pseudo element of that a tag.
Twig:
<div>{% for linktitle in linktitle_arr %}<a {{ attributes.addClass(link_classes) }} target="_blank" href="{{url_}}">{{linktitle.value}}</a>{% endfor %}</div>
CSS:
a::after {
content: '!!!!';
}
Demo:
https://codepen.io/eliortabeka/pen/rNMPQRP
Should do the job.
Well, I'm trying to figure out how could I display highlighted syntax.
But actually I have two main issues. The principal one is that if I show the post.content using the template pipes:
For example: {{ post.content | markdownify }}
The following content is shown:
As you can see, the blocks of the main page is shown with a white background. While the posts are shown with dark background. I'm comparing the two templates to see if I'm missing something, but I don't see the thing I'm missing (I think is a CSS (missing include) problem).
Note: I already tried to include js.html from the theme. But I doesn't do so much.
Also, the other problem is that if I use more pipes to cut the content (because I don't want to see all the content), using: strip_html | truncatewords: site.post-preview-words in the {{ post.content | markdownify }} pipe. The following occurs:
Using only truncatewords the main page styles are broken.
Using also strip_html the contents are shown as plain content.
I know why this is happening. Is there any gem/plugin to truncate the content taking care of unclosed html tags? Is there any approach using the default pipes of Jekyll?
This is the theme I'm actually using: https://github.com/le4ker/personal-jekyll-theme
This is my main Github.io page: https://z3nth10n.github.io
I am trying to find in alley files using a regex search in WebStorm. I have 2 scenarios.
Scenario 1: text inside html tag
<p>testing</p>
Scenario 2: dynamic text inside {{ and }} inside html text
<p>{{testing}}<p>
I was able to find text between html tags using below regex for Scenario 1
>(.*?)</
I am trying to find only places with scenario 1 and not with scenario 2. I mean I want to see all the hard coded text between html tags and not any text between {{ and }}. Any suggestion or pointer?
Have you tried using regexr.com?
Edit
How is this:
>(\w+)</
Just started jekyll, and I want to display a link to one of my posts on the index.html page. I looked through the documentation and the following code appears to be what I'm suppose to do.
The following is in index.html
<p>......</p>
[Hello World]({% post_url 2015-01-19-soccer %})
<p>........ </p>
but it simply displays
.....
[Hello World]({% post_url 2015-01-19-soccer %})
.......
what am I doing wrong?
Since you used a mix of Markdown and HTML, which is causing the markdown processor to ignore anything in between the HTML blocks.
Markdown is also sometimes not processed when you have HTML right above the Markdown. (This is the case for you, since your example shows you have closed off the <p> tags)
There are a few ways around this.
Make sure there is a newline in between any HTML and Markdown, this will not show up as a <br> or a <p> in the final output, but rather ensures that the processor will convert the Markdown correctly.
So you should have something like this:
<p>......</p>
[Hello World]({% post_url 2015-01-19-soccer %})
<p>........ </p>
Notice the extra line there between the first <p></p> and the Markdown.
Use only HTML (this is as answered by user #topleft)
Use only Markdown, since <p> tags are supported.
Try the markdown=1 HTML attribute.
Markdown processors like Kramdown allow you to add an explicit tag to tell the processor to go through HTML blocks and process any Markdown there. I'm assuming you're using the default (which I believe is Redcarpet) and couldn't find the links on whether this is supported. But you can try this:
<div id="someDiv" markdown=1>
[This is a Markdown link that will be parsed](http://www.example.com)
</div>
You are using markdown language here, it won't work in html. You need to use that instead :
Hello World
site.baseurl default is empty
you can change it in _config.yml to suit your needs
for instance :
baseurl: "me/blog"