I wonder can I use jekyll to read the content of a markdown line by line and generate a timeline page?
Basically, I want to achieve something like this. I assume I need to make a HTML file like timeline.html, and then in the markdown title has a thing like layout: timeline.
I already find some codes to create this timeline view. Like below
<div id="archives" class="pl-xl-3">
<div class="year lead">2022</div>
<ul class="list-unstyled">
<li>
<span class="date day">25</span>
<span class="date month small text-muted ml-1">Dec</span>
<a> My first news</a>
</li>
</ul>
</div>
But what I want is a way to automatically replace the '25', 'Dec', and 'My first news' with the content in my markdown file.
Any hint about how to access the markdown content in this HTML file is appreciated!
Related
I try to create my portfolio with using GitHub Pages https://rageanalyst.github.io/Portfolio/. I use a template and alter him. I don't know HTML. I have a problem with caption when I open a frame with project. Two pictures don't underneath, they have (untitled). Only the last picture have caption and is the project tittle.
Problem: example
Q: How can I add caption to individual pictures in this frame?
This is extract of code when I have a single project:
<article class="col-6 col-12-xsmall work-item">
<a href="images/thumbs/trainings.JPG" class="image fit thumb"><img src="images/fulls/gym.jpg" alt="" />
</a>
<h3>Gym Tracker</h3>
<p>This project contains tables that allow me to track my progress in the gym. </p><br>
<ul class="actions">
<li>Full Project</li>
</ul>
</article>
Edit:
I still haven't solved the problem, anyone else can help me?
I want to remove a Nokogiri node but I don't get it.
I got HTML code like this:
<div class="metis manual-toogle" id="tocList">...
<li id="tocElement-ebook_cs_1111111_11">...
<a data-content href="url" class=" "></a> <!-- only this urls I want -->
<ul class="foo">
<!-- the following content and urls I want to remove -->
<li class id="tocElement-ebook_cs_1111111_cs12">
<a data-content href="url" class=" "></a>
...
<a data-content href="url" class=" "></a>
</li>
</ul>
</li>
</div>
What I've tried so far:
document = Nokogiri::HTML.parse(html_input)
document.xpath('//ul[#class="foo"]').each {|x| x.remove}
document.xpath('//ul[#class="foo"]').children.map(:&remove)
What I'm doing wrong?
Edit:
I wan't to parse some URL's. I got the html structure like above. The URL I want is in the <li></li> block nested like <a data-content href="url"></a>. The problem is, inside the <ul></ul> is a <a data-content href="url"></a> too. I can extract every URL, but only need the main URL's.
It's a book with some chapters, I can download the chapter with the first link. Every sub-chapter (inside the <ul>) got a own pdf.
I can't use regular expression because the links are not build the same. For example in one book it's
chapter 1 pdf: ...-ch1.pdf (contains all sub-chapter)
chapter 1-1 pdf: ...-ch1-1.pdf
chapter 2 pdf: ...-923df2.pdf
chapter 3 pdf: ...-ch3.pdf
The HTML-Code is a mess. The easiest way is to remove the <ul> block itself.
You are not providing much context or detail here. But, the following code should remove the item you want if you are selecting it correctly. Please provide more details such as your output received, output expected, etc.
Given the limited information, you could try this bit:
UPDATE:
html.html
<div class="metis manual-toogle" id="tocList">...
<li id="tocElement-ebook_cs_1111111_11">...
<a data-content href="url" class=" "></a> <!-- only this urls I want -->
<ul class="foo">
<!-- the following content and urls I want to remove -->
<li class id="tocElement-ebook_cs_1111111_cs12">
<a data-content href="url" class=" "></a>
...
<a data-content href="url" class=" "></a>
</li>
</ul>
</li>
</div>
main.rb
require 'nokogiri'
require 'open-uri'
require 'pry'
doc = Nokogiri::HTML(open('html.html'))
doc.xpath('//ul[#class="foo"]').remove
doc.xpath('//a').each do |item|
puts item
end
Output:
~/code/projects/test ⌚ 8:28:32
$ ruby main.rb ‹2.6.1›
<a data-content href="urliwant" class=" "></a>
We worked this out through chat. Above example works. But, for his specific case we needed to do this because of the messy html:
document = Nokogiri::HTML(open('html.html'))
document.css('//ul//ul//ul').remove
document.css('ul .collapse').remove
links = document.xpath('//*[#id="toc"]//ul')
File.open("input.html", "a") do |output_txt|
links.each do |item|
output_txt.write(item)
end
end
I'm creating a theme using Bootstrap with jekyll and I'm running into a problem when creating content in markdown.
Ideally I'd like to structure my posts with Bootstrap grids like so:
<div class="row">
<div class="col col-md-6" markdown="1">
# Hello World
</div>
</div>
However, the markdown isn't being processed here. It doesn't seem to work in nested HTML blocks.
Single level blocks will work:
<div markdown="1">
# Hello World
</div>
I'm using Kramdown and I can't see any examples similar to this in the docs.
I'm guessing maybe I need to create a plugin to do this?
Kramdown's documentation simply states regarding stx style headers
No spaces are allowed before the hash characters.
Therefore, you need to delete the indentation of your Markdown content within the div tag:
<div class="row">
<div class="col col-md-6" markdown="1">
# Hello World
</div>
</div>
I wrote a small plugin to add liquid tags for the grid system here
(Heavily based on this tutorial)
This doesn't really answer the question, but it does get the job done.
Following is html code. The final div is a hyperlink that calls javascript. This is the bottom of a longer page, but everything works until the final hyperlink, which appears on the page but not as a clickable link.
<div style="padding-left:15%;">
<span class="blank">Action Hyperlink</span>
</div><br>
<div class="sp_01 bordered">
<ul class="sp_03 bordered">
<li class="sp_03 bordered" style="text-align:justify;">Text 1</li><br>
<li class="sp_03 bordered" style="text-align:justify;">Text 2</li><br>
<li class="sponsor_03 bordered" style="text-align:justify;">Text 3</li>
</ul>
</div><br><br>
<div style="padding-left:15%;">
<span class="blank">Action Hyperlink</span>
</div><br>
The first instance of the hyperlink works. After the -div class="sp_01 bordered"- section, the final instance of the hyperlink appears as a line but not a click link.
This sort of problem is usually related to how the preceding tags are open and closed. I’ve studied the open and close tags and I don’t see anything wrong. The color coding in my editor (Atom) is correct for all tags.
What’s wrong?
Just wrap your DIV inside a like
<a href="#" onclick="ShowPages(18);" class="tfl" style="text-decoration: none; color:rgb(255,255,255)"><span class="blank">Action Hyperlink</span>
<div style="padding-left:15%;">
</div>
</a>
<br>
Edit
For future references this answer don't include sufficient information . So that I was trying to delete this. But after answer beign accepted it cant be deleted.
I wrote some custom HTML code in my Wikidot article - instead of the "original" Wikidot syntax, I have to use <a href="/page"> for links.
The content of my custom HTML block is like this:
<section class="intro">
<div class="container">
<h1>Headline-line text</h1>
</div>
</section>
<section class="timeline">
<ul>
<li>
<div>
<time>Time value </time> Text. Link here.
</div>
</li>
</ul>
</section>
The problem is that it loads the entire content of the HTML into that carefully selected small portion of the original site.
I can only assume that it has something to do with <div>s, as I've already seen this issue on other sites. Hence my assumption is that there must be a general source of this issue, and this is why I'm asking.
What's the reason of this problem and how can I avoid it?