新的博客首页和说说页面

个人博客就是这点好，你爱怎么搞就怎么搞。选主题之初我选了一个极为简洁的主题，元素少，布局简单，这为我之后魔改（乱改）创造了条件。

== 由于样式表发生变化，请使用 Ctrl+F5 刷新缓存 ==

新的博客首页

Mi­rages 主题首页非常简洁，但是…… 果然我还是一个喜欢稍微复杂一点的东西的人。想起了 lep­ture 的博客 Just lepture，觉得这个主页设计风格简洁大气非常优美，想要克隆过来，不过我技术不到，只算是克隆了一个大概吧。新的主页就懒得放图了。

另外还有一些细枝末节的调整。现在突然不是很喜欢带圆角和阴影的设计了，觉得那种淡淡的背景色很好看。到现在为止这个主题基本上被我改得面目全非了…… 都是想到啥就做啥，根本谈不上风格一致什么的，从专业角度来说应该不能算是好设计…… 但如我说的，个人博客就是这点好，爱怎么搞就怎么搞。

新的说说页面

在这里：说说 - 熊猫小 A 的博客。这是基于 GitHub 的 is­sue 做的，GitHub 提供了 API 可以获得某个仓库的 is­sue，我在自己的服务器上每隔一段时间就抓取数据回来缓存一下，解决加载速度的问题，而且可以 AJAX 分页。效果如图：

服务端

服务端代码再简单不过了，就是从 GitHub 的 API 取数据，挑重要的部分格式化一下，然后保存到缓存文件；有请求时按需求返回数据就好了。

<?php
function curl_get_contents($_url)
{
    $myCurl = curl_init($_url);
    //不验证证书
    curl_setopt($myCurl, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($myCurl, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($myCurl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($myCurl, CURLOPT_HEADER, false);
    curl_setopt($myCurl, CURLOPT_USERAGENT, 'alandecode'); // 必要，设置为自己的用户名
    //获取
    $content = curl_exec($myCurl);
    //关闭
    curl_close($myCurl);
    return $content;
}

function update(){
    $data=array();
    $content=json_decode(curl_get_contents('https://api.github.com/repos/alandecode/shuoshuo/issues'));

    foreach ($content as $value) {
        if($value->author_association=='OWNER'){
            date_default_timezone_set('PRC');
            $time= date("Y-m-d H:i:s", strtotime($value->created_at));
            $t=array(
                'time'=>$time,
                'body'=>$value->body
            );
            array_push($data,$t);
        }
    }
    $f=json_encode(array(
        'time'=>time(),
        'data'=>$data
    ));
    $file=fopen('shuo.json',"w");
    fwrite($file,$f);
    fclose($file);
}

$type=$_GET['type'];

switch ($type) {
    case 'get':
        $from = $_GET['from'];
        $num=10;
        $local=json_decode(file_get_contents('shuo.json'));
        $html='';
        $outnum=0;
        $over=0;
        if(($from+$num)>=sizeof($local->data)) $over=1;
        for ($index=$from; $index<min($from+$num,sizeof($local->data)); $index++) {
            $html.='<div class="shuo-item"><img no-lightbox="1" class="shuo-thumb" src="https://blog.imalan.cn/usr/uploads/cdn_imalan_cn/img/site/Icon-60@3x.png#vwid=180&vhei=180" /><p class="shuo-body"><span class="time">'.$local->data[$index]->time.'</span><br>'.$local->data[$index]->body.'</p></div>';
            $outnum++;
        }
        header("Access-Control-Allow-Origin: *");
        echo json_encode(array(
            "body"=>$html,
            "num"=>$outnum,
            "over"=>$over
        ));
        break;
    case 'update':
        update();
        header("Access-Control-Allow-Origin: *");
        echo "ok";
        break;
}
?>

扔在服务器上就好。更新缓存的话，我是在 VPS 上设置了一个 crontab 任务：

*/5 * * * * curl "https://api.imalan.cn/Shuo/api.php?type=update"

获取数据的 API 就是：

https://api.imalan.cn/Shuo/api.php?type=get&from=【index】

即可以返回从 in­dex 开始的 10 条说说。

前端

HTML 结构：

<div id="shuoshuo"></div>

<center style="font-size: 1.1em">
    <span id="loadMore"><i id="loadMore-i" class="fa fa-circle-o-notch"></i> 加载更多</span>
</center>

CSS：

#shuoshuo{
    width:100%;
    display:flex;
    flex-flow: row wrap;
}
.shuo-item{
    width:100%;
    flex-shrink: 1;
    display: flex;
    padding: 0.7em;
    align-items: flex-start;
    margin-bottom: 1.5em;
    background-color: rgb(247, 248, 250);
}
.shuo-thumb{
    height: 45px;
    width: 45px;
    margin-right: 1em;
    margin-top: 0;
}
.shuo-body{
    flex:1;
    margin:0;
    word-break: break-word;
}
.shuo-body img{
    max-height:300px;
    width:100%;
    object-fit:cover;
}
#loadMore{
    cursor:pointer;
}

JS（用到了 JQuery）：

var curShuo=0;
function loadShuoShuo()
{
    $("#loadMore-i").addClass("fa-spin");
    $.getJSON('https://api.imalan.cn/Shuo/api.php?type=get&from='+String(curShuo),function(data{
        $("#shuoshuo").append(data.body);
        curShuo=curShuo+data.num;
        if(data.over==1){
            $("#loadMore").html("没有啦~");
            $("#loadMore").removeAttr("id");
        }
        $("#loadMore-i").removeClass("fa-spin");
        loadlightbox();
    })
}
$("#loadMore").click(function(){
    loadShuoShuo();
});
$(document).ready(function(){
    loadShuoShuo();
});

效果还是相当不错的，主要的问题是图片的问题。如我在说说页面写的，GitHub is­sue 自身是支持图片的，不过 API 输出的是 Mark­down 格式的，需要自己解析一下。但是我懒，所以就…… 直接用 HTML 语法写了。

话说现在都不流行 JQuery 了…… 我学都还没有学会呢哈哈。前端果然日新月异，幸好我不是搞这个的……