So I recently switched to a new distro and moved my page over which uses Hugo. Before on my main page Hugo would render the main page in a list showing the title + date:
Title1 / Date
Title2 / Date
Now it renders as:
Title1 / description
Title2 / description
I've never had to edit the index.html or .xml before Hugo would do all that once I told it to build the page, but below is example of what the source looks like now. So instead of post-stub-title / post-stub-description. I want it to be back to post-stub-title / post-date. If that makes sense. I would rather not edit this by hand every single time.
I also don't remember the previous version of Hugo I was using sadly but now I'm using 4.2.
</li>
<li class="post-stub">
<a href="https://foobar.com/2018/04/16/foo1/">
<h4 class="post-stub-title">Foo1 + Blah</h4>
<p class="post-stub-description">Attempted hugo page</p>
</a>
If any of those Hugo gurus out there knows a way to fix that I would be much obliged.
So I spun up a Debian box which uses 0.18.1 and that fixed the issue. Which I don’t really understand but it works now.
Related
I've built a site with Hugo and using featherlight.js for pop-up lightbox. All working fine when hosted locally. But on the live version I'm having a weird issue where the links inside the pop-up are not working.
A full reproducible example is difficult, but I'll provide the relevant code and perhaps someone can identify what's likely causing the problem or tell me what other info they need.
Relevant code calling featherlight:
<a class="search-icon" href="#" data-featherlight="{{ .link | safeURL }}" > <i class="ti-search"></i> </a>
Where .link is html file compiled from markdown.
If I navigate directly to .link the content shows up fine, and the links in the content are fine, e.g.,:
<p>See more here </p>
But inside the pop-up lightbox, links in the content appear like this:
<p>See more here</p>
i.e., 'here' is outside the </a> tag.
This particular link uses Hugo code:
<p> {{.Params.Link_text}} <a href="{{ .Params.Link | absURL }}" > here </a> </p>
But the same thing occurs for the links written with Markdown.
A featherlight.js bug or something else?
It works after replacing this "https://code.jquery.com/jquery-latest.js" with "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js".
Currently, i'm buiding my rich text editor with quill and i need to create an embed for images. Before quill, i used to use redactor and i try to move to redactor. But, i already have 2 version of data from redactor before where the users is already uploaded images.
Version 1:
<p>
<img src="http://lorempixel.com/400/200/" data-image="5bb71bdc65465e0675ba" class="img-fluid img-responsive">
</p>
Version 2:
<figure>
<img src="http://lorempixel.com/400/200/" data-image="1bdc65465e0675ba1b2b" class="img-fluid img-responsive">
</figure>
Expected behavior:
I expect to replace the p with figure on initial parsing in quill. So, all the images have same parent figure
Actual behavior
figure is always deleted by default
I tried to register figure with blots/block/embed but i can't check and add the figure if the image doesn't have figure on its parent
Thank you
I've been learning ReactJS for the past couple of days and have been trying to build a website using semantic-ui-react in ReactJS. I understand there are components that one can use now but I am stuck on what to do in a scenario such as the creation of a footer... typically, in my raw HTML, I would have the semantic.min.css file included and at the bottom:
<div class="ui inverted pink vertical footer segment">
<div class="ui center aligned container">
<h4 class="ui inverted header">© Copyright 2017 | All rights reserved | Blahhh</h4>
<i class="facebook square icon big"></i>
<i class="twitter square icon big"></i>
<i class="linkedin square icon big"></i>
</div>
</div>
Now I want to translate this into semantic-ui-react. Footer is a class not a component in react by default so there's no component for it... Which I assume means I have to make my own component and basically write the code above. My problem now is that I don't know how to make it render as if I was using regular old semantic.min.css. I read somewhere to download the css file and include it, but one, I don't know where to (MyCustomFooterComponent or index.html), and in doing that, am I not increasing by load times on my website. Would this mean that everywhere there's a footer, just for one small section of custom code, the entire CSS file is going to be loaded?
Also, after building, would there be a double-import scenario from my addition of the Semantic CSS and semantic-ui-react's CSS?
Sorry for the long question but I'm new to this and I like to find out what I can before making a terrible mistake.
If you are using react-semantic-ui then you already include 'the old semantic-ui.min.css' already. See here.
Hence, create a component and put those code in render(), change 'class' to 'className' and then use it.
I have html json data load on the view, and I want to make it like a book which has single page to be a reasonable amount of text for the screen size then the user will turn the page and see more. How do I make it happen.
controller.js
.controller('bookCtrl',function($scope,$sce){
$scope.book = bookinfo;
//convert html function
$scope.to_trusted = function(html_code) {
return $sce.trustAsHtml(html_code);
}
})
var bookinfo = [
{"content": "<body>\n<div class=\"pgmonospaced pgheader\" xml:space=\"preserve\"><br/>The Project Gutenberg EBook of A Study In Scarlet, by Arthur Conan Doyle<br/><br/>This eBook is for the use of anyone anywhere at no cost and with<br/>almost no restrictions whatsoever.\u00a0 You may copy it, give it away or<br/>re-use it under the terms of the Project Gutenberg License included<br/>with this eBook or online at www.gutenberg.org<br/><br/><br/>Title: A Study In Scarlet<br/><br/>Author: Arthur Conan Doyle<br/><br/>Release Date: July 12, 2008 [EBook #244]<br/>[Last updated: February 17, 2013]<br/><br/>Language: English<br/><br/><br/>*** START OF THIS PROJECT GUTENBERG EBOOK A STUDY IN SCARLET ***<br/><br/><br/><br/><br/>}
]
index.html
<div class="list card">
<ul>
<li ng-repeat="item in book" >
<h6 ng-bind-html="to_trusted(item.content)"></h6>
</li>
</ul>
</div>
You can divide your page content in number of pages. Iterate over that pages and show only one at a time and on click of next/previous button show next/previous page using ng-if/ng-show directives.
Also you can use angular-ui for pagination
I'm new to Foundation. I setup a site previously using Foundation 4 and didn't have a problem with the top bar. But now, with Foundation 5, I'm not getting the post-breakpoint (I guess that's how I should describe it) dropdown functionality.
http://www.imdustindavis.com/test/foundation-5-topbar/
Am I missing something?
Thanks!
Modify the code in the title-area to
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- This line needed to display a touch icon on navbar for small screens -->
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
You don't need to do anything else to make it work. The javascript in the Foundation.topbar.js file will automatically create and populate the touch menu for small screens.
Looks to me like you need
<li class="toggle-topbar menu-icon">
<a href="">
<span>Menu</span>
</a>
</li>
Which isn't mentioned in the docs.
However I found your question trying to figure out how to get that to actually do anything. No luck yet.