I'm setting up Disqus comments on my blog, but I have some problems with AMP templates.
To configure Disqus I need an object that has two variables that I filled using Django, like this:
var disqus_config = function () {
this.page.url = '{{ config.SITEURL }}{{ article.get_absolute_url }}';
this.page.identifier = '{{ article.idx }}';
};
this becomes this:
var disqus_config = function () {
this.page.url = 'http://localhost:8000/desarrollo/agrupar-resultados-con-mysql/';
this.page.identifier = 'd09a0882-74a2-4d66-97d8-63e37172a1b4';
};
I am especially interested in the content of this.page.identifier
.
Now, to implement Disqus in AMP I must place a page in another domain. This page has a script that loads the comments of Disqus, and that has exactly the same configurations.
My problem is that on that server I do not have access to the Django variables , therefore I must access those values via JavaScript.
The AMP URL ends with ... amp
, like this: http://localhost:8000/desarrollo/agrupar-resultados-con-mysql/amp/
, then to get the value of this.page.url
which should be the canonical URL I do this:
this.page.url = window.location.href.slice(0,-4);
... and it works, because I see the expected value in the console.
Problem
But I do not know how to get the value of this.page.identifier
, so I came up with the following.
I have in my template a main
element that is unique and there I will place the UUID in a thing called aria-label
, like this:
<main id="content" role="main" class="" aria-label="{{ article.idx }}">
... that transforms into
<main id="content" role="main" class="" aria-label="d09a0882-74a2-4d66-97d8-63e37172a1b4">
Note: I have no reason to use aria-label
, it seems to me that it does not interfere with anything on the page and the AMP validator does not complain.
Now in my external script, I do this:
var disqus_config = function () {
this.page.url = window.location.href.slice(0,-4);
this.page.identifier = // NO HAGO NADA PORQUE NO SÉ QUE HACER
};
With this.page.url
I have no problems, but I do not know how to get the value stored in aria-label
. Well, I do not even know if it's the best place to store that value.
I can locate the element but for its id
: idx = document.getElementById("content")
, and I see this all , absolutely everything that is between the marks <main>
and </main>
. But I only want the value of aria-label
.
Question
How can I store a value type d09a0882-74a2-4d66-97d8-63e37172a1b4
and how can I retrieve it with a script using only JavaScript in the browser?
Note: I can not use jQuery, only JavaScript.