شرح إضافة ميزة حفظ الموضوع كأشارة مرجعية علي بلوجر عادةً ما يستخدم القراء الإشارات المرجعية لتحديد مواقعهم المفضلة لقراءتها لأحقاً. كما نعلم ، الإشارات المرجعية هي تسهيلات موجودة في متصفح مثل Google Chrome و Mozilla و Internet Explorer و Opera و المتصفحات الأخرى لتخزين عنوان أو اسم موقع وتصنيف عناوين url وفقًا للموضوع أو السمة المحددة حتى يتمكن القراء من لم تعد بحاجة إلى حفظ عنوان URL لمقال موقع الويب طويل جدًا.
لاستخدام ميزة الإشارة المرجعية بسرعة في المتصفح ، عادةً ما تضغط على Ctr + D لإضافة الموقع إلى قائمة المفضلة الموجودة في الإشارة المرجعية.
في هذه الموضوع، سأقدم لكم شرح يبحث عنه الكثير، وخاصة مصممي قوالب المدونات. فكرت في إنشاء هذه الميزة لأنني رأيت العديد من الأشخاص يبحثون عن هذه الأضافة
في ميزة الإشارة المرجعية هذه ، أستخدم نظام التخزين المحلي Localstorge كتخزين لنشاط المستخدم حيث يمكن لهذا النظام تخزين بيانات القارئ مثل coockies (البيانات المخزنة في المتصفح) بحيث يتم إضافة قائمة المقالات المفضلة بواسطة لن يضيع المستخدم حتى لو تم تحديثه. أو نقل الصفحات داخل المجال.
التثبيت
لا تنسي أخذ نسخة إحتياطية من القالب
انتقل إلى لوحة تحكم بلوجر المظهر انقر فوق وقم بإتباع التعليمات التالية
للبحث في أي شيء في بلوجر اضغط على Ctrl + F واكتب أو الصق المصطلح للبحث في شريط البحث.
نظرًا لأنني أنشأت ميزة الإشارة المرجعية هذه باستخدام jQuery ، فيرجي التأكد من
أنك قمت بتثبيت كود jQuery أدناه أعلى الوسم </ head> أو
</body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
الخطوة التالية هي نسخ كود css أدناه ثم وضعه فوق الوسم
]]> </ b: skin>
.alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba;position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem;width:100%}.pop-area::-webkit-scrollbar{display:none}.pop-area{display:flex!important;width:100%;height:100%;position:fixed;top:0;right:0;background:rgb(0 0 0 / 51%);visibility:hidden;opacity:0;transition:all .25s ease-in-out;z-index:999999;overflow-y:scroll}.pop-area.open{opacity:1;visibility:visible}.pop-html{background:#fff;padding-bottom:10px;display:block;margin:auto auto;width:calc(100% - 20px);max-width:500px;visibility:hidden;opacity:0;overflow:hidden;transition:all .5s ease-in-out;transform:scale(.5);border-radius:7px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)}.pop-area.open .pop-html{opacity:1;transform:scale(1);visibility:visible}.head-pop{width:-webkit-fill-available;padding:12px 30px;overflow:hidden;background:#d3f6f3}.close-btn{float:left;cursor:pointer;fill:#7e7e7e}.body-content{padding:10px}.text-center{display:grid;text-align:center;grid-gap:15px}.text-center svg{margin:0 auto}.btn.btn-outline-info{width:fit-content;margin:0 auto;text-decoration:none}.table{width:100%;border:1px solid #acdcd8;border-radius:7px;margin:5px 0;padding:5px}.table img{border-radius:4px;width:auto}.table a{text-decoration:none}.img-right{width:1px}.item-right{vertical-align:-webkit-baseline-middle;padding-left:10px}.btn-remove{cursor:pointer}.show-bookmark{color:#fff;background-color:#007bff;position:relative;top:-20px;left:10px;font-size:50%;padding:.15em .3em;display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:50%;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.mint-bookmark-btn,.btn-outline-info{position:relative;display:inline-block;box-sizing:border-box;border:0;border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;text-transform:uppercase;color:rgb(var(--pure-material-onprimary-rgb,255,255,255));background-color:rgb(var(--pure-material-primary-rgb,33,150,243));box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);font-family:var(--pure-material-font,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;overflow:hidden;outline:0;cursor:pointer;transition:box-shadow .2s}.mint-bookmark-btn::-moz-focus-inner{border:0}.mint-bookmark-btn svg{vertical-align:middle}
الأن قم بالنزول إلي الأسفل عند الوسم </body> وقم بوضع كود
جافاسكريبت التالي أعل الوسم </body>
<script>
//<![CDATA[
/*
* mint Bookmark
* Copyright (c) 2020 https://www.imintweb.com
* No Licensed & Open source Code
* jQuery library
*/
// variable empty content
var massgEmpty = ('قائمة المقالات المفضلة غير متوفرة بعد'),
articleLabel = ('كل المحتوى'),
link_articleLabel = ('https://www.imintweb.com/');
(function ($) {
"use strict";
var OptionManager = (function () {
var objToReturn = {};
var defaultOptions = {
bookmarkIcon: 'bookmarkIcon',
bookmarkBadge: 'show-bookmark',
articleQuantity: 'article-quantity',
affixBookmarkIcon: true,
showBookmarkModal: true,
clickOnAddToBookmark: function($addTobookmark) { },
clickOnbookmarkIcon: function($bookmarkIcon, konten ) { },
};
var getOptions = function (customOptions) {
var options = $.extend({}, defaultOptions);
if (typeof customOptions === 'object') {
$.extend(options, customOptions);
}
return options;
}
objToReturn.getOptions = getOptions;
return objToReturn;
}());
var articleManager = (function(){
var objToReturn = {};
localStorage.konten = localStorage.konten ? localStorage.konten : "";
var getIndexOfarticle = function(id){
var articleIndex = -1;
var konten = getAllkonten();
$.each(konten, function(index, value){
if(value.id == id){
articleIndex = index;
return;
}
});
return articleIndex;
}
var setAllkonten = function(konten){
localStorage.konten = JSON.stringify(konten);
}
var addarticle = function(id, title, link, summary, quantity, borkimage) {
var konten = getAllkonten();
konten.push({
id: id,
title: title,
link: link,
summary: summary,
quantity: quantity,
borkimage: borkimage
});
setAllkonten(konten);
}
var getAllkonten = function(){
try {
var konten = JSON.parse(localStorage.konten);
return konten;
} catch (e) {
return [];
}
}
var updatePoduct = function(id, quantity) {
var articleIndex = getIndexOfarticle(id);
if(articleIndex < 0){
return false;
}
var konten = getAllkonten();
konten[articleIndex].quantity = typeof quantity === "undefined" ? konten[articleIndex].quantity : quantity;
setAllkonten(konten);
return true;
}
var setarticle = function(id, title, link, summary, quantity, borkimage) {
if(typeof id === "undefined"){
console.error("id required")
return false;
}
if(typeof title === "undefined"){
console.error("title required")
return false;
}
if(typeof link === "undefined"){
console.error("link required")
return false;
}
if(typeof borkimage === "undefined"){
console.error("borkimage required")
return false;
}
summary = typeof summary === "undefined" ? "" : summary;
if(!updatePoduct(id)){
addarticle(id, title, link, summary, quantity, borkimage);
}
}
var cleararticle = function(){
setAllkonten([]);
}
var removearticle = function(id){
var konten = getAllkonten();
konten = $.grep(konten, function(value, index) {
return value.id != id;
});
setAllkonten(konten);
}
var getTotalQuantity = function(){
var total = 0;
var konten = getAllkonten();
$.each(konten, function(index, value){
total += value.quantity;
});
return total;
}
objToReturn.getAllkonten = getAllkonten;
objToReturn.updatePoduct = updatePoduct;
objToReturn.setarticle = setarticle;
objToReturn.cleararticle = cleararticle;
objToReturn.removearticle = removearticle;
objToReturn.getTotalQuantity = getTotalQuantity;
return objToReturn;
}());
var loadBookmarkEvent = function(userOptions){
var options = OptionManager.getOptions(userOptions);
var $bookmarkIcon = $("." + options.bookmarkIcon);
var $bookmarkBadge = $("." + options.bookmarkBadge);
var articleQuantity = options.articleQuantity;
var idBookmarkModal = 'cart-modal';
var idbookmarkTable = 'cart-table';
var idEmptyBookmarkMessage = 'cart-empty-message';
var AffixMybookmarkIcon = 'bookmarkIcon-affix';
$bookmarkBadge.text(articleManager.getTotalQuantity());
if(!$("#" + idBookmarkModal).length) {
$('body').append(
'<div class="pop-area" id="' + idBookmarkModal + '">' +
'<div class="pop-html">' +
'<div class="head-pop"><a class="close-btn buka-tutup">X</a></div>' +
'<div class="body-content">' +
'<span class="table-responsive" id="' + idbookmarkTable + '"></span>' +
'</div>' +
'</div>' +
'</div>'
);
}
var drawTable = function(){
var $bookmarkTable = $("#" + idbookmarkTable);
$bookmarkTable.empty();
var konten = articleManager.getAllkonten();
$.each(konten, function(){
$bookmarkTable.append(
'<table class="table">' +
'<tbody>' +
'<tr title="' + this.summary + '" data-id="' + this.id + '">' +
'<td class="item-left img-left"><img width="60px" height="60px" src="' + this.borkimage + '"/></td>' +
'<td class="item-left"><a href="' + this.link + '" class="btn-remove">' + this.title + '</a></td>' +
'<td class="item-left" title="Remove favorit" class="text-center" style="width: 30px;"><a class="btn-remove"><svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-trash-fill text-danger" fill="currentColor"><path fill-rule="evenodd" d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z"/></svg></a></td>' +
'</tr>' +
'</tbody>' +
'</table>'
);
});
$bookmarkTable.append(konten.length ? '':
'<div role="alert" id="' + idEmptyBookmarkMessage + '"><div class="text-center"><svg width="80" height="80" viewBox="0 0 24 24"><path d="M19,2L14,6.5V17.5L19,13V2M6.5,5C4.55,5 2.45,5.4 1,6.5V21.16C1,21.41 1.25,21.66 1.5,21.66C1.6,21.66 1.65,21.59 1.75,21.59C3.1,20.94 5.05,20.5 6.5,20.5C8.45,20.5 10.55,20.9 12,22C13.35,21.15 15.8,20.5 17.5,20.5C19.15,20.5 20.85,20.81 22.25,21.56C22.35,21.61 22.4,21.59 22.5,21.59C22.75,21.59 23,21.34 23,21.09V6.5C22.4,6.05 21.75,5.75 21,5.5V7.5L21,13V19C19.9,18.65 18.7,18.5 17.5,18.5C15.8,18.5 13.35,19.15 12,20V13L12,8.5V6.5C10.55,5.4 8.45,5 6.5,5V5Z" fill="#007bff"/></svg><center>' + massgEmpty + '</center><a class="btn btn-outline-info m-2" href="' + link_articleLabel + '">' + articleLabel + '</a></div></div>'
);
}
var showModal = function(){
drawTable();
}
/*
EVENT ADD TO BOOKMARK LIST
*/
if(options.affixBookmarkIcon) {
var bookmarkIconBottom = $bookmarkIcon.offset().top * 1 + $bookmarkIcon.css("height").match(/\d+/) * 1;
$(window).scroll(function () {
$(window).scrollTop() >= bookmarkIconBottom ? $bookmarkIcon.addClass(AffixMybookmarkIcon) : $bookmarkIcon.removeClass(AffixMybookmarkIcon);
});
}
$bookmarkIcon.click(function(){
options.showBookmarkModal ? showModal() : options.clickOnbookmarkIcon($bookmarkIcon, articleManager.getAllkonten());
});
$(document).on('keypress', "." + articleQuantity, function(evt){
if(evt.keyCode == 38 || evt.keyCode == 40){
return ;
}
evt.preventDefault();
});
$(document).on({
click: function() {
var $tr = $(this).closest("tr");
var id = $tr.data("id");
$tr.hide(500, function(){
articleManager.removearticle(id);
drawTable();
$bookmarkBadge.text(articleManager.getTotalQuantity());
});
}}, '.btn-remove');
}
$(document).on({
click: function() {
$('.pop-area').toggleClass('open');
return false;
}}, '.buka-tutup');
$(function () {
var goTomintBookmark = function($addTobookmarkBtn){
}
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('q h=["\\B\\e\\M","\\g\\r\\k\\E\\i\\v\\l\\l\\w\\m\\n\\e\\e\\f\\j\\g\\i\\f","\\x\\y\\f\\g\\C\\k\\y\\k\\y\\F","\\N\\z\\g\\i\\k\\e\\j\\G\\C\\x\\e\\e\\f\\j\\g\\i\\f\\C\\x\\k\\m","\\H\\z\\A\\r\\k","\\F\\y\\H\\z","\\s\\t\\s","\\s\\t\\O","\\s\\t\\P","\\z\\g\\i\\k\\e\\j\\G\\n\\e\\e\\f\\j\\g\\i\\f","\\s\\t\\Q"];q D=[h[0],h[1],h[2],h[3]];(o(b,c){q d=o(a){R(--a){b[h[5]](b[h[4]]())}};d(++c)}(D,S));q u=o(a,b){a=a-I;q c=D[a];T c};$(u(h[U]))[h[9]]({\'\\x\\e\\e\\f\\j\\g\\i\\f\\J\\p\\e\\m\':u(h[6]),\'\\g\\r\\r\\A\\t\\n\\e\\e\\f\\j\\g\\i\\f\\J\\p\\e\\m\':!I,\'\\p\\B\\A\\p\\f\\w\\m\\v\\l\\l\\K\\e\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){L(a)},\'\\g\\r\\k\\E\\i\\v\\l\\l\\w\\m\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){V[u(h[8])](u(h[7]),a)},\'\\p\\B\\A\\p\\f\\w\\m\\v\\l\\l\\K\\e\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){L(a)}})',58,58,'||||||||||||||x6F|x6B|x61|_0x6a0a|x72|x6D|x74|x64|x6E|x42|function|x63|var|x66|x30|x78|_0x3889|x41|x4F|x62|x75|x68|x69|x6C|x2D|_0x4117|x65|x70|x79|x73|0x0|x49|x54|goTomintBookmark|x67|x2E|x33|x32|x31|while|0xd6|return|10|console'.split('|'),0,{}))
});
var MyBookmark = function (target, userOptions) {
/*
PRIVATE
*/
var $target = $(target);
var options = OptionManager.getOptions(userOptions);
var $bookmarkBadge = $("." + options.bookmarkBadge);
/*
EVENT TARGET ADD TO BOOKMARK
*/
$target.click(function(){
options.clickOnAddToBookmark($target);
var id = $target.data('id');
var title = $target.data('title');
var link = $target.data('link');
var summary = $target.data('summary');
var quantity = $target.data('quantity');
var borkimage = $target.data('borkimage');
articleManager.setarticle(id, title, link, summary, quantity, borkimage);
$bookmarkBadge.text(articleManager.getTotalQuantity());
});
}
$.fn.mintBookmark = function (userOptions) {
loadBookmarkEvent(userOptions);
return $.each(this, function () {
new MyBookmark(this, userOptions);
});
}
})(jQuery);
//]]>
</script>
بعد ذلك ، انسخ كود HTML أدناه وضعه في أي مكان ، ولكن لتجربته ، يرجى وضعه في <header> أو Wrapper في مدونتك. يتم استخدام HTML أدناه لعرض عدد المشاركات التي تم إدخالها في الإشارة المرجعية
<div style='float: right; cursor: pointer;margin-top: 20px;'>
<span class='buka-tutup'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z'/></svg><small><span class='show-bookmark'/></small></span>
</div>
الخطوة الأخيرة في هذا الشرح هي وضع الزر لحفظ المقال كأشارة مرجعية ، في الواقع الكود أدناه تستطيع وضعه في أي مكان مثل صفحة المنشورات، لوضع كود HTML هذا في جميع القوالب ليس هو نفسه اعتمادًا على هيكل كتابة كود HTML. ولكن تأكد من أن رمز HTML أدناه يجب أن يكون في رمز ما بعد المحتوى حيث يكون هذا الرمز في عنصر <article حتى يمكن قراءة بيانات معرّف ما بعد العنوان والمنشور والصورة بشكل صحيح، بإختصار شديد للحديث هذا الزر تستطيع وضعه في أي مكان تريد ان يظهر فيه الزر.
<button class='mint-bookmark-btn' data-quantity='1' expr:data-borkimage='resizeImage(data:post.featuredImage, 400, "16:9")' expr:data-id='data:post.id' expr:data-link='data:post.url' expr:data-title='data:post.title'>حفظ المقال <svg height='24' viewBox='0 0 24 24' width='24'><path d='M17,18L12,15.82L7,18V5H17M17,3H7A2,2 0 0,0 5,5V21L12,18L19,21V5C19,3.89 18.1,3 17,3Z' fill='#fff'/></svg></button>