新的博客首页和说说页面

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

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

新的博客首页

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

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

新的说说页面

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

shuoshuo_desktop

服务端

服务端代码再简单不过了,就是从 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://cdn.imalan.cn/img/site/Icon-60@3x.png" /><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】

即可以返回从 index 开始的 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 issue 自身是支持图片的,不过 API 输出的是 Markdown 格式的,需要自己解析一下。但是我懒,所以就……直接用 HTML 语法写了。


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

Tags:none
上一篇
打赏
下一篇

添加新评论

已有 11 条评论

 明月清风 2 个月前 • |

看了这么多有趣的博客,越来越发现我的博客就是太丑,结果还没能力去改改,只能找教程慢慢来,仰慕。@(呵呵)

 熊猫小A 2 个月前 • |
@明月清风

你的博客风格比较简洁嘛,而且内容比较好,比较文艺~

 明月清风 2 个月前 • |
@熊猫小A

专业伪文艺咯。

 Pnnk 2 个月前 • |

点开域名看到首页真的感觉好棒
点开博客顶部头图也是....爱到死人

 熊猫小A 2 个月前 • |
@Pnnk

哇这么高的评价,谢谢~ 说得我都害羞了哈哈

 c0smx 2 个月前 • |

桌面很胖胖~

 熊猫小A 2 个月前 • |
@c0smx

你说题图吗,那是我在 Unsplash 上找的图哈哈,哪里用得起那么壕的配置啊~

 欧尼酱 2 个月前 • |

好漂亮的首页....

 熊猫小A 2 个月前 • |
@欧尼酱

都是在大佬的基础上做些小修改~

 mikusa 2 个月前 • |

新的首页看起来好炫酷,是怎么办到的?

 熊猫小A 2 个月前 • |
@mikusa

是说着陆页吗?那个就是请求的一言的数据啦,没什么技术含量哈哈