新的着陆页
自之前那个 Typecho 博客爆炸之后，我转战 Hexo 启动了这个博客。由于域名解析的问题，博客域名迁到了 blog.imalan.cn，主域名 imalan.cn 空了出来。本来是直接做了一个 301 跳转，但是觉得有些可惜，而且我腾讯云的主机也没有到期，所以就干脆做一个着陆页放在上面吧。网址是：一只熊猫 - 不急，慢慢来，电脑端的效果见文章首图，更多的页面如下：
我自己不是做前端的，所以不是很懂网页设计。以前也自己写一些简单的静态页面，但是总是执着于背景图、浮动元素之类花哨的东西，技术也达不到，做出来的页面也许自己喜欢，但其实一点也不大气。这次干脆就用最简单的黑白和最简单的布局来做一个静态页面。
在电脑端，一页就是一屏。除了第一页是自己的导航信息之外其他页面都是从一言获取的数据，可以无限滚动，到底了自动加载新的内容。
我个人还是很喜欢这个页面的，特别是在大屏电脑端的效果。页面因为非常简单，没有什么技术上的问题，不过为了实现无限滚动我还是动了一番脑筋。我的目标是页面到底了就加载新的数据，并且每一页都有一个向下的箭头按钮点击就可以滚动到下一页。那么只要先在页面初次载入时加载足够的元素（超过一屏），然后在滚动事件里检测是否到底，到底了用 Ajax 请求新的数据添加 DOM。每个新的 DOM 都要有自己的 id，方便跳转。那么把 HTML 结构和 JS 放在这里吧，页面引用了 JQuery 库，平滑滚动使用了 scrollTo.js 插件。
HTML
<!DOCTYPE html>
<html>
<head>
<script src="……/jquery.min.js"></script>
<script src="……/jquery.scrollTo.min.js"></script>
<script src="js.js"></script>
</head>
<body>
<header>
……
</header>
<footer>
……
</footer>
</body>
</html>为了简单起见，省去了部分内容。
JS
var nHitokoto=0; // 当前页面上的子块数量
function loadHitokoto(index){ // 在 footer 前插入新的 DOM，id 为 hitokoto_index
var html=`<div id="hitokoto_`+String(index)+`">
……
<p onclick="jumpToHitokoto(`+String(index+1)+`)">下一页</p>
</div>`;
$("footer").before(html);
nHitokoto = nHitokoto + 1;
$.ajax({
type: 'Get',
cache: false,
url: 'https://v1.hitokoto.cn/?encode=json&c=a&'+String(Math.random()),
success: function(data) {
……
}
});
}
function jumpToHitokoto(index){ // 跳转到某个id，如果不存在就先创建新的子块再跳转
if($("#hitokoto_"+String(index)).length){
$.scrollTo("#hitokoto_"+String(index),200);
}
else{
loadHitokoto(index);
$.scrollTo("#hitokoto_"+String(index),200);
}
}
$(document).ready(function(){ // 页面初次加载时创建足够多的子块（超过一屏）
for (let index = 0; index < 4; index++)
loadHitokoto(index);
})
$(window).scroll(function(){ // 检测是否滚动到底，到底了就加载新的数据
var h=$("footer").offset().top;
var c = $(document).scrollTop();
var wh = $(window).height();
if (Math.ceil(wh+c)>=h){
loadHitokoto(nHitokoto);
}
})其中有技术含量的只有判断页面是否到底这个函数。由于我的 footer 总是在最底部，只要判断 footer 是否出现在屏幕上就好。放张示意图就一目了然了：
一句题外话：发现了一个不错的灯箱插件：Colorbox 。
更新
现在我已经禁止了所有的滚动事件，只能通过点击按钮来上下翻页。
因为实际上这个页面是以页为单位的，设置成无限滚动倒是显得不合理了。而且我很喜欢一整个页面全黑背景或者全白的感觉，很舒服。涉及到禁止滚动事件，在桌面端只需要设置 overflow: hidden 就好，但是移动端，特别是 Safari 我找了好几个办法，最终发现在 body 标签上加上 ontouchmove="event.preventDefault ()" 就好。
