SEO optimization
1. added critical JS and CSS inline
This commit is contained in:
parent
9438467d67
commit
80d1a46f6c
@ -1,4 +1,35 @@
|
||||
<div id="remark42">
|
||||
</div>
|
||||
|
||||
<script src="{{ '/assets/js/comments/remark42.js' | relative_url }}"></script>
|
||||
<script>
|
||||
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');
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- <script src="{{ '/assets/js/comments/remark42.js' | relative_url }}"></script> -->
|
||||
@ -6,41 +6,39 @@
|
||||
<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"
|
||||
>
|
||||
<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 %}
|
||||
{% seo title=false %}
|
||||
{% endcapture %}
|
||||
|
||||
{% if page.image %}
|
||||
{% assign img = page.image.path | default: 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 %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% assign seo_tags = seo_tags | replace: target, replacement %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
|
||||
{{ seo_tags }}
|
||||
|
||||
<title>
|
||||
{%- unless page.layout == 'home' -%}
|
||||
{{ page.title | append: ' | ' }}
|
||||
{{ page.title | append: ' | ' }}
|
||||
{%- endunless -%}
|
||||
{{ site.title }}
|
||||
</title>
|
||||
@ -48,24 +46,24 @@
|
||||
{% 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">
|
||||
<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 %}
|
||||
{% 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 }}">
|
||||
<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.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">
|
||||
<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
|
||||
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
|
||||
{% endif %}
|
||||
|
||||
<!-- Bootstrap -->
|
||||
@ -77,20 +75,41 @@
|
||||
<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 }}">
|
||||
<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 }}">
|
||||
<!-- Manific Popup -->
|
||||
<link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">
|
||||
{% endif %}
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="{{ '/assets/js/common.js' | relative_url }}" serviceurl="{{site.custom-config.blog-services.service_url}}" siteid="{{site.id}}" postid="{{page.title}}" remark42host="{{ site.comments.remark42.host }}"></script>
|
||||
<script>
|
||||
var serviceUrl = "{{site.custom-config.blog-services.service_url}}";
|
||||
var siteId = "{{site.id}}";
|
||||
var postId = "{{page.title}}";
|
||||
var remark42Host = "{{ site.comments.remark42.host }}";
|
||||
|
||||
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();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- <script src="{{ '/assets/js/common.js' | relative_url }}"
|
||||
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 %}
|
||||
{% include mode-toggle.html %}
|
||||
{% endunless %}
|
||||
|
||||
{% include metadata-hook.html %}
|
||||
</head>
|
||||
</head>
|
||||
@ -1,7 +1,81 @@
|
||||
<link rel="stylesheet" href="{{ '/assets/css/heart.css' | relative_url }}">
|
||||
<!-- <link rel="stylesheet" href="{{ '/assets/css/heart.css' | relative_url }}"> -->
|
||||
|
||||
<style>
|
||||
.heart-icon {
|
||||
margin-bottom: -41px;
|
||||
margin-right: -40px;
|
||||
display: inline-flex;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: url("{{ '/assets/img/custom/heart.png' | relative_url }}") no-repeat;
|
||||
background-position: 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.heart-icon.liked {
|
||||
animation: like-anim 0.7s steps(28) forwards;
|
||||
}
|
||||
|
||||
@keyframes like-anim {
|
||||
to {
|
||||
background-position: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<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"></em>
|
||||
|
||||
<script src="{{ '/assets/js/likes.js' | relative_url }}"></script>
|
||||
<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;
|
||||
|
||||
function onLoadAndClick() {
|
||||
likesLoader.style.display = "inline-flex"
|
||||
likesCount.style.display = "none";
|
||||
heartIcon.style.pointerEvents = 'none';
|
||||
}
|
||||
|
||||
function apiCall(url, event) {
|
||||
onLoadAndClick();
|
||||
ajax(url)
|
||||
.then(function (result) {
|
||||
console.log(result);
|
||||
if (event === "click") {
|
||||
heartIcon.classList.toggle("liked");
|
||||
}
|
||||
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-flex";
|
||||
});
|
||||
}
|
||||
|
||||
var apiUrl = serviceUrl + "/GetPostLikes?siteId=" + siteId + "&postId=" + postId;
|
||||
|
||||
apiCall(apiUrl);
|
||||
|
||||
heartIcon.addEventListener("click", () => {
|
||||
if (!heartIcon.classList.contains("liked")) {
|
||||
apiUrl = serviceUrl + "/LikePost?siteId=" + siteId + "&postId=" + postId;
|
||||
} else {
|
||||
apiUrl = serviceUrl + "/DislikePost?siteId=" + siteId + "&postId=" + postId;
|
||||
}
|
||||
|
||||
apiCall(apiUrl, "click");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- <script src="{{ '/assets/js/likes.js' | relative_url }}"></script> -->
|
||||
@ -4,5 +4,24 @@
|
||||
<em id="views-count" style="margin-right: 12px">
|
||||
</em>
|
||||
|
||||
<script src="{{ '/assets/js/views.js' | relative_url }}">
|
||||
</script>
|
||||
<script>
|
||||
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";
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- <script src="{{ '/assets/js/views.js' | relative_url }}">
|
||||
</script> -->
|
||||
Loading…
Reference in New Issue
Block a user