Sorry, i modified some pubilcations.
https://denim-nectarine-bak7.squarespace.com/
PSW: 1510
I copied the atomatic header fields that i could get, but cant access the real data with my code.
This is whati added so that the data shows on the side:
This is the html block for each page
<div class="collecroce-dataInput" id="metadata-container">
<h2 class="meta-title">
Loading title...
</h2>
<div>
<span style="font-weight:bold">Fecha </span>
<span class="meta-date">Loading date...</span>
</div>
<div>
<span style="font-weight:bold">Autores </span>
<span class="meta-tags">Loading tags...</span>
</div>
<div>
<span style="font-weight:bold">Ubicación </span>
<span class="meta-location">Loading location...</span>
</div>
</div>
This is the script that populates the html when loading
<script>
document.addEventListener("DOMContentLoaded", function () {
const metadataContainer = document.getElementById("article-");
if (!metadataContainer) {
console.log("Metadata container not found.");
return;
}
// Helper function to retrieve content from meta tags by property name
function getMetaContent(property) {
const metaTag = document.querySelector(`meta[property="${property}"]`);
return metaTag ? metaTag.getAttribute("content") : "Not Available";
}
// Function to retrieve content from meta tags by itemprop name
function getMetaContentByItemprop(itemprop) {
const metaTag = document.querySelector(`meta[itemprop="${itemprop}"]`);
return metaTag ? metaTag.getAttribute("content") : "Not Available";
}
// Function to find categories and their links from the page
function findCategories() {
const categoryElements = document.querySelectorAll('.blog-item-category-wrapper a');
const categories = Array.from(categoryElements).map(el => ({
name: el.innerText,
link: el.href
}));
return categories;
}
// Function to find tags and their links from the page
function findTags() {
const tagElements = document.querySelectorAll('.blog-item-tag-wrapper a');
const tags = Array.from(tagElements).map(el => ({
name: el.innerText,
link: el.href
}));
return tags;
}
// Retrieve metadata from the available meta tags
const title = getMetaContent("og:title");
const siteName = getMetaContent("og:site_name");
const latitude = getMetaContent("og:latitude");
const longitude = getMetaContent("og:longitude");
const address = getMetaContent("og:street-address");
const locality = getMetaContent("og:locality");
const region = getMetaContent("og:region");
const postalCode = getMetaContent("og:postal-code");
const country = getMetaContent("og:country-name");
const publishedDate = getMetaContentByItemprop("datePublished"); // Fetching the publication date
const headline = getMetaContentByItemprop("headline");
// Attempt to retrieve categories and tags from the page
const categories = findCategories();
const tags = findTags();
// Find the container divs for displaying the data
const titleDiv = metadataContainer.querySelector(".meta-title");
const dateDiv = metadataContainer.querySelector(".meta-date");
const locationDiv = metadataContainer.querySelector(".meta-location");
const categoryDiv = metadataContainer.querySelector(".meta-category");
const tagDiv = metadataContainer.querySelector(".meta-tags");
// Populate the elements with available meta data
if (titleDiv) titleDiv.innerText = `${headline || "Not Available"}`;
// Extract and display only the year from the published date
if (dateDiv) {
const year = publishedDate ? new Date(publishedDate).getFullYear() : "Not Available";
dateDiv.innerText = `${year}`;
}
// if (locationDiv) locationDiv.innerText = `${locality}, ${address}, ${region}, ${country}`;
if (locationDiv) locationDiv.innerText = `${address}, ${locality}, ${region}, ${country}`;
// Display categories with links and styling similar to the original HTML
if (categoryDiv) {
categoryDiv.innerHTML = categories.map(cat => `
<span class="blog-item-category-wrapper">
<a href="${cat.link}" class="blog-item-category">${cat.name}</a>
</span>
`).join("");
}
// Display tags with links
if (tagDiv) {
tagDiv.innerHTML = `` + tags.map(tag => `<a href="${tag.link}">${tag.name}</a>`).join(", ");
}
});
</script>
<script>
//mapa
function getCoordinates() {
const latitude = document.querySelector('meta[property="og:latitude"]');
const longitude = document.querySelector('meta[property="og:longitude"]');
if (latitude && longitude) {
return [latitude.getAttribute('content'), longitude.getAttribute('content')];
}
return null;
}
function updateMapBlock(lat, lng) {
const mapBlock = document.querySelector('[title]');
if (mapBlock) {
mapBlock.setAttribute('title', `${lat},${lng}`);
mapBlock.setAttribute('aria-label', `${lat},${lng}`);
}
}
document.addEventListener('DOMContentLoaded', function() {
const coordinates = getCoordinates();
if (coordinates) {
const [lat, lng] = coordinates;
updateMapBlock(lat, lng);
}
});
</script>
