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>
Related
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.
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.
I am trying to create a Facebook share option for my blog articles, and it works but it doesn't take the article text or image, but the first image and text on the (single page) website. How can I change my share code so that it will use the article's image and text from where I click the FB share button?
This is the template for the blog article, with the FB share code included:
<div class="contentLeft">
<div class="roundimage">
<a href="[[+roundImage:phpthumbof=`h=750&zc=1`]]" class="colorbox" title="[[+roundImageCaption]]"><img class="round"
src="[[+roundImage:phpthumbof=`w=170&h=170&zc=1&q=95`]]" alt="[[+roundImageCaption]]" /></a>
</div>
<script type="text/javascript">function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>
<h4 class="blue" style="margin-bottom:10px; margin-top:0;">[[+articleHeadline]]</h4>
<p class="datetext">[[+datetimeText]]</p>
<p class="readmoretext">[[+articleText]]</p>
<div class="divider"></div>
</div>
I hope you can help! Thank you!
It should be enough to make sure that the article page, ie the link that you are sharing, embeds the correct og:image and og:description. You only share the link with the share button, and facebook will embed the link and look in it for the proper data.
Update:
I guess you're not using the articles package to create the blog? If you are you already have individual pages even if you're not using them =) If you're not i assume you're using some sort of resource loop to create your entries.
After looking around in the facebook docs it seems you can specify the image (https://developers.facebook.com/docs/opengraph/using-actions/v2.0#params) when creating your share button using the javascript sdk (https://developers.facebook.com/docs/sharing/reference/share-dialog). Each article will need to call something like this instead of the current javascript share url functionality.
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
image: "YourImageForThisRespectiveShare",
})
}, function(response){});
If you prefer to explore the method i mentioned in the comments it would go something like this:
Look in your code at u=location.href;, you'd want to try modifying that to u=location.href+'?articleid=[~[*id*]~]';. When you share you should hopefully see the appended article ID for each article.
You'll then need to make sure you can specify og:image and description for each article, i assume you somehow have resources set up that represent each article, in that case just create a couple of template variables for that resource type.
In your header you could then use the getResourceField package for example to retrieve the correct TV from the correct resource, as specified by the ?articleid= parameter in your URL.
To retrieve the parameter you'll need a simple snippet like return (!empty($_GET['articleid']) ? $_GET['articleid'] : $default);. Lets name the snippet: "getArticleId". I left the option to decide a default image when there is no &articleid specified.
You're using modx evolution from the look of your [~[*id*]~] tag, but there should be some equivalent of the getResourceField package for evolution. This is the revolution version of the code needed:
<meta property="og:image" content="[[!getResourceField?
&id=`[[!getArticleId? &default=`[[*id]]`]]` //Take the blog page's own image as a default
&field=`imageTV` //you'll of course have to change "imageTV" to whatever you call it
&isTV=`1`
]]" />
Repeat for og:title and og:description, with their respective TV names.
I am trying to understand what kind of web applications Apache Wicket is suitable for, and it seems to be page based from what I have seen. How can it be used to make single page web apps as well?
At our company we have 3 SPA built on Wicket. They all work :) Basiclly our structure is:
<html>
<head>
</head>
<body>
<div wicket;id="menu">
<!-- navi links -->
</div>
<div wicket:id="main">
</div>
</body>
</html>
And we replace the main panel and it's inside panels effectivly getting an SPA.
Ajax support in Wicket 6 is very good.
Yes, its basically for page based webapps. So, it can also be used easily form single page web app.
I suggest just reading this short example of Hello world
After that, you can easily edit your equivalent of HelloWorld.html and HelloWorld.java to make really easy HTML in Java.