使用微信文章替换掉热搜

This commit is contained in:
luchenqun 2019-08-08 14:28:43 +08:00
parent e3c0aa7349
commit bab9c124ce
10 changed files with 424 additions and 35 deletions

View File

@ -75,7 +75,7 @@ my-bookmark/
│ │ │ ├── bookmarks-controller.js # 书签页面控制器 │ │ │ ├── bookmarks-controller.js # 书签页面控制器
│ │ │ ├── edit-controller.js # 编辑书签页面控制器 │ │ │ ├── edit-controller.js # 编辑书签页面控制器
│ │ │ ├── home-controller.js # 未登录时首页页面控制器 │ │ │ ├── home-controller.js # 未登录时首页页面控制器
│ │ │ ├── hot-controller.js # 热门收藏页面控制器 │ │ │ ├── weixin-article-controller.js # 热门收藏页面控制器
│ │ │ ├── login-controller.js # 登陆注册页面控制器 │ │ │ ├── login-controller.js # 登陆注册页面控制器
│ │ │ ├── menus-controller.js # 菜单栏控制器 │ │ │ ├── menus-controller.js # 菜单栏控制器
│ │ │ ├── note-controller.js # 备忘录控制器 │ │ │ ├── note-controller.js # 备忘录控制器
@ -116,7 +116,7 @@ my-bookmark/
| | ├── dialog-del-tag.html # 分类删除确认页面 | | ├── dialog-del-tag.html # 分类删除确认页面
| | ├── edit.html # 书签添加修改页面 | | ├── edit.html # 书签添加修改页面
| | ├── home.html # 未登录时首页页面 | | ├── home.html # 未登录时首页页面
| | ├── hot.html # 热门收藏页面 | | ├── weixin-article.html # 热门收藏页面
| | ├── login.html # 登陆注册页面 | | ├── login.html # 登陆注册页面
| | ├── menus.html # 菜单组件 | | ├── menus.html # 菜单组件
| | ├── note.html # 备忘录页面 | | ├── note.html # 备忘录页面

BIN
public/images/weixin.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 507 B

View File

@ -85,7 +85,7 @@
<script src="/scripts/controllers/edit-controller.js"></script> <script src="/scripts/controllers/edit-controller.js"></script>
<script src="/scripts/controllers/bookmark-info-controller.js"></script> <script src="/scripts/controllers/bookmark-info-controller.js"></script>
<script src="/scripts/controllers/search-controller.js"></script> <script src="/scripts/controllers/search-controller.js"></script>
<script src="/scripts/controllers/hot-controller.js"></script> <script src="/scripts/controllers/weixin-article-controller.js"></script>
<script src="/scripts/controllers/praise-controller.js"></script> <script src="/scripts/controllers/praise-controller.js"></script>
<script src="/scripts/controllers/note-controller.js"></script> <script src="/scripts/controllers/note-controller.js"></script>
<script src="/scripts/externe/semantic.min.js"></script> <script src="/scripts/externe/semantic.min.js"></script>

View File

@ -12,10 +12,10 @@ app.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
}, },
controller: 'bookmarksCtr' controller: 'bookmarksCtr'
}) })
.state('hot', { .state('weixin-article', {
url: '/hot', url: '/weixin-article',
templateUrl: '/views/hot.html', templateUrl: '/views/weixin-article.html',
controller: 'hotCtr' controller: 'weixinArticleCtr'
}) })
.state('praise', { .state('praise', {
url: '/praise', url: '/praise',

View File

@ -13,17 +13,18 @@ app.controller('bookmarkInfoCtr', ['$scope', '$state', '$timeout', '$sce', '$win
bookmark.snap_url = bookmark.snap_url || ('./images/snap/' + bookmark.id + '.png'); bookmark.snap_url = bookmark.snap_url || ('./images/snap/' + bookmark.id + '.png');
$scope.bookmark = bookmark; $scope.bookmark = bookmark;
$scope.bookmark.description = $sce.trustAsHtml(bookmark.description); $scope.bookmark.description = $sce.trustAsHtml(bookmark.description);
$scope.content = ''; $scope.content = $sce.trustAsHtml(bookmark.content) || '';
var params = { var params = {
url: bookmark.url, url: bookmark.url,
requestId: 1 requestId: 1
} }
$scope.loading = true; if (!$scope.content) {
$timeout(function() { $timeout(function() {
$('.ui.modal.js-bookmark-info').modal("refresh"); $('.ui.modal.js-bookmark-info').modal("refresh");
$("p").css("word-wrap", "break-word"); $("p").css("word-wrap", "break-word");
}, 500); }, 500);
bookmarkService.getArticle(params) $scope.loading = true
bookmarkService.getArticle(params)
.then((data) => { .then((data) => {
$scope.content = data.content ? $sce.trustAsHtml(data.content) : $sce.trustAsHtml('<p>数据获取失败可能是服务器不允许获取或者是https网站</p>'); $scope.content = data.content ? $sce.trustAsHtml(data.content) : $sce.trustAsHtml('<p>数据获取失败可能是服务器不允许获取或者是https网站</p>');
setTimeout(function() { setTimeout(function() {
@ -35,6 +36,14 @@ app.controller('bookmarkInfoCtr', ['$scope', '$state', '$timeout', '$sce', '$win
$scope.content = $sce.trustAsHtml('<p>数据获取失败:' + JSON.stringify(err) + '</p>'); $scope.content = $sce.trustAsHtml('<p>数据获取失败:' + JSON.stringify(err) + '</p>');
$scope.loading = false; $scope.loading = false;
}) })
} else {
setTimeout(function() {
$('.ui.modal.js-bookmark-info').modal && $('.ui.modal.js-bookmark-info').modal("refresh");
}, 10);
setTimeout(function() {
$('.modals').animate({ scrollTop: 0 }, 100);
}, 500);
}
}); });
$scope.jumpToUrl = function(url, id) { $scope.jumpToUrl = function(url, id) {

View File

@ -0,0 +1,305 @@
app.controller('weixinArticleCtr', ['$scope', '$state', '$sce', '$stateParams', '$filter', '$window', '$timeout', '$document', 'ngDialog', 'bookmarkService', 'pubSubService', 'dataService', function($scope, $state, $sce, $stateParams, $filter, $window, $timeout, $document, ngDialog, bookmarkService, pubSubService, dataService) {
console.log("Hello weixinArticleCtr...");
if(dataService.smallDevice()){
$window.location = "http://m.mybookmark.cn/#/tags";
return;
}
var key = curentDate(undefined, "yyyyMMdd");
$scope.hoverBookmark = null;
$scope.bookmarks = []; // 书签数据
$scope.bookmark = {};
$scope.bookmarkNormalHover = false;
$scope.bookmarkEditHover = false;
const perPageItems = 40;
$scope.totalPages = 0;
$scope.currentPage = 1;
$scope.channelId = 1;
$scope.inputPage = '';
$scope.loadBusy = false;
$scope.curDay = 0;
$scope.toastrId = 0;
$scope.random = 0;
$scope.channels = JSON.parse(`[{"id":1,"name":"热门", "clicked": true},{"id":2,"name":"搞笑"},{"id":3,"name":"养生堂"},{"id":4,"name":"私房话"},{"id":5,"name":"八卦精"},{"id":6,"name":"科技咖"},{"id":7,"name":"财经迷"},{"id":8,"name":"汽车控"},{"id":9,"name":"生活家"},{"id":10,"name":"时尚圈"},{"id":11,"name":"育儿"},{"id":12,"name":"旅游"},{"id":13,"name":"职场"},{"id":14,"name":"美食"},{"id":15,"name":"历史"},{"id":16,"name":"教育"},{"id":17,"name":"星座"},{"id":18,"name":"体育"},{"id":19,"name":"军事"},{"id":20,"name":"游戏"},{"id":21,"name":"萌宠"}]`);
$scope.callCount = parseInt((localStorage && localStorage.getItem('weixin' + key)) || 1);
$scope.maxCallCount = 100;
$scope.user = {};
var timeagoInstance = timeago();
bookmarkService.autoLogin()
.then((data) => {
var login = data.logined;
var index = login ? dataService.LoginIndexHot : dataService.NotLoginIndexHot;
$scope.user = data.user || {};
pubSubService.publish('Common.menuActive', {
login: login,
index: index
});
})
.catch((err) => {
console.log('autoLogin err', err)
});
$scope.jumpToUrl = function(url) {
$window.open(url, '_blank');
}
$scope.favoriteBookmark = function(b) {
var menusScope = $('div[ng-controller="menuCtr"]').scope();
var login = (menusScope && menusScope.login) || false;
if (!login) {
$scope.toastrId = toastr.info('请先登录再收藏书签!', "提示");
return;
}
var bookmark = {}
bookmark.description = '';
bookmark.title = b.title;
bookmark.url = b.url;
bookmark.public = 1;
bookmark.click_count = 1;
bookmarkService.favoriteBookmark(bookmark)
.then((data) => {
pubSubService.publish('EditCtr.inserBookmarsSuccess', data);
if (data.title) {
toastr.success('[ ' + data.title + ' ] 收藏成功!', "提示");
} else {
toastr.error('[ ' + bookmark.title + ' ] 收藏失败!', "提示");
}
})
.catch((err) => {
toastr.error('[ ' + bookmark.title + ' ] 收藏失败,' + JSON.stringify(err), "提示");
});
}
$scope.storeBookmark = function(bookmark) {
var menusScope = $('div[ng-controller="menuCtr"]').scope();
var login = (menusScope && menusScope.login) || false;
if (!login) {
$scope.toastrId = toastr.info('请先登录再转存书签!', "提示");
} else {
var b = $.extend(true, {}, bookmark); // 利用jQuery执行深度拷贝
b.tags = [{
name: b.created_by
}]
pubSubService.publish('TagCtr.storeBookmark', b);
}
}
$scope.copy = function(url) {
dataService.clipboard(url);
}
$scope.detailBookmark = function(b) {
if(!b.content) {
$scope.jumpToUrl(b.url);
return;
}
$scope.bookmark = b;
setTimeout(function() {
$('body,html').animate({scrollTop:0},100);
}, 100);
}
// 快捷键r随机推荐
$document.bind("keydown", function(event) {
$scope.$apply(function() {
// console.log(event.keyCode);
var menusScope = $('div[ng-controller="menuCtr"]').scope();
var login = (menusScope && menusScope.login) || false;
var blur = (menusScope && menusScope.blur) || false;
// r按键显示
if (event.keyCode == 82 && login && (!blur)) {
$scope.randomHotBookmarks();
}
var key = event.key.toUpperCase();
if ($scope.hoverBookmark && dataService.keyShortcuts()) {
if (key == 'I') {
$scope.detailBookmark($scope.hoverBookmark)
} else if (key == 'C') {
$scope.copy($scope.hoverBookmark.url)
}
}
})
});
$scope.randomHotBookmarks = function() {
var menusScope = $('div[ng-controller="menuCtr"]').scope();
var login = (menusScope && menusScope.login) || false;
if (login) {
$scope.random = true;
var beginDay = new Date(2016, 7, 15); // 注意日期是从0 ~ 11
var now = new Date();
var dayGap = parseInt(Math.abs(now - beginDay) / (1000 * 60 * 60 * 24)) + 1;
$scope.curDay = -(parseInt(Math.random() * 1000000) % dayGap);
$scope.bookmarks = [];
getHotBookmarksbyCache();
} else {
$scope.toastrId = toastr.info('您只有先登录,才能使用查看随机热门标签', "提示");
}
}
$scope.setHoverBookmark = function(bookmark) {
$scope.hoverBookmark = bookmark;
}
$scope.changeCurrentPage = function (currentPage) {
currentPage = parseInt(currentPage) || 0;
console.log(currentPage);
if (currentPage <= $scope.totalPages && currentPage >= 1) {
$scope.getWeixinArticles($scope.channelId, currentPage);
$scope.currentPage = currentPage;
}
}
$scope.getWeixinArticles = function(channelId, page) {
var menusScope = $('div[ng-controller="menuCtr"]').scope();
var login = (menusScope && menusScope.login) || false;
var index = login ? dataService.LoginIndexHot : dataService.NotLoginIndexHot;
pubSubService.publish('Common.menuActive', {
login: login,
index: index
});
$scope.bookmarks = []
$scope.bookmark = {}
$scope.loadBusy = true;
$scope.channelId = channelId;
$scope.currentPage = page;
$scope.totalPages = 0;
var start = (page - 1) * perPageItems;
var api = `https://api.jisuapi.com/weixinarticle/get?channelid=${channelId}&start=${start}&num=${perPageItems}&appkey=e95887468ab87d69`;
if(localStorage) {
var count = parseInt(localStorage.getItem('weixin' + key) || 1);
if (count <= $scope.maxCallCount || $scope.user.username === 'lcq') {
$.ajax({
url: api,
type: 'get',
dataType : "jsonp",
jsonp : "callback",
success: function(body) {
dealBody(body);
},
error: function(json) {
$scope.loadBusy = false;
toastr.error('获取热门失败!失败原因:' + json.msg, "提示");
getHotBookmarksbyCache();
}
});
localStorage.setItem('weixin' + key, count+1)
$scope.callCount = count+1;
} else {
getHotBookmarksbyCache();
toastr.warning('每天只允许实时调用 100 次剩下的只从缓存中获取', "提示");
}
} else {
getHotBookmarksbyCache();
}
}
function getHotBookmarksbyCache() {
$scope.loadBusy = true;
var date = curentDate($scope.curDay, "yyyyMMdd");
if (date < "20160715") {
toastr.info('您已将将所有的热门标签都加载完了!', "提示");
$scope.loadBusy = false;
return; // 这是最早的了。
}
var params = {
date: date,
}
bookmarkService.getHotBookmarks(params)
.then((data) => {
data.forEach((bookmark) => {
bookmark.created_at = $filter('date')(new Date(bookmark.updatetime), "yyyy-MM-dd HH:mm:ss");
bookmark.edit = false;
$scope.bookmarks.push(bookmark);
})
$scope.curDay--;
$scope.loadBusy = false;
if (data && data.length == 0) {
getHotBookmarksbyCache(); // 没有继续请求
}
})
.catch((err) => {
toastr.error("getHotBookmarksbyCache: " + JSON.stringify(err), "提示");
$scope.curDay--;
$scope.loadBusy = false;
getHotBookmarksbyCache(); // 没有继续请求
});
}
// TODO: 我要将编辑按钮固定在容器的右上角
function curentDate(i, format) {
if (i == undefined) {
i = 0;
}
if (format == undefined) {
format = 'yyyyMMddhhmmss'
}
var now = new Date();
now.setTime(now.getTime() + i * 24 * 60 * 60 * 1000);
clock = $filter('date')(now, format);
return clock;
}
function dealBody(body) {
console.log('success............', body);
$scope.loadBusy = false;
var defaultSnap = "./images/default.jpg"
var defaultFavicon = "./images/weixin.ico"
$timeout(function() {
if (body.status == 0) {
var weixinArticles = body.result.list;
var id = body.result.channelid;
var total = body.result.total;
$scope.totalPages = parseInt(total / perPageItems) + 1;
$scope.channels.forEach((channel) => {
if (channel.id === id) {
channel.total = total;
}
})
weixinArticles.forEach((articl, index) => {
let cdate = new Date(articl.time).getTime() + (parseInt(Math.random() * 10000000000) % 36000)
var b = {};
b.index = index;
b.title = articl.title;
b.url = articl.url;
b.favicon_url = defaultFavicon;
b.created_by = articl.weixinname;
b.account = articl.weixinaccount;
b.snap_url = articl.pic || defaultSnap;
b.fav_count = articl.likenum;
b.created_at = timeagoInstance.format(cdate,'zh_CN');
b.content = articl.content
b.content = b.content.replace(/https:\/\/mmbiz.qpic.cn/gi, "http://img01.store.sogou.com/net/a/04/link?appid=100520029&url=https://mmbiz.qpic.cn")
b.content = b.content.replace(/http:\/\/mmbiz.qpic.cn/gi, "http://img01.store.sogou.com/net/a/04/link?appid=100520029&url=https://mmbiz.qpic.cn")
b.content = $sce.trustAsHtml(b.content);
b.tags = [{
id: -1,
name: body.result.channel
}];
$scope.bookmarks.push(b);
})
} else {
toastr.error('获取热门失败!失败原因:' + body.msg, "提示");
}
}, 100);
}
$document.bind("keydown", function(event) {
$scope.$apply(function() {
// Esc按键退出
if (event.keyCode == 27) {
$scope.bookmark = {};
}
})
});
$scope.getWeixinArticles($scope.channelId, $scope.currentPage);
}]);

View File

@ -25,7 +25,7 @@ app.factory('dataService', [function() {
uiSref: 'note', uiSref: 'note',
title: '备忘' title: '备忘'
}, { }, {
uiSref: 'hot', uiSref: 'weixin-article',
title: '热门' title: '热门'
}, { }, {
uiSref: 'settings', uiSref: 'settings',
@ -41,7 +41,7 @@ app.factory('dataService', [function() {
uiSref: 'login', uiSref: 'login',
title: '登录' title: '登录'
}, { }, {
uiSref: 'hot', uiSref: 'weixin-article',
title: '热门' title: '热门'
}], }],
animationIndex: 0, animationIndex: 0,

View File

@ -49,20 +49,8 @@
</div> </div>
</div> </div>
<div class="ui divider"></div> <div class="ui divider"></div>
<div class="content" style="padding:0 10px 0 20px"> <div class="content" style="padding:0 20px">
<div class="description"> <div class="description js-content">
<div class="ui header">
描述信息
</div>
<pre style="word-break:break-all;white-space: pre-wrap;">{{ bookmark.description }}</pre>
</div>
</div>
<div class="ui divider"></div>
<div class="content" style="padding:0 0 0 20px">
<div class="description">
<div class="ui header">
内容摘抄
</div>
<p ng-bind-html="content"></p> <p ng-bind-html="content"></p>
<img class="ui centered medium image" src="/images/loading.gif" ng-show="loading"> <img class="ui centered medium image" src="/images/loading.gif" ng-show="loading">
</div> </div>

View File

@ -1,22 +1,22 @@
<div class="ui segment js-tags"> <div class="ui segment js-tags">
<div class="ui container" ng-show="!editMode" style="cursor:default;"> <div class="ui container" ng-show="!editMode" style="cursor:default;padding: 10px 0px">
<div class="ui grid"> <div class="ui grid">
<div class="two wide column js-tag-label"> <div class="two wide column js-tag-label" style="padding: 10px;">
<div class="ui small label" ng-class="{green:costomTag.bookmarkClicked}" ng-click="getBookmarks(-1, 1)"> <div class="ui small label" ng-class="{green:costomTag.bookmarkClicked}" ng-click="getBookmarks(-1, 1)">
{{ costomTag.name }} ({{ costomTag.cnt || 0 }}) {{ costomTag.name }} ({{ costomTag.cnt || 0 }})
</div> </div>
</div> </div>
<div class="two wide column js-tag-label" ng-if="tag.cnt" ng-repeat="tag in tags"> <div class="two wide column js-tag-label" ng-if="tag.cnt" style="padding: 10px;" ng-repeat="tag in tags">
<div class="ui small label" ng-class="{green:tag.bookmarkClicked}" ng-click="getBookmarks(tag.id, 1)"> <div class="ui small label" ng-class="{green:tag.bookmarkClicked}" ng-click="getBookmarks(tag.id, 1)">
{{ tag.name }} ({{ tag.cnt || 0 }}) {{ tag.name }} ({{ tag.cnt || 0 }})
</div> </div>
</div> </div>
<div class="two wide column js-tag-label"> <div class="two wide column js-tag-label" style="padding: 10px;">
<div class="ui small label" ng-class="{green:costomAllUsersTag.bookmarkClicked}" ng-click="getBookmarks(-2, 1)"> <div class="ui small label" ng-class="{green:costomAllUsersTag.bookmarkClicked}" ng-click="getBookmarks(-2, 1)">
{{ costomAllUsersTag.name }} ({{ costomAllUsersTag.cnt || 0 }}) {{ costomAllUsersTag.name }} ({{ costomAllUsersTag.cnt || 0 }})
</div> </div>
</div> </div>
<div class="two wide column js-tag-label"> <div class="two wide column js-tag-label" style="padding: 10px;">
<div class="ui small label"> <div class="ui small label">
<i class="plus icon" data-content="点击添加分类" data-position="top center" ng-click="showAddTag()"></i> <i class="plus icon" data-content="点击添加分类" data-position="top center" ng-click="showAddTag()"></i>
<i class="pencil alternate icon" data-content="点击进入分类编辑模式" data-position="top center" ng-click="toggleMode(true)"></i> <i class="pencil alternate icon" data-content="点击进入分类编辑模式" data-position="top center" ng-click="toggleMode(true)"></i>

View File

@ -0,0 +1,87 @@
<!-- 高度至少要设置1000元素少时才能触发滚动条事件 -->
<div class="ui segment js-hot-card js-weixin-articles">
<div class="ui container" style="cursor:default;" ng-if="callCount <= maxCallCount">
<div class="ui label" style="margin:3px 20px 8px 0px;cursor:default;" ng-class="{green:channel.id===channelId}" ng-repeat="channel in channels"
ng-click="getWeixinArticles(channel.id, 1)">{{ channel.name }} {{ channel.total ? ('('+channel.total+')') : '' }}</div>
</div>
<div class="ui center aligned container" style="cursor:default;" ng-if="callCount > maxCallCount && (!loadBusy)">
<i class="random big link icon" title="随机刷一批" ng-click="randomHotBookmarks()"></i>
</div>
<div class="ui massive text centered inline loader js-hot-loader" style="margin: 50px 0px 120px 0px;" ng-class="{active:loadBusy, disabled:!loadBusy}">
正在加载中...</div>
<div class="ui divider" style="margin: 3px 0px 8px 0px;"></div>
<div class="ui five stackable cards" ng-if="!bookmark.content">
<div class="card" ng-repeat="bookmark in bookmarks" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)">
<div class="content" style="max-height:70px;cursor:pointer" ng-click="detailBookmark(bookmark)">
<div class="description bookmarkTitle" title="{{bookmark.title}}">
{{bookmark.title}}
</div>
</div>
<div class="image hot-image" href="{{ bookmark.url }}" style="cursor:pointer" ng-click="detailBookmark(bookmark)">
<img ng-src="{{bookmark.snap_url}}" />
</div>
<div class="extra content" ng-show="!bookmark.edit">
<img class="ui avatar image" style="width:16px;height:16px;" ng-src="{{bookmark.favicon_url}}">
<span class="sourceName" title="{{ bookmark.created_by }}">{{ bookmark.created_by }}</span>
<span class="favCount" ng-if="bookmark.fav_count">·{{ bookmark.fav_count }}人收藏</span>
<i class="ellipsis horizontal icon right floated" style="margin-top:6px;" ng-mouseover="bookmark.edit=true;"></i>
</div>
<div class="extra content" ng-show="bookmark.edit" ng-mouseleave="bookmark.edit=false;">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/favorite.png" ng-click="favoriteBookmark(bookmark)"
title="一键收藏">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/store-bookmark.png"
ng-click="storeBookmark(bookmark)" title="转存到我的书签">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/copy.png" ng-click="copy(bookmark.url)" title="复制链接">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)"
title="书签详情">
</div>
</div>
</div>
<div class="ui container" ng-if="bookmark.content">
<div class="ui center aligned container" style="font-size:30px;">
{{bookmark.title}}
</div>
<div class="ui center aligned container" style="margin: 10px 0px">
<span style="color: #4383BF" title="公众号名称">{{bookmark.created_by}}</span>
&nbsp;&nbsp;
<span title="公众号账号">{{bookmark.account}}</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span>{{bookmark.created_at}}</span>
</div>
<div class="ui divider"></div>
<div class="content" style="padding:0 20px">
<div class="description js-content">
<p ng-bind-html="bookmark.content"></p>
</div>
</div>
<div class="ui divider"></div>
<div class="ui container">
<img class="ui middle aligned mini image" ng-src="{{bookmark.favicon_url}}" style="width:16px;height:16px;padding:0;cursor:pointer;"
ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="点击跳转到原页面(如果过期,需要在微信中才能打开)">
<span title="点击复制链接" ng-click="copy(bookmark.url)" class="urlSpan">{{bookmark.url}}
</span>
</div>
</div>
<div class="ui divider"></div>
<div class="ui grid" ng-if="bookmark.content">
<div class="eight wide column">
<div style="float: left;cursor: pointer" ng-click="detailBookmark(bookmarks[bookmark.index-1])" ng-if="bookmarks[bookmark.index-1]"><i class="chevron left icon"></i>
{{ bookmarks[bookmark.index-1].title }}</div>
</div>
<div class="eight wide column">
<div style="float: right;cursor: pointer" ng-click="detailBookmark(bookmarks[bookmark.index+1])" ng-if="bookmarks[bookmark.index+1]">
{{ bookmarks[bookmark.index+1].title }} <i class="chevron right icon"></i></div>
</div>
</div>
<div class="ui divider" ng-if="bookmark.content"></div>
<div class="ui grid">
<div class="one wide column">
<i title="按 ESC 键亦可返回" class="window close outline icon large" ng-click="bookmark.content=''" ng-if="bookmark.content"></i>
</div>
<div class="fifteen wide column">
<pagination></pagination>
</div>
</div>
</div>