I have started a new project in Github and as I will need to collaborate with people, I wanted to start a decent documentation. I would like to use Github Pages for this task, but the documentation will need to include many equations, as for instance https://wec-sim.github.io/WEC-Sim/theory.html.
I have read on-line on numerous posts that Mathjax provides a good tool to read equations on browsers and has been linked to Github pages. However, although I tried to follow many different strategies, I have not been able to get my Page to show any equations yet.
You can find my project at https://github.com/enricoande/uuv and the corresponding page at https://enricoande.github.io/uuv/. The page is built from https://github.com/enricoande/uuv/blob/master/docs/README.md.
Initially, I was not able to display equations at all, but could see the text in the Page. Now, I am not even able to see the page. This has happened after adding the file https://github.com/enricoande/uuv/blob/master/docs/_layouts/page.html which reads
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
Is it possible that the reason why I can no longer see my page is that Mathjax is too slow (I have found comments on this regard on-line)? Otherwise, have you got suggestions on what I could do to fix the Page to display the equations?
As you can see I am a beginner with Github pages and html.
Any suggestion is well appreciated as I am now utterly stuck. Thank you for the help!
If I open the referenced JS file at https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML, I see
console.warn('WARNING: cdn.mathjax.org has been retired. Check https://www.mathjax.org/cdn-shutting-down/ for migration tips.')
So check https://www.mathjax.org/cdn-shutting-down/ for detailed migration tips.
Example solution
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?...">
</script>
If you open the HTML source of your page, you'll notice that it contains nothing but the script tag.
This is expected since your page template is not actually a template -- for that it would have to contain {{ content }} or similar liquid templating tags so that it can pull content from the actual page.
For example, https://github.com/jekyll/jekyll/blob/master/docs/_layouts/page.html has
---
layout: default
---
<section class="standalone">
<div class="grid">
<div class="unit whole">
<article>
<h1>{{ page.title }}</h1>
{{ content }}
</article>
</div>
<div class="clear"></div>
</div>
</section>
You will then have to create an index.html file in your docs folder that starts with
---
layout: page
---
so that it pulls in the page template (and the script tag).
Try installing jekyll and generating the default site to evaluate good defaults; see the docs for more information on that. Usually, a script tag appears in a head, header or footer template.
Related
I am working on a docusaurus based website which has front matter available in the following format.
---
id: introduction
title: Welcome to Rowy
slug: /
---
I am integrating Cusdis (an open source commment system plugin) and I wish to consume the page id and title front matter. How can I do that?
I tried using a variety of methods to consume the front matter, for example {props. } for the following code.
<head>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
</head>
<div id="cusdis"
data-host="https://cusdis.com"
data-app-id="**********************************"
data-page-id= {props.id}
data-page-url="http://docs.rowy.io"
data-page-title= {props.title}
data-theme="auto"
></div>
Here, {props.id} is being read as the Introduction which is the value of {props.id}, which is weird. Would love some guidance.
Frontmatter can be accessed via the following within a Markdown page, so I'm assuming it could work in your plugin.
<div>
{frontMatter.fieldname}
</div>
I am attempting to add a contact form to a GitHub Jekyll website. I have mostly been following advice from the most-liked answer here, from a YouTube tutorial here, and from the FormSpree site.
In my attempt to keep the website design consistent, one major difference compared to these tutorials is probably that I am adding the FormSpree contact form to a markdown file, which is here. As you can see in this markdown file, I tried creating the form twice (once with bare-bone suggestions and once with more bells and whistles).
I am almost certain the form is not looking as expected (which in the YouTube tutorial I was following would look more like this) because I am not using a .html file. However, when I tried to convert my page to .html instead of .md it rendered the contact form page looking visually/aesthetically inconsistent with the rest of the webpage tabs. As a result, I am hoping to maintain the .md format with the same current YAML metadata.
My question is: Is it possible to add a FormSpree contact form to GitHub Jekyll pages directly inside a Markdown (.md) file and, if so, what alterations would I need to make to accomplish this? Thank you for sharing any advice!
Using html chunks in md files can seem quite tricky.
In your particular case, as you're including raw html, you can use nomarkdown extension tag.
Just try :
{::nomarkdown}
<form action="http://formspree.io/moqeoggo method="POST">
<input type="email" name="_replyto">
<textarea name="body"></textarea>
<input type="submit" value="Send">
</form>
{:/nomarkdown}
I am quite new to TYPO3 and i am trying to build something which i am not sure how to do!
I have installed the T3G/blog extension.
On my website i have a "Blog" page, where i would like to show the blog posts like this (for each post):
Post Title
Post Date
Full Post Content
Post Author
I imagine i have to use a for loop to go through the blog posts available, but i can't find a way to make it work.
Right now i have something like this:
<div class="blog__content__left">
<f:debug>{_all}</f:debug>
<div class="blog__post__title"></div>
<div class="blog__post__date"></div>
<div class="blog__post__content"></div>
<div class="blog__post__author"></div>
</div>
The output of the debug is an array with my posts, but now my question is:
how can i render the right information on the right place?
Thank you!
You have to loop through all posts of a blog.
<f:for each="{blog.posts}" as="post">
<h2>{post.title}</h2>
<p>{post.content}</p>
</f:for>
There are so many tutorials about blog. Have a look at https://docs.typo3.org/typo3cms/ExtbaseFluidBook/3-BlogExample/Index.html
Debug
When you see the output in your debug, you can use the information in your template. Say your debug output sais the following:
- Blog
> Headline
> Text
You can call these items in your template as {blog.headline} (for example).
Using original files as base for your own template
I suggest taking a look at the default templates provided. You can find these template in your typo3/typo3conf/ext/{extension}/Resources/Private Folder.
Take a look at the tags being used! You can use these in your template.
You should download the Layouts, Partials and Template folder, and upload these in your fileadmin/{blogmodule}/ folder. Set the path in TypoScript, You'll probably find an example in the plugin documentation.
Working in Kentico 7 on an Ad-Hoc page that inherits from Portal Master. I want to insert some literal script or code right before the </body> tag in the rendered ad-hoc page.
I thought I'd have to do this by editing the portal master and adding the following:
<cms:CMSPagePlaceholder ID="plcBodyEnd" runat="server">
<LayoutTemplate>
</LayoutTemplate>
</cms:CMSPagePlaceholder>
and then in the layout of the Ad-Hoc page do this:
<cms:CMSContent runat="server" id="cntLeft" PagePlaceholderID="plcBodyEnd">
<script type="text/javascript">
ProviderConnections.Transparency.initializeWidget({ });
</script>
</cms:CMSContent>
This worked fine until I went to the design tab on the Ad-Hoc page, where I got the following error:
Object reference not set to an instance of an object.
I don't want to register script blocks. I just want to put text in the Ad-Hoc page that goes there before the </body> tag, which is controlled by Portal Master.
What am I doing wrong?
I'm not 100% sure what you are trying to achieve. Giving an example or attaching a screenshot would be very helpful.
Here are the ways of attaching JavaScript in Kentico:
Through portal engine:
Use JavaScript web part - that gives you an option of choosing where the script should be located
Programmatically from code-behind:
Use CMS.Helpers.ScriptHelper API (wrapper around ASP.NET's ClientScriptManager)
ScriptHelper.RegisterStartupScript() to put the script at the end of the page
ScriptHelper.RegisterClientScriptBlock() to put the script before page's elements
The difference between the two is well explained here.
Programmatically from ASPX markup:
Put your <script> block to a desired location in your .aspx / .ascx files
Evaluate a code-behind variable containing script
<asp:Button ID="btnOK" runat="server" Text="OK" />
<script type="text/javascript">
<%= fieldWithActualScript %>
</script>
So I've spent a day on Google, and trying bits of jquery/javascript to do what I'm looking to do and am officially stuck.
I'm building a site using Squarespace, with the Marquee theme applied. I would like to be able to add a custom link in the primary navigation to send users to an alternative language version of each specific page.
But, I'm struggling. Ive found solutions on here that should work, but I don't think I'm applying it right. Ive tried adding a single link to the navigation and using a script on each page (in the code injection point of the head section) point that link somewhere else.
This would mean I have a single link in the navigation (which is standard across the site) pointing users to whichever page I want...on a per page basis. I know there is a solution out there....just can't make it work!
The section I need the link to work from is:
<div id="desktopNav" data-content-field="navigation-mainNav" data-annotation-alignment="bottom left">
<nav class="main-nav" id="yui_3_17_2_1_1450478013910_660">
<div class="nav-wrapper" id="yui_3_17_2_1_1450478013910_659">
<ul class="cf" id="yui_3_17_2_1_1450478013910_658">
<li class="page-collection">
<span>Menu</span>
</li>
</ul>
</div>
</nav>
</div>
None of this can be edited directly though...
I was thinking something like this could work, but I cant work out how to apply it to my situation...
Change href value for a hyperlink
Any help, gratefully received!
I fixed it...using this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a[href*="original.site"]').attr('href', 'http://website.com');
});
</script>
It allows me to point a single link in the navigation (which cant be edited directly) to whatever I want it to go to.