1. theme toggle issue in mobile fixed
2. Code refactoring
This commit is contained in:
parent
08cdbcdd82
commit
59fda443de
@ -1,40 +1,4 @@
|
||||
<script>
|
||||
var remark_config = {
|
||||
host: "{{ site.comments.remark42.host }}",
|
||||
site_id: '{{ site.id }}',
|
||||
components: ['embed'],
|
||||
|
||||
max_shown_comments: 10,
|
||||
// theme: 'light',
|
||||
theme: document.documentElement.hasAttribute("data-mode") ? "dark" : "light",
|
||||
|
||||
locale: 'en',
|
||||
show_email_subscription: false
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
(function (c) {
|
||||
for (var i = 0; i < c.length; i++) {
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = remark_config.host + '/web/' + c[i] + '.js';
|
||||
s.defer = true;
|
||||
(d.head || d.body).appendChild(s);
|
||||
}
|
||||
})(remark_config.components || ['embed']);
|
||||
|
||||
var targetDiv = document.getElementById("sidebar").getElementsByClassName("mode-toggle")[0];
|
||||
|
||||
if (targetDiv != null) {
|
||||
targetDiv.addEventListener("click", () => {
|
||||
if (document.documentElement.hasAttribute("data-mode")) {
|
||||
window.REMARK42.changeTheme('light');
|
||||
} else {
|
||||
window.REMARK42.changeTheme('dark');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div id="remark42">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/assets/js/comments/remark42.js"></script>
|
||||
96
_includes/head.html
Normal file
96
_includes/head.html
Normal file
@ -0,0 +1,96 @@
|
||||
<!-- The Head -->
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
|
||||
>
|
||||
|
||||
{% capture seo_tags %}
|
||||
{% seo title=false %}
|
||||
{% endcapture %}
|
||||
|
||||
{% if page.image %}
|
||||
{% assign img = page.image.path | default: page.image %}
|
||||
|
||||
{% unless img contains '://' %}
|
||||
{% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %}
|
||||
{% capture target %}"{{ img | absolute_url }}"{% endcapture %}
|
||||
|
||||
{% if site.img_cdn contains '//' %}
|
||||
<!-- it's a cross-origin URL -->
|
||||
{% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %}
|
||||
{% else %}
|
||||
<!-- it's a local file path -->
|
||||
{%- capture replacement -%}
|
||||
"{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}"
|
||||
{%- endcapture -%}
|
||||
{% endif %}
|
||||
|
||||
{% assign seo_tags = seo_tags | replace: target, replacement %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
|
||||
{{ seo_tags }}
|
||||
|
||||
<title>
|
||||
{%- unless page.layout == 'home' -%}
|
||||
{{ page.title | append: ' | ' }}
|
||||
{%- endunless -%}
|
||||
{{ site.title }}
|
||||
</title>
|
||||
|
||||
{% include_cached favicons.html %}
|
||||
|
||||
{% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
|
||||
<link href="{{ site.data.origin[type].webfonts | relative_url }}" rel="stylesheet">
|
||||
|
||||
{% else %}
|
||||
{% for cdn in site.data.origin[type].cdns %}
|
||||
<link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
|
||||
<link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
|
||||
{% endfor %}
|
||||
|
||||
<link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
|
||||
{% endif %}
|
||||
|
||||
<!-- GA -->
|
||||
{% if jekyll.environment == 'production' and site.google_analytics.id != empty and site.google_analytics.id %}
|
||||
<link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
|
||||
<link rel="dns-prefetch" href="https://www.google-analytics.com">
|
||||
|
||||
<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
|
||||
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
|
||||
{% endif %}
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url}}">
|
||||
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="{{ site.data.origin[type].fontawesome.css | relative_url }}">
|
||||
|
||||
<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
|
||||
|
||||
{% if site.toc and page.toc %}
|
||||
<link rel="stylesheet" href="{{ site.data.origin[type].toc.css | relative_url }}">
|
||||
{% endif %}
|
||||
|
||||
{% if page.layout == 'page' or page.layout == 'post' %}
|
||||
<!-- Manific Popup -->
|
||||
<link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">
|
||||
{% endif %}
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="/assets/js/common.js" serviceurl="{{site.custom-config.blog-services.service_url}}" siteid="{{site.id}}" postid="{{page.title}}" remark42host="{{ site.comments.remark42.host }}"></script>
|
||||
|
||||
{% unless site.theme_mode %}
|
||||
{% include mode-toggle.html %}
|
||||
{% endunless %}
|
||||
|
||||
{% include metadata-hook.html %}
|
||||
</head>
|
||||
@ -2,33 +2,6 @@
|
||||
<i class="heart-icon" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.likes}}"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
|
||||
{% include loader.html id="likes-loader" %}
|
||||
<em id="likes-count">125</em>
|
||||
<em id="likes-count"></em>
|
||||
|
||||
<script>
|
||||
const heartIcon = document.querySelector(".heart-icon");
|
||||
const likesCount = document.getElementById("likes-count");
|
||||
const likesLoader = document.getElementById("likes-loader");
|
||||
|
||||
likesLoader.style.display = "none"
|
||||
|
||||
let likesAmount = likesCount.innerHTML;
|
||||
|
||||
heartIcon.addEventListener("click", () => {
|
||||
likesLoader.style.display = "inline-flex"
|
||||
likesCount.style.display = "none";
|
||||
heartIcon.style.pointerEvents = 'none';
|
||||
setTimeout(function(){
|
||||
heartIcon.classList.toggle("liked");
|
||||
if (heartIcon.classList.contains("liked")) {
|
||||
likesAmount++;
|
||||
} else {
|
||||
likesAmount--;
|
||||
}
|
||||
|
||||
likesCount.innerHTML = likesAmount;
|
||||
likesLoader.style.display = "none"
|
||||
likesCount.style.display = "inline-flex";
|
||||
heartIcon.style.pointerEvents = 'auto';
|
||||
}, 1000);
|
||||
});
|
||||
</script>
|
||||
<script src="/assets/js/likes.js"></script>
|
||||
@ -1 +1 @@
|
||||
<i id="{{include.id}}" class="fa-solid fa-circle-notch fa-spin"></i>
|
||||
<i id="{{include.id}}" class="fa-solid fa-circle-notch fa-spin" {% if include.style %} style="{{include.style}}" {% endif %}></i>
|
||||
@ -1,39 +1,8 @@
|
||||
<i class="fa fa-eye fa-fw me-1" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.views}}"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
|
||||
{% include loader.html id="views-loader" %}
|
||||
{% include loader.html id="views-loader" style="margin-right: 12px" %}
|
||||
<em id="views-count" style="margin-right: 12px">
|
||||
</em>
|
||||
|
||||
<script>
|
||||
const viewsCount = document.getElementById("views-count");
|
||||
const viewsLoader = document.getElementById("views-loader");
|
||||
|
||||
viewsCount.style.display = "none";
|
||||
viewsLoader.style.display = "inline-block"
|
||||
|
||||
function ajax(url) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onload = function () {
|
||||
resolve(this.responseText);
|
||||
};
|
||||
xhr.onerror = reject;
|
||||
xhr.open('GET', url);
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
var siteId = "{{ site.id }}";
|
||||
var postId = "{{ page.title }}";
|
||||
|
||||
ajax("{{site.custom-config.blog-services.service_url}}/GetPostViews?siteId=" + siteId + "&postId=" + postId)
|
||||
.then(function (result) {
|
||||
console.log(result); // Code depending on result
|
||||
viewsCount.innerText = result;
|
||||
viewsLoader.style.display = "none";
|
||||
viewsCount.style.display = "inline-block";
|
||||
})
|
||||
.catch(function () {
|
||||
// An error occurred
|
||||
});
|
||||
<script src="/assets/js/views.js">
|
||||
</script>
|
||||
@ -34,7 +34,6 @@ tail_includes:
|
||||
|
||||
<!-- post counter -->
|
||||
<div>
|
||||
<!-- {{ site.data.locales[lang].post.views }} -->
|
||||
{% include views.html tooltip=true lang=lang %}
|
||||
{% include likes.html tooltip=true lang=lang %}
|
||||
</div>
|
||||
|
||||
28
assets/js/comments/remark42.js
Normal file
28
assets/js/comments/remark42.js
Normal file
@ -0,0 +1,28 @@
|
||||
var remark_config = {
|
||||
host: remark42Host,
|
||||
site_id: siteId,
|
||||
components: ['embed'],
|
||||
|
||||
max_shown_comments: 10,
|
||||
theme: modeToggle.modeStatus,
|
||||
|
||||
locale: 'en',
|
||||
show_email_subscription: false
|
||||
};
|
||||
|
||||
(function (c) {
|
||||
for (var i = 0; i < c.length; i++) {
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = remark_config.host + '/web/' + c[i] + '.js';
|
||||
s.defer = true;
|
||||
(d.head || d.body).appendChild(s);
|
||||
}
|
||||
})(remark_config.components || ['embed']);
|
||||
|
||||
var targetDiv = document.getElementById("sidebar").getElementsByClassName("mode-toggle")[0];
|
||||
|
||||
if (targetDiv != null) {
|
||||
targetDiv.addEventListener("click", () => {
|
||||
window.REMARK42.changeTheme(modeToggle.modeStatus === 'light' ? 'dark' : 'light');
|
||||
})
|
||||
}
|
||||
16
assets/js/common.js
Normal file
16
assets/js/common.js
Normal file
@ -0,0 +1,16 @@
|
||||
var serviceUrl = document.currentScript.getAttribute('serviceurl');
|
||||
var siteId = document.currentScript.getAttribute('siteid');
|
||||
var postId = document.currentScript.getAttribute('postid');
|
||||
var remark42Host = document.currentScript.getAttribute('remark42host');
|
||||
|
||||
function ajax(url) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onload = function () {
|
||||
resolve(this.responseText);
|
||||
};
|
||||
xhr.onerror = reject;
|
||||
xhr.open('GET', url);
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
41
assets/js/likes.js
Normal file
41
assets/js/likes.js
Normal file
@ -0,0 +1,41 @@
|
||||
const heartIcon = document.querySelector(".heart-icon");
|
||||
const likesCount = document.getElementById("likes-count");
|
||||
const likesLoader = document.getElementById("likes-loader");
|
||||
|
||||
likesLoader.style.display = "none"
|
||||
|
||||
let likesAmount = likesCount.innerHTML;
|
||||
|
||||
function apiCall(url) {
|
||||
ajax(url)
|
||||
.then(function (result) {
|
||||
console.log(result);
|
||||
likesCount.innerHTML = result;
|
||||
likesLoader.style.display = "none"
|
||||
likesCount.style.display = "inline-flex";
|
||||
heartIcon.style.pointerEvents = 'auto';
|
||||
})
|
||||
.catch(function () {
|
||||
likesLoader.style.display = "none";
|
||||
likesCount.style.display = "inline-block";
|
||||
});
|
||||
}
|
||||
|
||||
var apiUrl = serviceUrl + "/GetPostLikes?siteId=" + siteId + "&postId=" + postId;
|
||||
|
||||
apiCall(apiUrl);
|
||||
|
||||
heartIcon.addEventListener("click", () => {
|
||||
likesLoader.style.display = "inline-flex"
|
||||
likesCount.style.display = "none";
|
||||
heartIcon.style.pointerEvents = 'none';
|
||||
|
||||
heartIcon.classList.toggle("liked");
|
||||
if (heartIcon.classList.contains("liked")) {
|
||||
apiUrl = serviceUrl + "/LikePost?siteId=" + siteId + "&postId=" + postId;
|
||||
} else {
|
||||
apiUrl = serviceUrl + "/DislikePost?siteId=" + siteId + "&postId=" + postId;
|
||||
}
|
||||
|
||||
apiCall(apiUrl);
|
||||
});
|
||||
16
assets/js/views.js
Normal file
16
assets/js/views.js
Normal file
@ -0,0 +1,16 @@
|
||||
const viewsCount = document.getElementById("views-count");
|
||||
const viewsLoader = document.getElementById("views-loader");
|
||||
|
||||
viewsCount.style.display = "none";
|
||||
viewsLoader.style.display = "inline-block"
|
||||
|
||||
ajax(serviceUrl + "/GetPostViews?siteId=" + siteId + "&postId=" + postId)
|
||||
.then(function (result) {
|
||||
viewsCount.innerText = result;
|
||||
viewsLoader.style.display = "none";
|
||||
viewsCount.style.display = "inline-block";
|
||||
})
|
||||
.catch(function () {
|
||||
viewsLoader.style.display = "none";
|
||||
viewsCount.style.display = "inline-block";
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user