I have a DocFX site with a number of pages. I would like to include tags at the top of each page via custom template, and I'd like for authors to be able to add tags in the YAML frontmatter, e.g.:
---
title: My Page Title
tags: tag1;tag2;tag3
---
I would then like to be able to access those tags as some sort of array and process them when generating the HTML output.
I've read the docs here which suggests that I can add a schema.json file somewhere and this will automatically detect items in the schema. What I can't work out is how to access the YAML frontmatter in my template when generating the output.
If I need to write a custom .NET plugin to do this then that isn't an issue, but I believe I should be able to access these properties in the template somehow.
Any guidance at all would be very gratefully-received!
I managed to eventually work this out.
In my custom template I have a conceptual.html.primary.tmpl file which provides access to the frontmatter:
<div id="tags">
{{#tags}}{{tags}}{{/tags}}
</div>
Obviously I now need to process the tags, but I now get HTML produced as expected from my .md files:
<div id="tags">
tag1;tag2;tag3
</div>
Related
and pardon what might be a repeat question, the solutions to the others didn't solve my problem. I'm working on a Hugo site and attempting to embed an iframe. The element shows but the I get the message 'This content is blocked. Contact the site owner to fix the issue.' when it loads, so no one can see the content.
Here is my .md information
+++
title = "Resources"
description = "Hugo, the world's fastest framework for building websites"
date = "2019-02-28"
aliases = ["about-us", "about-hugo", "contact"]
author = "Hugo Authors"
+++
<iframe src="//docs.google.com/spreadsheets...."></iframe>
I've also updated my config.toml file by adding the following:
[markup.goldmark.renderer]
unsafe = true
I'm not sure what I'm missing. Please let me know if you need more information about what I've done. I've tried shortcode as well but that doesn't render anything at all (I'm still new to shortcodes which is why I am embedding the iframe).
Thank you for your time and consideration.
For those who just want to embed an iframe into a Hugo site, like the question title says:
In the examples below, the content between --- is called front matter and it is in YAML syntax. You can add here your own structured data or use predefined Hugo's front matter fields. The rest of the file (below the second ---) is a standard Markdown syntax formatted content.
You don't need to use the YAML syntax in your front matter. Also TOML and JSON formats are supported by Hugo (see docs)
Solution 1: direct HTML in the content
You can add the HTML code itself to the Markdown content (like T.J.'s .md file example in the question). Hugo's markdown engine will then render the iframe as it is.
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
---
<iframe src="https://example.com/"></iframe>
Solution 2: custom shortcode
You can implement your own shortcode which can be useful when using some kind of CMS or in a case when you want to style the iframe somehow.
<!-- layouts/shortcodes/iframe.html -->
<iframe src="{{ .Get 0 }}"></iframe>
You can then add iframes to your content in markdown files like this:
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
---
{{< iframe https://example.com/ >}}
Shortcodes allow you also to create named attributes so you would use the shortcode like {{< iframe url="https://example.com/" >}}. The benefit of this solution is that you are free to set up the HTML code that will be rendered when using the iframe shortcode. For more information, see the shortcode docs.
Solution 3: using the front matter
If you build your page from predefined blocks or components or the page is a very simple one where you for example don't use the markdown content but just the front matter fields, you can be interested in this solution which is basically just using the front matter for storing the iframe's URL or other settings you want to use during the HTML rendering.
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
iframe: "https://example.com/"
---
In your layout file, you will get this piece of information by using {{ .Params.iframe }}.
Using the Ghost blog routes.yaml file it is possible to use the collections block to create a custom collection made from some tag(s) and / or other data. You can also tell this collection to use a custom theme template see:
https://docs.ghost.org/tutorials/creating-content-collections/
https://docs.ghost.org/concepts/routing/#content-structure
For instance:
collections:
/example/:
permalink: /example/{slug}/
controller: channel
filter: tag:example-tag
template:
- example
All of the above works and my collection properly uses my new example theme file.
The issue is that unlike the tag page (for example-tag) my new custom collection does not have a readily documented way to work with the title etc.
It does not pull the title / meta description from the tag used to build the collection (which would be great for collections built from single tags). In an attempt to work around that I tried some {{#has}} statements but I can't figure out what context the custom route would fit into.
With the above example routes.yaml the title for the custom collection ends up as 'My Site Name (Page 1)' — and there is no Meta Description.
This issue also extends into the Open Graph data which lists an identical title as well as no description for the custom collection.
My guess is that it may be possible to use a data property attached to the routes.yaml file to achieve this (see: https://docs.ghost.org/concepts/routing/#data) but I haven't found a solution as of now.
While my initial attempts at googling for a solution came up empty, this is the best reference I have seen to the issue:
https://forum.ghost.org/t/dynamic-routing-page-post-data-context-in-default-hbs-nested-navigation-on-custom-collections/4204
https://github.com/TryGhost/Ghost/issues/10082
I found a way to work around.
You create a page called example in the Ghost Admin tool.
Customize routes (instead of collections) in the routes.yaml as following:
routes:
/example/:
controller: channel
filter: tag:example-tag
template: example
data: page.example
The page.example will use the metadata of this page in the Ghost.
This is possible only with workaround described in issue: https://github.com/TryGhost/Ghost/issues/10082
Generally do following:
create page Example (with slug example) and fill metadata title & description you want
in routes.yaml alter your collection definition /example/ add following:data: page.example to link your collection root with specified page
now in your template definition example.hbs you could use e.g. {{#page}} {{content}} {{/page}} tag to insert content from your page. You can do it also in default.hbs template which is included from your example.hbs. So replace: <title>{{meta_title}}</title> in default.hbs with following:
{{#unless page}}
<title>{{meta_title}}</title>
{{else}}
{{#page}}
<title>{{meta_title}}</title>
<meta name="description" content="{{meta_description}}"/>
{{/page}}
{{/unless}}
This will set specific title/description for your collection root pages in general way. It is possible to generate schema.org metadata in the similar way. Unfortunately Facebook and Twitter metadata is not so simple to do because, {{ghost_head}} tag in default.hbs already inserts site metadata to this page. Last note: besides {{meta_title}} and {{meta_description}} I suppose you could use all metadata fields defined here.
In default.hbs I added the following block:
{{{ block "metaTitle"}}}
and eg. in post.hbs I filled that block as follows:
{{!< default}}
<div class="content-area">
<main class="site-main">
{{#post}}
{{#contentFor "metaTitle"}}
<title>{{title}}</title>
{{/contentFor}}
...
For other pages like page.hbs, blog.hbs, author.hbs I did the same. I think that solution is more flexible because we have more control over title value.
My question is about Tinymce Template Plugin.
I have been developing a CMS with ASP.NET MVC. I can insert a template by using “insert template plugin”, but I can not insert a css file.
The template I will insert should be more developed. When I add a css file, it does not work. For example, <link rel=“stylesheet” type=“text/css” href=“theme.css”>. This link is my template I want to use.
And then I am saving this content into my database. This link can not be saved into my database. It can not be seen.
I used content_css ,the template looks good in the editor, but when I look at the page, it looks very bad because the css files does not work. In addition to all of these, when I look at the table of database (column : content) there are not css links (<link href...)
What should I do for this problem ? Thanks for your help.
CSS links belong in the head of the document, it is not valid HTML to add the link tag to the body. The Template Plugin allows you to add fairly involved HTML to the HTML body so you don't have to build that chunk of HTML over and over again. Please read the documentation for Templates: https://www.tiny.cloud/docs/plugins/template/
When you apply CSS in content_CSS it only affects how TinyMCE looks in the iFrame that the editor lives in. You need to get the CSS into the head of the page you are bringing over from your databse.
I set up a Drupal page, which has two different content-types. One is "articles", one is "reviews".
In my theme folder, I set up two node templates for these content types. node.html.twig (standard template - articles), and node--reviews.html.twig.
When I add an article, node.html.twig is used, when I add a review, node--reviews.html.twig is used.
Now, it's possilbe to have different comments types too. I want to add the standard comment (comment.html.twig) for articles, and a custom comment type to reviews.
In Drupals theme naming documentation it's written, to name a template override like this: comment--node-type.html.twig. So I named my comment template comment--node-reviews.html.twig.
Is there anything else I have to do - apart from clearing the cache?
Because I simply cant get it to run.
Enable Twig Debugging, then you'll get template suggestions printed as HTML comments directly into the markup.
I did that and got the following output:
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'comment__field_my_comment_field__article' -->
<!-- FILE NAME SUGGESTIONS:
* comment--field-my-comment-field--article.html.twig
* comment--field-my-comment-field.html.twig
x comment.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/classy/templates/content/comment.html.twig' -->
So, the templates are supposed to be named like the following pattern:
comment--field-name-of-the-comment-field-in-the-content-type--content-type.html.twig
comment--field-name-of-the-comment-field-in-the-content-type.html.twig
Is there a way to include custom css tags in a jekyll site while using markdown for the entry files; for example, when I want to highlight a certain paragraph?
Markdown nor YAML FrontMatter have this built in. But you can make it yourself.
Say, you have foo.css that you want to include on certain posts.
In _posts/2013-02-03-higligting-foo.markdown:
---
css: foo
title: "Drupal Imagecache security vulnarability with DDOS attack explained"
tags: [drupal, imagecache, security, ddos]
---
Then, in _layouts/default.html:
{% if post && post.css %}
<link rel='stylesheet' type='text/css' href='public/assets/{{ post.css }}.css' />
{% endif %}
If a post is shown, and the post has a variable defined, css, then use that to include the css file with the name. Note that this does not test wether the filename is correct, whether the css-file exists and so on.
If you mean can you give a particular paragraph in your Markdown document a specific class, you technically can, by just typing the paragraph tag the way you want it:
My **first** paragraph
<p class="mySpecialClass">My **second** paragraph</p>
My **third** paragraph
and Markdown will pass your p tag through to the resulting HTML.
However, Markdown gives up on parsing content inside tags you type yourself, so your paragraph's content won't be treated as Markdown — e.g. the word **second** in that paragraph won't show up as bold.
I switched to Textile for Jekyll posts because of this behaviour.
Good luck!
you should be able to put html tags in your markdown document, and it should parse them no problem. for example:
#This
is a paragraph <span style="background-color:yellow">with highlighting</span>