I created an _index.Rmd file in my blogdown /*/content/ directory and the body of the _index.Rmd file looks like this:
---
title: "Home"
date: "2016-05-05T21:48:51-07:00"
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
Welcome to the home page of this blogdown site.
I would expect to see a "Home" title heading but nothing appears. I presume this is an intentional design choice. I can understand why, but in my case I want the title that I specify in the YAML to showup on the rendered _index.html file. How do I achieve this goal?
This is because the index (main) page has special treatment with this theme. How you can change this is go to themes/(yourtheme)/layouts/index.html. It would look something like:
{{ partial "header.html" . }}
<main class="content">
<div class="list">
{{ range (.Paginate ((where .Data.Pages "Type" "post").GroupByDate "2006")).PageGroups }}
<h2 class="list-title">{{ .Key }}</h2>
{{ range .Pages }}
{{ partial "list-item.html" . }}
{{ end }}
{{ end }}
</div>
{{ partial "pagination.html" . }}
</main>
{{ partial "footer.html" . }}
Now you can edit this file to add the desired title in many ways, for example if you want the same style as a post title would have you could add between the <main class="content"> and <div class="list>:
<h1 class="article-title">Home</h1>
If you want to source the title from the .Rmd file, you would do:
<h1 class="article-title">{{ .Title }}</h1>
Now after rebuilding the site the title will appear on the homepage.
Related
I want to import an rst file to my Pelican index page like here:
Pelican: include file's contents on main page
*****
Title
*****
subtitle
########
subsubtitle
***********
Here is some content in the document.
**ReStructuredText** (rst): plain text markup
.. image:: images/22204100065.png
:alt: exhale
:width: 512px
only from subsubtitle gets the page rendered as html.
The source of the index.html looks like this
<div class="bg-white dark:bg-zinc-800 p-4 md:p-6 mb-4 rounded-lg"><div class="section" id="subsubtitle"> <h2>subsubtitle</h2>
Here is some content in the document. ReStructuredText (rst): plain text markup
The start of the index.html template looks like this:
{% extends "base.html" %}
{% block content %}
{% block content_title %}
<div class="bg-white dark:bg-zinc-800 p-4 md:p-6 mb-4 rounded-lg">{{ INTRO }}</div>
{% if not category and not tag %}
<div class="my-12 md:my-24 text-zinc-800 dark:text-zinc-300">
{% if SOCIAL or FEED_ALL_ATOM or FEED_ALL_RSS %}
The part of my settings file looks like this (from the answer of above link):
from pelican.settings import DEFAULT_CONFIG
from pelican.readers import RstReader
config = DEFAULT_CONFIG.copy()
INTRO, _ = RstReader(config).read("content/incls/sample.rst")
I expect the Title be rendered in h1 and the Subtitle in h2.
I am using the Papyrus theme. Update: I also tried with notmyidea but have the same problem.
I tried to ask the question in a comment of the above link but I am not allowed.
Before creating this question, I've read all the question existing, and none of the answers has fixed my issue.
Well, I'm fetching a data from API, {{ album.image["3"]["#text"] }} - is the link to the .png file which I would like to set as background-image of the . Here is the example of my code:
<div class="album-grid">
<div *ngFor="let album of albums">
<div class="album"> <--! I want here to set a backgroundImage for each album-->
<h4>{{ album.name }},</h4>
<h5>by {{ album.artist.name }}</h5>
<p>{{ album.image["3"]["#text"] }}</p> <--! this is the link to .png file I'm getting from server -->
</div>
</div>
</div>
here is the solutions I've tried, but none of them helped me:
[style.backgroundImage]="album.image['3']['#text']"
[style]="backgroundImage: {{album.image['3']['#text']}"
[ngStyle]="{ 'backgroundImage': album.image['3']['#text'] }"
Link to my repo -> https://github.com/paslavskyi9roman/Spotilar
On a picture, you can see a grid of albums, with the album name, artist name, and link to album cover file which need to be a background image
click here
You are missing the url() part.
Try the following (as seen in your repository)
<div class="album" [ngStyle]="{ 'backgroundImage': 'url('+ album.image['3']['#text'] + ')'}">
<h4>{{ album.name }},</h4>
</div>
<h5>by {{ album.artist.name }}</h5>
</div>
I have a Handlebars partial called "section", defined as following:
<div{{#if class}} class="{{class}}"{{/if}}>
<h3>{{ title }}</h3>
{{> #partial-block }}
</div>
In certain cases I need to use it as follows:
{{#> section title="title1" class="class1" }}
{{#> section title="title2" }}
<!-- content -->
{{/ section }}
{{/ section }}
The problem is that the "title2" section will also have "class1" resulting in this:
<div class="class1">
<h3>title1</h3>
<div class="class1">
<h3>title2</h3>
<!-- content -->
</div>
</div>
The question: is there a way to avoid this, without having to create a second partial e.g. "section_class1"?
Since you are setting the data parameters (ex., title="title1") for your partial directly within your template, the simplest way to prevent the nested section partial from inheriting the class of its parent would be to explicitly set an empty value for the class parameter where the nested partial is declared:
{{#> section title="title1" class="class1" }}
{{#> section title="title2" class="" }}
<!-- content -->
{{/ section }}
{{/ section }}
I have created a fiddle for reference.
A more robust - and scalable - approach might be to represent your sections in a data structure and pass that to your template. For example, you could define a root section with an array of child sections, like:
{
class: 'class1',
title: 'First Section',
sections: [
{
class: '',
title: 'Subsection One'
},
{
class: 'class1',
title: 'Subsection Two'
}
]
};
This gives you the granular control to apply a specific class to each child section.
Your template would then need to iterate over the child sections array using an #each:
{{#> section }}
{{#each sections }}
{{#> section this }}
<!-- content -->
{{/ section }}
{{/each}}
{{/ section }}
I have created a fiddle demonstrating this alternative.
New user of D8 : my problem is to access to fields in a view or even in general with Drupal 8.
As we could do with ACF in Wordpress.
a {{ kint() }} crash my chrome but works with Firefox to explore the content var.
Unfortunately I do not managed to find and use fields' variables in my view.
I create a new view, which actually display the last three articles. These are well displayed in ugly list but I want to extract fields to put them in a custom html integration.
I create and use a new template for the view :
x node--view--liste-des-actualites--page-2.html.twig
In a custom parent :
x node--page-accueil.html.twig
But when I try to kint() content in my node--view--liste-des-actualites--page-2.html.twig, I have the custom field of the page (Page accueil) and can't find the article's one.
I managed to do it in my custom page but not in this view.
{%
set classes = [
'node',
'node--type-' ~ node.bundle|clean_class,
node.isPromoted() ? 'node--promoted',
node.isSticky() ? 'node--sticky',
not node.isPublished() ? 'node--unpublished',
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
'clearfix',
]
%}
{{ attach_library('classy/node') }}
<article{{ attributes.addClass(classes) }}>
<div{{ content_attributes.addClass('node__content', 'clearfix') }}>
{{ content }}
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<a href="{{ LINK_VAR }}" class="bloc-type">
<div class="categ categ_projet">{{ CATEGORY_VAR }}</div>
<div class="img"> <img src="{{ IMAGESRC_VAR }}" alt=""> </div>
<span class="wrapper">
<p class="date">{{ DATE_VAR }}</p>
<h3>{{ TITLE_VAR }}</h3>
</span>
</a>
</div>
</div>
</article>
EDIT
I managed to guess some fields but this is definitely not a good way to find variables..
{{ node.label }} + {{ content.field_tags }} (But I do not want a rendered one, I just want the text/value)
if you use kint(); to debug large arrays can crash your browser.
I would suggest to use the devel module https://www.drupal.org/project/devel. With devel you can debug your arrays inside of the Drupal8 UI for each content type, block or view.
In my case i use the UI of devel (additional tab on each content). in the module settings, you can chose how devel debugs, the error handling and the output.
As the OP commented it is possible to use a preprocess to display the array on your site:
function <themename>_preprocess_page(&$variables) {
dpm($variables);
}
Does anyone know how to render a dynamically generated block name using the Sonata Block Bundle? An example of what I am trying to achieve is:
page.html.twig:
<div class="content">
{{ sonata_block_render({
'name': '/content/blocks/{{ suffix }}'
}) }}
</div>
where suffix is a variable passed to the twig template, e.g. about-us. This allows me to use a single template for rendering all my CMS content. I have tried doing the above, but that doesn't seem to work.
You're already in twig context, that's why {{ }} didn't work. You'll need the string concatenation operator (~) like this:
<div class="content">
{{ sonata_block_render({
'name': '/content/blocks/' ~ suffix
}) }}
</div>