How to render a Jekyll markdown page on sites index - github

I'm probably missing something simple but I have no way to test Jekyll locally.
I'm using GitHub pages to render Jekyll, for starters I only want to render markdown content on the main index.html from one markdown page.
The structure is:
Index.html
---
layout: default
---
_layouts
- default.html
//html stuff..
<section>
{{page.content}}
</section>
In root folder I have a page called content.md that I wish to render for {{page.content}} the layout renders but the liquid tags section is blank.
How do I render content.md?
Example: https://github.com/wycks/wordpress-gears-jekyll

There are a few things going on here.
In your _layouts/default.html file (and any of the other _layouts directory files for that matter), instead of:
{{ page.content }}
you need to use:
{{ content }}
Jekyll only lets you includes files from a site root level _includes directory. So, you need to move your content.md from the root to that directory (making it if it doesn't already exist).
Finally, you need to actually make the call to the include file from your index.html file. This can be done by changing the content of your index.html file to:
---
layout: default
---
{% include content.md %}
That will setup the behavior you are looking for.
I'd point out two other things:
You may find that changing the extension of your index file from .html to .md works better. An important note though: you need to use .html if you want pagination. Per the Jekyll Pagination documentation, that feature only works when the file is named index.html.
If all you are doing in your index file is calling an include that only resides on that page, you might be just as well off simply putting the content directly in the index file.

include only allows you to include files directly under _includes/. There is is also include_relative which allows you to use paths and include from other places. The include has to be relative to the given file however:
{% include_relative somedir/footer.html %}
There is one issue with either include method I can't resolve: If the file you include has front matter Jekyll won't strip it out. So you can't use front matter to store include specific meta data - like say "title". Of course you can use variables - {% assign title = "My Title" %} but it's not equivalent, because if you want the thing your including to be part of a collection or rendered independently you have to have a front matter.

I believe it is just
{{ content }}
good sir.
ref

Related

How do I load an ejs template file into my HTML?

I am using EJS in the browser (not on the server).
I have some ejs that I would like to use in multiple pages, so I want to put that in its own file, say table.ejs.
Is there a way I can include it in my HTML such that it is immediately accessible to my javascript after onload?
I was thinking something like:
<script id="table-ejs" type="text/ejs" src="ejs/table.ejs"></script>
then in my javascript:
ejs.render(document.querySelector('#table-ejs').???, data)
Is this possible?
I could use the Fetch API to retrieve the ejs file but then I would need to rewrite a lot of code to make it async. I was wondering if I could avoid that.
Well,
place all your ejs-files within a file "views" - within your views you can create another file "partials" - in this file you place your header and footer.ejs.
Within, lets say, your home.ejs you have to include the following code:
<%- include('partials/header'); -%>
// the rest of your code
<%- include('partials/footer'); -%>
You can find more here: https://ejs.co/#docs

Craft CMS plugin AssetBundle Causeing Craft.js Error in Backend

Plugin routes the following url in the admin area to a controller.
url: /admin/custom_route
The controller loads the plugin asset bundle that is CpAssets::class dependent & loads the twig template everything loads but browser console gives an error for Craft.js that Craft is not defined inside the Jquery exenteded plugin function. Where Craft.js & Craft.min.js are both being loaded when only one of them should be.
Been looking at the yii functionality but I'm at a loss.
Solution for anyone who else who is confused with the same problem.
In your template.twig you need to add head tags & call the head function this eliminates the Craft.js error.
<head>
{{ head() }}
</head>
I found the solution by looking at src/web/assets/cp/CpAsset.php where at line 98 - 103 it defines the missing js Craft object.
// Define the Craft object
$craftJson = Json::encode($this->_craftData(), JSON_UNESCAPED_UNICODE);
$js = <<<JS
window.Craft = {$craftJson};
JS;
$view->registerJs($js, View::POS_HEAD);
Where View::POS_HEAD defines the position in the document where the script is loaded according to the yii documentation. Just calling
{{ head() }}
Will not work it need to be within the head element tags of the document.

TYPO3: Where can I find the template created in the backend?

I'm trying to create separate templates for webpages with either a single or a double column structure. Currently my webpage only has one template, placed on the root page which is used by all its subpages.
However, I cannot find the template in myextension/Resources/Private/Templates as this folder is empty. Where is the template located in my extension and where should I add the alternative template?
I assume you use "fluid_styled_template"? Then the templates are in that respective core directory, in "Resources/Private".
If you want to manipulate them, copy them to your sitePackage into "Resources/Private/Extension/fluid_styled_content" (that at least is one of the recommended ways where to place it) and override the TypoScript that "fluid_stlyed_content" provides.
templateis not unique in TYPO3 context. we have:
typoscript records, maybe also as files which are included in a record or by PHP
HTML files, which are define a markup for parts of the website
they can be differed in
Marker-Templated. The old and less and less used kind with markers and subparts as placeholders for data defined in typoscript
Fluid templates. The modern kind with control structures and data objects
with the statemant
my webpage only has one template, placed on the root page
it is not clear what you mean:
records are defined in pages -> typoscript templates
maybe you mean in the root page a template is selected. that could mean HTML templates, probably fluid templates as the path myextension/Resources/Private/Templates matches the usual structure for fluid templates.
assuming fluid templates:
Templates are search in a list of folders. This list is managed in typoscript.
Any usage has it's own list and the list of your main/page template probably is at page.10.templatePaths. You can look for it in the TSOB (Typoscript Object browser)
If the list consists of one entry only you have only the basic config.
As the list of folders is consulted each time a template (,partial, layout) is accessed and only that file with matching name in the folder with highest priority is taken you can add your folders with higher numbers in the list so you do not need to change the original files (use copies in your folder to modify) or add files to the original folder (inside of other extensions).
So you need two things:
create your template file in an appropriate folder
(ext:myextension/Resources/Private/Templates sounds good)
and add this folder to the list of folders for these templates
(e.g. page.10.templatePaths.20 = EXT:myextension/Resources/Private/Templates)

Typo3 change how objects are rendered (typo3 beginner)

I'm fairly new to typo3 and I have an issue that i don't find an explanation on how to change it. I'm sure there are already some helpful tutorials but i have issues finding them.
I am making a website and I have already made a template for fontend and backend.
It is a very simple test template that consists only of one slider and one text element.
The slider is handmade and should have the following layout:
<section class="custom-slider">
<img src="img1.jpg">
<img src="img2.jpg">
...
</section>
Thought easy, i have my slider place in my template, just need to add plain images.
but typo3 gives me:
<section class="custom-slider">
<div id="c3" class="frame frame-default frame-type-image frame-layout-0"><header><h2 class=""></h2></header><div class="ce-image ce-center ce-above"><div class="ce-gallery" data-ce-columns="1" data-ce-images="1"><div class="ce-outer"><div class="ce-inner"><div class="ce-row"><div class="ce-column"><figure class="image"><img class="image-embed-item" src="fileadmin/_processed_/1/2/csm_slider1_c3fdcdcaf5.jpg" width="600" height="187" alt="" /></figure></div></div></div></div></div></div></div>
</section>
Now i search how i can make my own custom elements or render existing elements different. I have found a lot of tutorials but they all are based on 'Extension Builder' or 'Builder' and require a custom extention. These don't seem to work on Typo3 8.7.x. Is there a different solution or can someone give me a good tutorial link?
Thank you in advanst:)
Ps: since i will have the same problem with styled text elements i would like to ask if there is a way to declare in the themplate how different predeterment elements are rendered?
In TYPO3 8.7 (I assume) your rendering is done with FSC (fluid_styled_content), so you have to understand the mechanism of FSC to render a CE (ContentElement).
As the name suggests Fluid is used. Fluid uses different templates organized in three categories (each with it's own folder):
Layouts
Templates
Partials
The call goes to a template (in the folder 'templates') where a tag can be inserted to use a specific layout (from floder 'Layouts'). if this tag is given the rendering starts with the given layout. In the layout different sections and partials can be called. Sections belong to the template, partials need to have an own partial file (in folder 'Partials').
You can override single files from the given declaration to individulize the behaviour.
In your example you may evaluate the field layout in layout, template and partial to avoid the default wrapping of any content (your images) in different div tags.

Does the testandtarget.js file have a purpose?

While analyzing some requests on our dispatcher, we noticed that we continually get a 0 byte file generated from hitting the following path
/etc/clientlibs/foundation/testandtarget
This file is a ClientLibraryFolder. Its js.txt defines the base file as such:
#base=source
There is no "source" folder that is a direct child of testandtarget. The testandtarget folder contains two ClientLibraryFolders, mbox and util. The js in these folders is loaded on the page just fine. This is why Test&Target still works. However, the testandtarget ClientLib seems to be wrong by default (this is the OOB 5.5 setup). We get a 0 byte file because the js.txt file's base points to a folder that does not exist.
Is anyone else seeing the behavior? It appears that I could just rewrite the js.txt file. Are there any ramifications for doing so?
As best I can tell, that node is an empty clientlib, but it has a child node of "mbox" with the same clientlibrary category. That clientlibrary WILL produce content, and references a source folder beneath it.
http://{localhost}/libs/cq/ui/content/dumplibs.test.html?categories=testandtarget
http://{localhost}/libs/cq/ui/content/dumplibs.html?categories=testandtarget&type=JS&theme=
I am not aware of the version history, and whether it used to have valid content, or is planned to in the future.
I would be more tempted to remove or change the category than to play with the js.txt file. Editing the js.txt file will change what content goes into the clientlib. Changing/removing the category would no longer cause a call out to the zero byte file.
<cq:includeClientLib categories="testandtarget" />
=>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/mbox.js">
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget.js">