1

Google Blogger翻页功能的定制修改

 1 year ago
source link: https://www.williamlong.info/archives/6934.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Google Blogger翻页功能的定制修改

2022-9-24 15:56:44 | 作者: 月光 | 分类: 网站建设 | 评论: 0 | 浏览: 228

Google Blogger底部的翻页导航体验其实不怎么样,优化的方法有两种,一种是通过插件方式,将翻页的导航条隐藏,滑动到底部后自动翻页,另一种方法是,将模板中翻页默认的“较旧的博文”、“较新的博文”修改为“下一页”和“上一页”。

浏览自动翻页导航

通过一个第三方插件Infinite Ajax Scroll对其进行优化,实现的效果是:浏览到页面底部的时候,自动加载下一页内容,也就是下拉加载效果,这种效果可以让用户不用点击“下一页”按钮,也可以实现翻页,无论在PC还是手机上,体验效果都很不错。

具体修改方法是:在布局界面,添加HTML/JAVASCRIPT小工具,然后在里面添加如下代码。

let ias = new InfiniteAjaxScroll('.blog-posts', {
  item: '.date-outer',
  next: '#blog-pager-older-link a',
  pagination: '#blog-pager',
  spinner: '.loader',
});
ias.on('load', function(event) {
  event.nocache = true;
});

修改翻页文字

Blogger模板中翻页默认显示的是“较旧的博文”、“较新的博文”,可以将其修改为“上一页”、“下一页”,具体的修改方法是:

进入Blogger 后台,选择 “主题背景”-“修改HTML”,在代码框内空白处点击一下,然后按Ctrl+ F 。

在搜索框内输入并查找<data:newerPageTitle/>,找到后,用“上一页”代替。

在搜索框内输入并查找<data:olderPageTitle/>,找到后,用“下一页”代替。

之后,保存主题模板,再次打开主页,就会发现“较旧的博文”、“较新的博文”已经被替换为“下一页”和“上一页”。

Google Blogger翻页功能的定制修改

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK