I was going through the instructions of setting up Disqus but I don't understand where the Universal Embed code goes nor where {% if page.comments %} and {% endif %} is supposed to go.
I do understand where:
---
layout: default
comments: true
# other options
---
goes. At the top of my markdown (that is currently my blog post). I was also watching this:
https://www.youtube.com/watch?time_continue=154&v=Dr6pSdeJgkA
For how to manually install Disqus but I am still failing.
This is how my project looks like:
I saw this but wasn't helpful:
Jekyll and Disqus: cannot get disqus to appear on site
I also checked:
https://talk.jekyllrb.com/t/where-does-the-universal-embed-code-go/3340
Quora:
https://www.quora.com/unanswered/Where-does-the-Universal-Embed-Code-go-for-Disqus-and-Jekyll
Their discuss page:
https://talk.jekyllrb.com/t/where-does-the-universal-embed-code-go/3340/5
As we have the file disqus_comments.html in the _include folder, this is where we have to paste the Universal Embed Code.
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT
* THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR
* PLATFORM OR CMS.
*
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT:
* https://disqus.com/admin/universalcode/#configuration-variables
*/
/*
var disqus_config = function () {
// Replace PAGE_URL with your page's canonical URL variable
this.page.url = PAGE_URL;
// Replace PAGE_IDENTIFIER with your page's unique identifier variable
this.page.identifier = PAGE_IDENTIFIER;
};
*/
(function () {
// REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW
var d = document,
s = d.createElement('script');
// IMPORTANT: Replace EXAMPLE with your forum shortname!
s.src = 'https://EXAMPLE.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>
Please enable JavaScript to view the
comments powered by Disqus.
</noscript>
In https://EXAMPLE.disqus.com/embed.js, replace EXAMPLE with our Disqus Username.
After making the Universal Code, we have to fetch that code in our post to render the comments, and to do so, we have to make a layout file of the post so create a file with the name post.html and put this code in it.
---
comments: true
---
{% include disqus.html %}
Now make any post that will be a markdown file with code.
---
layout: post
---
So, whenever we make a new post, we have only to repeat step 3. If still not working, try to check the _config.yml file for Disqus Username.
Related
I have developed a website based on Angular HTML5 Bootstrap CSS. I have embedded DISQUS for interaction and comments purpose.But , it does not work the way I want and I see the same comments in every page since mine is a single page application and I have included the DISQUS code only in home page HTML file.
However , I want unique disqus to be loaded for every async URL refresh in my angular JS single page application so that comments are unique per page.
Now I see the same comments in all the pages.Below is the disqus code that I use inside the body tag
My website
http://www.europeansaga.com/#/
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//www-europeansaga-com.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
<script id="dsq-count-scr" src="//www-europeansaga-com.disqus.com/count.js" async></script>
I have used the following HTML tag where disqus loaded as a one time activity.Being a single page application the page does not refresh at all during URL change
<div id="disqus_thread"></div>
Let's say I have an MVC/WebAPI/AngularJS site that I'm running locally, e.g. ;
localhost/Test/
which I then want to move to
www.test.com
While local, I have a lot of references to various directories (jsfiles, etc) of the following format (in either JS or HTML files)
app.directive('rpdbSpinner', function() {
return {
restrict: 'E',
**templateUrl: '/Test/templates/directives/spinner.html',**
scope: {
isLoading:'='
}
}
})
when updating/web publishing, I'd have to change everything to:
app.directive('rpdbSpinner', function() {
return {
restrict: 'E',
**templateUrl: '/templates/directives/spinner.html',**
scope: {
isLoading:'='
}
}
})
I can do this manually (which is what I've been doing),but the larger the project grows, the harder it becomes. I could, of course, only change it once and then excluded the files during publishing phase (web.config/rest), but it still feels like I am going about it the wrong way. Using "~/" wouldn't work on plain HTML/JS files as far as I'm aware, and this I can't really use it...
Any suggestions to map to paths globally regardless of whether in a Virtual Directory or the root of a project?
Thanks :)
If you simply care about getting the root/base url of the site so you can append that to get the other url you are after, you may simply use / as the first character of your url.
var getUsersUrl = "/api/users";
Here is an alternate approach if you want more than just the app root (Ex : Specific urls( built using mvc helper methods such as Url.RouteUrl etc)
You should not hard code your app base path like that. You may use the Url.Content or Url.RouteUrl helper methods in your razor view to generate the url to the app base. It will take care of correctly building the url regardless of your current page/path.Once you get this value, assign it to a javascript variable and use that in your other js code to build your other urls. Always make sure to use javascript namespacing when doing so to avoid possible issues with global javascript variables.
So in your razor view (Layout file or specific view), you may do this.
<script>
var myApp = myApp || {};
myApp.Urls = myApp.Urls || {};
myApp.Urls.baseUrl = '#Url.Content("~")';
myApp.Urls.userListUrl = '#Url.Action("Index","User")';
</script>
<script src="~/Scripts/NonAngularJavaScript.js"></script>
<script src="~/Scripts/AngularControllerForPage.js"></script>
<script>
var a = angular.module("app").value("appSettings", myApp);
</script>
In your angular controller, you can access it like,
var app = angular.module("app", []);
var ctrl = function (appSettings) {
var vm = this;
console.log(appSettings.Urls.userListUrl);
vm.baseUrl = appSettings.Urls.baseUrl;
//build other urls using the base url now
var getUsersUrl = vm.baseUrl + "api/users";
console.log(getUsersUrl);
};
app.controller("ctrl", ctrl)
You can also access this in your data services, directives etc.
In your non angular java script files.
// With the base url, you may safely add the remaining url route.
var urlToJobIndex2= myApp.Urls.baseUrl+"jobs/GetIndex";
Using "~/" wouldn't work on plain HTML/JS files as far as I'm aware,
and this I can't really use it...
Yes, but you could inject it in your main server-side served webpage as a variable:
<script>
var baseUrl = ... get the base url from the server using ~/
</script>
and then in your external scripts simply concatenate the relative urls with it. As far as static html files are concerned, then it could be a little more problematic. You could serve them through some special server side handler that will take care of injecting this logic.
You can use module.constant to create an injectable which you can use.
app.constant("URL_BASE", "/Test");
app.directive('rpdbSpinner', function(URL_BASE) {
return {
restrict: 'E',
**templateUrl: URL_BASE + '/templates/directives/spinner.html',**
scope: {
isLoading:'='
}
}
})
You can also use module.value if you register it before you register your directive.
For more information see AngularJS Module Guide -- configuration.
I'm working on adding some simple Markdown processing to my Gulp process, but I can't quite get the pieces to work together. I seem to be missing the step between getting the front matter content, and determining which Nunjuck template to apply.
Here's the section in my Gulp file:
gulp.task('pages:md', function() {
gulp.src('./content/**/*.md')
.pipe(frontMatter({ // optional configuration
property: 'frontMatter', // property added to file object
remove: true // should we remove front-matter header?
}))
.pipe(marked({
// optional : marked options
}))
.pipe(nunjucks({
// ?? Feels like I need to specify which template applies based on the front matter "layout" property?
}))
.pipe(gulp.dest('build/'))
});
The markdown file looks like this:
---
title: Title
layout: layout.html
nav_active: home
---
...markdown content...
I feel like it's going the right direction but being able to visualise where that front matter data has gone, and how to expose it to the Nunjucks rendering, is not clear. Any help?
You need gulp-wrap and original nunjucks.
gulp-nunjucks is a tool for compiling the stream of nunjucks templates, but what you need to do is to wrap your contents in a nunjucks template and that is what gulp-wrap is for.
Try npm install gulp-wrap nunjucks in addition to other settings and then the following should work.
gulpfile
var gulp = require('gulp')
var wrap = require('gulp-wrap')
var frontMatter = require('gulp-front-matter')
var marked = require('gulp-marked')
var fs = require('fs')
gulp.task('pages:md', function() {
gulp.src('./content/**/*.md')
.pipe(frontMatter())
.pipe(marked())
.pipe(wrap(function (data) {
return fs.readFileSync('path/to/layout/' + data.file.frontMatter.layout).toString()
}, null, {engine: 'nunjucks'}))
.pipe(gulp.dest('build/'))
});
markdown
---
title: Title
layout: layout.nunjucks
nav_active: home
---
...markdown content...
layout.nunjucks
<h1>{{ file.frontMatter.title }}</h1>
<p>{{ contents }}</p>
You might want to have a look a the plugin gulp-ssg. I don't know what it's worth, but it was mentionned in this issue for someone who had the same problem as you.
Not exactly what you're looking, but for this kind of work, I've had success using metalsmith. You can even mix it with gulp if, like me, you have more complex processing for your javascripts resources for example.
This is actually two questions...
I have a single SWIG template (index.html) that I would like to pull multiple JSON files into for compiling using Node.js. An "index.json" file with variables that pertain just to that page, then a "common.json" file that contains a set of common variables that I would like to use across the entire system.
I also then have a "header.html" template and a "footer.html" template inside "index.html". How would I get them to each pull their own "header.json" and "footer.json" files respectively?
Ultimately, I am trying to get this all working within GULP-SWIG since we already have a GULP process running at all times for the rest of the project.
UPDATE: GULP-SWIG automatically looks for a JSON file with the same name and processes it, but there is no documentation on including additional JSON files.
I tried it this way:
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var swig = require('gulp-swig');
// Swig Variables
var common = require('./json/common.json'); // <--- NEW CODE
var optEng = {
load_json: true,
json_path: 'json/',
data: {
locale: 'en_US',
currencyval: 'USD'
}
};
// Tasks
gulp.task('swig-eng', function() {
gulp.src('templates/*.html')
.pipe(swig(common)) // <--- NEW CODE
.pipe(swig(optEng))
.pipe(gulp.dest('./compiled/'));
});
gulp.task('watch', function() {
gulp.watch('templates/*.html', ['swig-eng']);
gulp.watch('includes/*.html', ['swig-eng']);
gulp.watch('json/*.json', ['swig-eng']);
});
gulp.task('build', ['swig-eng', 'watch']);
And I tried it this way:
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var swig = require('gulp-swig');
// Swig Variables
var optEng = {
common: require('./json/common.json'), // <--- NEW CODE
load_json: true,
json_path: 'json/',
data: {
locale: 'en_US',
currencyval: 'USD'
}
};
// Tasks
gulp.task('swig-eng', function() {
gulp.src('templates/*.html')
.pipe(swig(optEng))
.pipe(gulp.dest('./compiled/'));
});
gulp.task('watch', function() {
gulp.watch('templates/*.html', ['swig-eng']);
gulp.watch('includes/*.html', ['swig-eng']);
gulp.watch('json/*.json', ['swig-eng']);
});
gulp.task('build', ['swig-eng', 'watch']);
I have created a ZIP file containing the required file structure:
https://www.dropbox.com/s/psxsdn31rd5177h/Gulp-Swig%20Sample.zip
The gulpfile.js file is the ONLY file that should need to be updated.
require them
You can just require the json files and pass them as local variables to swig
swig.renderFile('/path/to/template.html', {
common: require('path/to/your/common.json'),
index: require('path/to/your/index.json')
// etc
});
Supossing you are...
"including" your header and footer templates as partials, i.e.
index.swig.html
{# ... #}
{% include "header.swig.html" %}
{# ... #}
{% include "footer.swig.html" %}
{# ... #}
They will receive all the local variables, unless you specify a with *whatever* only statement. Check the include docs for further understanding.
{% include "./partial.html" with my_obj only %}
You can...
require all your json files and pass them as local variables, specifying the objects you want to pass into.
swig.renderFile('/path/to/index.swig.html', {
common: require('path/to/your/common.json'),
index: require('path/to/your/index.json'),
header: require('path/to/your/header.json'),
footer: require('path/to/your/footer.json')
// etc
});
And on index.swig.html...
{# ... #}
{% include "header.swig.html" with header only %}
{# ... #}
{% include "footer.swig.html" with footer only %}
{# ... #}
You can use the setup option in gulp-swig which gives you direct access to the swig object. Once you have access, you can read the Swig documentation on how to pass data. Here's an example:
var opts = {
setup: function(swig) {
swig.setDefaults({
locals: {
common: require('path/to/your/common.json'),
header: require('path/to/your/header.json'),
footer: require('path/to/your/footer.json')
}
});
}
};
gulp.task('templates', function() {
gulp.src('./lib/*.html')
.pipe(swig(opts))
.pipe(gulp.dest('./dist/'))
});
This script works:
var page = require('webpage').create();
var html = '<h1>Test</h1><img>'; //works with page.setContent and page.content
//var html = '<h1>Test</h1><img src=".">'; //only works with page.content
page.setContent(html, 'http://github.com');
//page.content = html;
page.render('test.png');
phantom.exit();
but adding a src attribute to the img makes it fail silently (page.render returns false and no image is generated).
Setting page.content directly works in both cases but then relative URLs don't. The same thing happens with other tags that load a resource such as link. It doesn't matter whether the linked resource exists or not. Tested in 1.8.1 and 1.9.2.
Is this a bug or have I misunderstood the API?
You can not render webpage if it is not fully loaded.
When you are setting link or src to <img>, It will try to load image asynchronously.
So, it requires to wait for loading finished.
Try following code.
page.onLoadFinished = function(status) {
page.render('test.png');
phantom.exit();
};
page.setContent(html, 'http://github.com');