|
让网站记住读者的浏览历史，让读者很方便地知道他最近阅读了你博客的哪些文章。这一举措，对于提高用户体验应该是不错的方法。那么，如何为你的WordPress站点添加这个功能？一起往下看吧！ 倡萌2个多月前就在 看到 @MG12 的相关教程，也曾经在本地站点折腾过，还真的实现了。你可以按照 @MG12 文章历史浏览记录 这篇文章折腾。 通过代码集成文章浏览历史功能倡萌折腾的时候是这样操作的： 1.将下面的代码另存为一个名为 view-history.js 的js文件（格式为 utf-8 无BOM）[代码来自于 @MG12] 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
| /**
* @author: mg12 [http://www./]
* @update: 2013/01/09
*
* IE6/7 need a third-party JSON library to polyfill this feature. [https://github.com/douglascrockford/JSON-js/blob/master/json2.js]
*/
ViewHistory = function() {
this.config = {
limit: 10,
storageKey: 'viewHistory',
primaryKey: 'url'
};
this.cache = {
localStorage: null,
userData: null,
attr: null
};
};
ViewHistory.prototype = {
init: function(config) {
this.config = config || this.config;
var _self = this;
// define localStorage
if (!window.localStorage && (this.cache.userData = document.body) && this.cache.userData.addBehavior && this.cache.userData.addBehavior('#default#userdata')) {
this.cache.userData.load((this.cache.attr = 'localStorage'));
this.cache.localStorage = {
'getItem': function(key) {
return _self.cache.userData.getAttribute(key);
},
'setItem': function(key, value) {
_self.cache.userData.setAttribute(key, value);
_self.cache.userData.save(_self.cache.attr);
}
};
} else {
this.cache.localStorage = window.localStorage;
}
},
addHistory: function(item) {
var items = this.getHistories();
for(var i=0, len=items.length; i<len; i++) {
if(item[this.config.primaryKey] && items[i][this.config.primaryKey] && item[this.config.primaryKey] === items[i][this.config.primaryKey]) {
items.splice(i, 1);
break;
}
}
items.push(item);
if(this.config.limit > 0 && items.length > this.config.limit) {
items.splice(0, 1);
}
var json = JSON.stringify(items);
this.cache.localStorage.setItem(this.config.storageKey, json);
},
getHistories: function() {
var history = this.cache.localStorage.getItem(this.config.storageKey);
if(history) {
return JSON.parse(history);
}
return [];
}
};
/* <![CDATA[ */
//引用脚本并初始化对象
if(typeof localStorage !== 'undefined' && typeof JSON !== 'undefined') {
var viewHistory = new ViewHistory();
viewHistory.init({
limit: 5,
storageKey: 'viewHistory',
primaryKey: 'url'
});
}
/* ]]> */
/* <![CDATA[ */
// 如果 ViewHistory 的实例存在，则可以将页面信息写入。
if(viewHistory) {
var page = {
"title": document.getElementsByTagName('title')[0].innerHTML,
"url": location.href // 这是 primaryKey
// "time": new Date()
// "author": ...
// 这里可以写入更多相关内容作为浏览记录中的信息
};
viewHistory.addHistory(page);
}
/* ]]> */
/* <![CDATA[ */
var wrap = document.getElementById('view-history');
// 如果 ViewHistory 的实例存在，并且外层节点存在，则可显示历史浏览记录
if(viewHistory && wrap) {
// 获取浏览记录
var histories = viewHistory.getHistories();
// 组装列表
var list = document.createElement('ul');
if(histories && histories.length > 0) {
for(var i=histories.length-1; i>=0; i--) {
var history = histories[i];
var item = document.createElement('li');
var link = document.createElement('a');
link.href = history.url;
link.innerHTML = history.title;
item.appendChild(link);
list.appendChild(item);
}
// 插入页面特定位置
wrap.appendChild(list);
}
}
/* ]]> */ |
2.将 view-history.js 放到你主题下的 js 文件夹中，然后在主题的 footer.php 中使用下面的代码调用： 1
| <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/view-history.js"></script> |
3.如果你的主题支持小工具，你可以使用 [文本]小工具，添加标题为“浏览历史”，内容为“<div id="view-history"></div>”，然后保存，如下所示： 
就可以看到效果了： 
|
