当前位置：首页 > 技术博客 > 其他 > 给自己的网站简单加个壁纸页

给自己的网站简单加个壁纸页

5年前 (2021-06-27)其他1546

演示页面： https://www.liuzhixi.cn/90.html 点击查看效果。

这个通过360壁纸的API是现实，废话不多说，开凎：

如果你用的是Z-BlogP程序的话可以跟着我的教程做，如果恰好是用的拓源纯净主题tpure的话，那么你可以直接复制粘贴了！

1、在主题目录下新建一个页面名字随意，代码如下：

{* Template Name:壁纸页模板 *}
<!DOCTYPE html>
<html xml:lang="{$lang['lang_bcp47']}" lang="{$lang['lang_bcp47']}">
<head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
{template:header}
<style>
    .content{
        display:none;
    }
    .container{
        width: 70%;
        float: left;
        display: inline;
    }
    
    .tags{
        display: inline-block;
        background: #fff;
        padding: 20px 0;
    }
    .tags li{
        user-select: none;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        background: #f2f6fc;
        height: 28px;
        line-height: 28px;
        border-radius: 14px;
        cursor: pointer;
        color: #000;
        font-size: 14px;
        padding: 0 15px;
        text-align: center; 
        float: left;
        margin: 5px 10px;
    }
    .tags li.active{
        transform: translateY(-2px);
        color: #fff;
        background:#36af18;
        box-shadow: 0 5px 5px rgba(0,0,0,0.1);
    }
    #walBox .oneImg{
        width: 33.3%;
        float: left;
        height: 160px;
        overflow: hidden;
    }
    #walBox img {
        width: 100%;
        border-radius: 10px;
    }
    .alert{
        position: fixed;
        width: 100%;
        height: 100vh;
        z-index: 999;
        background: #607d8bbf;
        top: 0;
        left: 0;
    }
    .down{
        width: 200px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 20px rgba(64, 64, 64, 0.15);
        position: relative;
        left: 50%;
        margin-left: -100px;
        transform: translate3d(0, 200%, 0);
        text-align: center;
        
    }
    .down li{
        padding: 5px 0;
    }
    .down li a{
        color: #000;
        font-weight: 600;
        font-size: larger;
    }
    @media screen and (max-width: 1080px){
        .container {width: 100%;}
        .tags li{margin: 5px 0px;width: 25%;}
        #walBox .oneImg {width: 50%;}
        
    }
        
</style>
 
</head>
<body class="{$type}{if GetVars('night','COOKIE') } night{/if}">
<div>
    {template:navbar}
     
    
    <div class="main{if $zbp->Config('tpure')->PostFIXMENUON=='1'} fixed{/if}">
        {if $zbp->Config('tpure')->PostBANNERON == '1' && $zbp->Config('tpure')->PostBANNERALLON == '1'}
            <div data-type="display" data-speed="2" style="
            {if !tpure_isMobile()}height:{$zbp->Config('tpure')->PostBANNERPCHEIGHT}px;{else}height:{$zbp->Config('tpure')->PostBANNERMHEIGHT}px;{/if}
            background-image:url({$zbp->Config('tpure')->PostBANNER});"><div>{if $zbp->Config('tpure')->PostBANNERFONT}<h2>{$title}</h2>{/if}</div>
            </div>
        {/if}
         
        
        <div{if $zbp->Config('tpure')->PostFIXSIDEBARSTYLE=='0'} id="hcsticky"{/if}>
             
            {if $article.Type==ZC_POST_TYPE_ARTICLE}
                {template:post-single}
            {else}
                {template:post-page}
            {/if}
         
             
           
            <div>
                <ul id="tags"></ul> 
                <div id="walBox"></div>   
                
                <div id="loadmore" style="text-align:center">
                    <img src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4='> 
                </div>
            
            </div>
            <div id="bodyimg"></div>  
        
        <a id="toolBall" target="_blank" href="javascript:void(0);"></a>
        
        
    </div>
    </div>
</div>


{template:footer}
<script src="{$host}zb_users/theme/{$theme}/script/bzscript.js?v={$zbp->themeapp->version}1.3"></script> 
  
</body>
</html>

创建页面之后，再下载一个js代码放到模板的文件夹里，位置不重要，我放在主题的script文件夹里面了，你可以随意放只要修改一下上面php页面底部的路径就好了

js的代码也给你准备好了，直接访问下面的链接然后右键保存即可。请勿直接用到自己的网站，否则后果自负！

https://www.liuzhixi.cn/zb_users/theme/tpure/script/bzscript.js

然后在网站根目录创建一个名字为bzapi.php的文件，代码如下：

<?php
$cid = getParam('cid', '360new');

switch($cid){
    case '360new':  // 360壁纸 新图片
        $start = getParam('start', 0);
        $count = getParam('count', 10);
        echojson (file_get_contents("http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByOrder&order=create_time&start={$start}&count={$count}&from=360chrome"));
    break;
    
    case '360tags':
        echojson (file_get_contents("http://cdn.apc.360.cn/index.php?c=WallPaper&a=getAllCategoriesV2&from=360chrome"));
    break; 
    
    default:
        $start = getParam('start', 0);
        $count = getParam('count', 10);
        echojson (file_get_contents("http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid={$cid}&start={$start}&count={$count}&from=360chrome"));
}


/**
 * 获取GET或POST过来的参数
 * @param $key 键值
 * @param $default 默认值
 * @return 获取到的内容（没有则为默认值）
 */
function getParam($key,$default=''){
    return trim($key && is_string($key) ? (isset($_POST[$key]) ? $_POST[$key] : (isset($_GET[$key]) ? $_GET[$key] : $default)) : $default);
}

/**
 * 输出一个json或jsonp格式的内容
 * @param $data 数组内容
 */
function echojson($data){//json和jsonp通用
    echo $data;
}

代码部分都全部完成了，最后去后台操作一下，步骤如下：