I have followed the instruction on the Disqus page on how to install disqus comment but, it does not load up when I deploy my blog site.
I put the disqus universal code into the includes folder and then added it in the post.html file.
I changed the following code in the universal disqus code:
var disqus_config = function () {
this.page.url = {{ site.url }}{{ page.url }}; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = {{ page.url }}; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
In the post.html file I have:
{% include comments.html %}
Is there something else I am missing?
var disqus_config = function () {
this.page.url = "{{ site.url }}{{ page.url }}"; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = "{{ page.url }}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
I had to put the this.page.url into strings quotes as you can see from the code above. The same goes for the this.page.identifier
Related
I have to make a string of values separated by semicolons and pass this string to a script in HTML include to then parse and output the result.
My jekyll markdown page:
---
layout: page
title: Our team
permalink: /team
---
{% assign cfhandles=""%}
{% for person in site.data.team-handles %}
{{ cfhandles | append: person.handle }}
{{ cfhandles | append: ";" }}
{% endfor %}
{% include load-ratings.html cfhandles=cfhandles %}
My load-ratings.html:
<script>
let url = "https://codeforces.com/api/user.info?handles=";
let handles = "{{ include.cfhandles }}";
console.log(handles);
url = url + handles;
console.log(url);
async function load() {
let obj = await (await fetch(url)).json();
console.log(obj);
for (let cur_user of obj["result"]) {
let cur_handle = cur_user["handle"];
let user_rating = cur_user["rating"];
document.getElementById(cur_handle.toLowerCase()).innerHTML = "Рейтинг: " + user_rating;
}
}
load();
</script>
My team-handles.yml:
- handle: bob1
name: Bob
- handle: alice2
name: Alice
When I open the developer console, it shows me that in JS the handles variable is empty (but it shouldn't be like that). How do I pass the needed string to the file so it shows correctly?
I already tried using {%- -%} Liquid tags, but it didn't change the result.
Try this:
{% assign cfhandles=""%}
{% for person in site.data.team-handles %}
{% assign cfhandles = cfhandles | append: person.handle | append: ";" %}
{% endfor %}
{% include load-ratings.html cfhandles=cfhandles %}
The code basically assigns the new strings bob1; and alice2; to the existing variable.
I need to extract the filename portion of the page url, that is from a post saved in 2011-12-31-new-years-eve-is-awesome.md I would like to just the part new-years-eve-is-awesome .
Unfortunately post_url contains also the directory tree 2011/12/31/
This page https://jekyllrb.com/docs/permalinks/ seems to suggest that defining
---
shorttitle: :title
---
in the front matter should work but that produces an empty string from {{ post.shorttitle }}
Here is my solution so far. Perhaps there is a variable left in the code but it's not documented, therefore I just filter the post URL:
{% assign spliturl = post.url | split: '/' %}
{% assign postname = spliturl[4] | replace: '.html', '' %}
{{ postname }}
I use Metalsmith with Nunjucks in a static site generator. In the project, I am importing a Nunjucks macro into a file and trying to invoke it using {{ someMacro }}. However, in the resulting HTML file, "{{ someMacro }}" gets printed as a string instead of the markup inside the macro.
I've also tried {% set someVariable = "abc" %}, and invoke the variable with {{ someVariable}}, both in the same file, but I get the same issue with "{{ someVariable }}" being printed right into HTML.
I've tried invoking both inside in a {% block xyz%} {% endblock %}. Any ideas?
I found my own answer. In the project I'm working on, we use Metalsmith in-place, and there our engineOptions looks like this:
const templateConfig = {
engineOptions: {
filters: {},
tags: {
variableStart: '<<<',
variableEnd: '>>>',
}
}
};
Instead of using {{ }} to use variables or macros, I just had to use <<< >>> to call variables or macros in the main file, and likewise when passing arguments into macros in macro files.
I'm new with django and i'm trying to update fields in my view without redirecting, i'm trying to return a JSON file when a view function is called, but i can't seem to find how to do so withouth redirecting to some url.
I think it may have something to do with my urls.py: ... path('#', views.myFunction, name='myFunctionName').
I'm messing arround with the django tutorial that appears in djangoproject.com
<h1>{{ question.question_text }}</h1>
<ul>
{% for choice in question.choice_set.all %}
<li>{{ choice.choice_text }} -- {{ choice.votes }} vote{{ choice.votes|pluralize }}</li
{% endfor %}
</ul>
Vote again?
doFunction
my view function goes like this:
def myfunction(request):
return JsonResponse({'ayy':'lmao'})
and the urls.py:
from django.urls import path
from . import views
app_name = 'polls'
urlpatterns = [
path('', views.IndexView.as_view(), name='index'),
path('<int:pk>/', views.DetailView.as_view(), name='detail'),
path('<int:pk>/results/', views.ResultsView.as_view(), name='results'),
path('<int:question_id>/vote/', views.vote, name='vote'),
path(r'#', views.myfunction, name='myfunction'),
path('form', views.FormView.as_view(), name='form'),
So what is most likely happening here is the Django URLS is finding the index page and redirecting to that view. The # pound or number symbol usually indicates a redirect in page.
First, there's no AJAX in your code. doFunction will redirect to an entire new page.
Second, your path to myfunction in urls.py is not correct.
Here's an example of what you can do. I also suggest you to read this. I use JQuery but feel free to adapt with what you prefer.
urls.py:
#...
path('ajax/domyfunction/', views.myfunction, name='myfunction')
]
html template:
<h1>{{ question.question_text }}</h1>
<ul>
{% for choice in question.choice_set.all %}
<li>{{ choice.choice_text }} -- {{ choice.votes }} vote{{ choice.votes|pluralize}}</li
{% endfor %}
</ul>
Vote again?
<button id="b_function">doFunction</button>
<script>
$("#b_function").click(function () {
$.ajax({
url: '{% url "polls:myfunction" %}',
dataType: 'json',
success: function (data) {
alert(data.ayy);
}
});
});
</script>
Is it possible to integrate disqus html comments in a blog using github-pages? I like the idea of using github, jekyll and markdown to manage my site and blog for simplicity. However, I'd like to include disqus commenting capability. However, since markdown generates the html - how do I include the html/js code for disqus ?
The easiest and cleanest way to do it is to create a partial with the HTML that disqus provides in your _includes/ folder (e.g. _includes/disqus.html) and then just including it in your posts layout file (e.g. _layouts/post.md):
{% include disqus.html %}
You can see an example here: post layout and disqus partial.
There is an "official" way to accomplish this task. You can find the Disqus indication at this link. In details, the procedure is the following:
Add a variable called comments to the YAML Front Matter (i.e. the header of your post file) and set its value to true. A sample front matter might look like:
layout: default
comments: true
# other options
Create a new template file (i.e. disqus.html) and put the Universal Embed Code there between {% if page.comments %} and {%- endif -%}.
Include the disqus.html file into your post template.
Hope it helps :)
Include the disqus comment in your post.html, and set an identifier for the comment count link:
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '<your-disqus-name>';
var disqus_identifier = '{{ page.id }}';
...
</script>
In your default.html template include the comment count script:
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '<your-disqus-name>';
...
</script>
Then add the link to the comments using the data-disqus-identifier attribute, so that the comment count will show up after each post in your blog's main page:
Leave a comment
To summarise:
Use 3rd comment service Disqus, create one its account
Associate your site, that is your github site, with disqus
Get Disqus shortname in admin/settings/general/
Edit your _config.yml of github, make sure it contains following content:
disqus:
shortname: <your disqus short name>
Make sure there is disqus.html under _includes and it looks like:
{% if page.comments %}
<div class="comments">
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '{{ site.disqus.shortname }}';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
</div>
{% endif %}
Include disqus.html in _layouts/post.html
To enable comment, add comments:true on your post yaml front matter.
Disable it by setting comments: false or by not including the comments option at all.
Open config.yml and add the following line of code
disqus_shortname: username. Replace username with your Disqus shortname.
Create a file called disqus_comments.html in Jekyll’s _includes folder and add your Disqus Universal Embed Code in between a {% if page.comments %} and a {% endif %} liquid tag
{% raw %}{% if page.comments != false %}
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '{{ site.disqus_shortname }}';
var disqus_identifier = '{{ page.url }}';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
{% endif %}{% endraw %}
You simply add comments: false in any posts front-matter to turn off that post comments.
Finally, open your post.html file and add the following liquid include tag just after the end </article> tag.
{% if site.disqus_shortname %}
{% include disqus_comments.html %}
{% endif %}
You can follow my detailed blog post on how to add Disqus comments to Jekyll if you get stuck.
That's true Jekyll will render HTML from your Markdown files (locally using Jekyll or remotely by pushing to gh-pages). However it doesn't really matter as this kind of code has to be in a layer, so not in the Markdown source file.
_layouts
`- default.html
`- post.html <- `layout: default` in the YAML header
_posts
`- YYYY-MM-DD-my-post.md <- `layout: post` in the YAML header
By following this tree view, you'll able to render your Markdown files by using your post layout, which can contain your Disqus script.