【教程】Typecho Joe主题开启并修复壁纸相册不显示问题

转载请注明出处:小锋学长生活大爆炸[xfxuezhang.cn]

背景说明

        Joe主题本身支持“壁纸”功能,其实就是相册。当时还在网上找了好久相册部署的开源项目,太傻了。

        但是网上教程很少,一没说如何开启壁纸功能,二没说开启后为何不显示图片,三没说如何显示自定义图片。

        通过层层深扒源码,我已经成功修复并实现了上述问题。所以,这个重任还是由我来吧。接下来将是非常详细的图文教程,小白有手就行。

开启壁纸

        进入后台,创建独立页面

        

        标题随便填,最关键的是模板要选“壁纸”

        直接发布页面即可

        发布后点上面这个提示进去页面

比如我的:https://xfxuezhang.cn/index.php/tuji.html

        此时你会看到一直在转圈圈,你也不知道如何去添加图片

修复显示

        SSH进入服务器后台,进到Joe主题下面的public目录。这个路径都是一样的,直接复制即可

cd /var/www/html/usr/themes/Joe/public/

        打开route.php,直接替换里面的两个函数

vim route.php

function _getWallpaperType($self)  改成

/* 获取壁纸分类 已测试 √ */
function _getWallpaperType($self)
{header('Content-Type: application/json');$self->response->setStatus(200);$json = file_get_contents("http://cdn.apc.360.cn/index.php?c=WallPaper&a=getAllCategoriesV2&from=360chrome");$res = json_decode($json, TRUE);if ($res['errno'] == 0) {$self->response->throwJson(["code" => 1,"data" => $res['data']]);} else {$self->response->throwJson(["code" => 0,"data" => null]);}
}

function _getWallpaperList($self)  改成

/* 获取壁纸列表 已测试 √ */
function _getWallpaperList($self)
{header('Content-Type: application/json');$self->response->setStatus(200);$cid = $self->request->cid;$start = $self->request->start;$count = $self->request->count;$json = file_get_contents("http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid={$cid}&start={$start}&count={$count}&from=360chrome");$res = json_decode($json, TRUE);if ($res['errno'] == 0) {// 数据总数$total = $res['total'];$self->response->throwJson(["code" => 1,"data" => $res['data'],"total" => $total]);} else {$self->response->throwJson(["code" => 0,"data" => null]);}}

        保存后刷新页面,就可以惊喜的发现能成功显示360壁纸了

自定义图片

        那如何让它显示我们自己的图片呢?Joe显示壁纸的代码是固定的,所以我们只需要按照360壁纸的接口来设计我们的服务api就行。

壁纸分类接口

        先看壁纸分类,360接口示例:

http://cdn.apc.360.cn/index.php?c=WallPaper&a=getAllCategoriesV2&from=360chrome

        实际有用的

{"errno": "0","total": "1","data": [{"id": "1","name": "xxx"}]
}

        如果你有服务程序开着,那么就返回这种类型的数据就行。我不想单独再开个监听服务程序,所以后面会讲我的简单方法。

壁纸图片接口

        对于根据分类获取图片的360接口:

http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid={$cid}&start={$start}&count={$count}&from=360chrome

        实际有用的:

{"errno": "0","total": "1884","data": [{"id": "1","url": "http://xfxuezhang.cn/mypics/1/0366_PT1814-2_7E8DB7C0.jpg"},]
}

        同样的, 如果你有服务程序开着,那么就返回这种类型的数据就行。我不想单独再开个监听服务程序,所以后面会讲我的简单方法。

替换自己的图片

        超级简单的方法。直接在网站目录下创建一个文件夹,里面每个子目录就是一个分类,子目录名是cid,分类信息用image_types.json保存,图片信息用image_details_{cid}.json保存,而generate.py可以根据子目录自动生成image_details_{cid}.json。

        举个栗子,我创建了mypics目录

mkdir /var/www/html/mypics

        目录结构:

        子目录1中的内容:

image_types.json

{"errno": "0","total": "1","data": [{"id": "1","name": "涂料印花"}]
}

generate.py

import os
import json# 指定图片存放的目录
pics_directory = "./"# 遍历pics_directory目录下的子目录
for cid in os.listdir(pics_directory):if not os.path.isdir(cid):continueprint(f">> 正在处理:{cid}")# 构建JSON文件路径json_file_path = os.path.join(pics_directory, cid, f"image_details_{cid}.json")output_file = os.path.join(pics_directory, f"image_details_{cid}.json")# 获取子目录下的所有图片文件image_files = os.listdir(os.path.join(pics_directory, cid))# 构建JSON数据json_data = {"errno": "0","total": str(len(image_files)),"data": [{"id": str(i + 1), "url": f"https://xfxuezhang.cn/mypics/{cid}/{image}"}for i, image in enumerate(image_files)]}# 将JSON数据写入文件 with open(output_file, 'w') as json_file:json.dump(json_data, json_file, indent=2)print(f"Generated {output_file}")

执行generate.py生成image_details_1.json:

python generate.py

image_details_1.json

{"errno": "0","total": "2","data": [{"id": "1","url": "http://xfxuezhang.cn/mypics/1/0366_PT1814-2_7E8DB7C0.jpg"},{"id": "3","url": "http://xfxuezhang.cn/mypics/1/0366_PT1814-2_7E8DB7C0.jpg"},]
}

        最主要的!还要去修改route.php中的两个函数!

function _getWallpaperType($self)  改为

/* 获取壁纸分类 已测试 √ */
function _getWallpaperType($self)
{// 允许所有域的跨域请求header("Access-Control-Allow-Origin: *");header("Access-Control-Allow-Methods: GET, POST, OPTIONS");header("Access-Control-Allow-Headers: Content-Type");header("Access-Control-Max-Age: 86400");header('Content-Type: application/json');$self->response->setStatus(200);// $json = file_get_contents("http://cdn.apc.360.cn/index.php?c=WallPaper&a=getAllCategoriesV2&from=360chrome");$json = file_get_contents("http://xfxuezhang.cn/mypics/image_types.json");$res = json_decode($json, TRUE);if ($res['errno'] == 0) {$self->response->throwJson(["code" => 1,"data" => $res['data']]);} else {$self->response->throwJson(["code" => 0,"data" => null]);}
}

function _getWallpaperList($self)  改为

/* 获取壁纸列表 已测试 √ */
function _getWallpaperList($self)
{// 允许所有域的跨域请求header("Access-Control-Allow-Origin: *");header("Access-Control-Allow-Methods: GET, POST, OPTIONS");header("Access-Control-Allow-Headers: Content-Type");header("Access-Control-Max-Age: 86400");header('Content-Type: application/json');$self->response->setStatus(200);$cid = $self->request->cid;$start = $self->request->start;$count = $self->request->count;// $json = file_get_contents("http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid={$cid}&start={$start}&count={$count}&from=360chrome");$json = file_get_contents("http://xfxuezhang.cn/mypics/image_details_{$cid}.json");$res = json_decode($json, TRUE);if ($res['errno'] == 0) {// 数据总数$total = $res['total'];// 对数据进行分割$startIndex = $start;$endIndex = $startIndex + $count;$slicedData = array_slice($res['data'], $startIndex, $count);$self->response->throwJson(["code" => 1,"data" => $slicedData,"total" => $total]);} else {$self->response->throwJson(["code" => 0,"data" => null]);}}

        改完保存后,去刷新壁纸页面,就可以看到已经顺便变成我们自己的图了

后续修改

        之后要调整内容,就只需要在mypics目录下放个子目录,然后手动将这个子目录信息写到image_types.json,然后直接执行generate.py就可以了。

进阶加速方法

        图片会占用大量内存,如果资金充足可以买一个CDN。另一种方法是加上缓存。对于Typecho可以用这个插件:

GitHub - gogobody/TpCache: 一个 typecho 缓存插件

        注意需要开启php-redis,比如我的是php8.1版本:

sudo apt install php8.1-redis

        然后安装redis:

sudo apt install redis-server -y

        然后就是常规插件的开启方法,大家都会的。可以参考我的设置:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/587166.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023年终总结:耕辍断续应犹在,碌而不暇仍少年

Author:AXYZdong 硕士在读 工科男 有一点思考,有一点想法,有一点理性! 定个小小目标,努力成为习惯!在最美的年华遇见更好的自己! CSDNAXYZdong,CSDN首发,AXYZdong原创 唯…

【JavaWeb】反射与模块化(学习笔记)

一、类加载器 1、类加载 1)类加载方式 JVM通过类的加载,类的连接,类的初始化对类进行初始化 类的加载:class文件读入内存,创建java.lang.Class对象 2)类的连接 验证:检验类 准备&#xf…

SpringBoot简单整合mybatis

1. maven依赖 <!-- mybatis --> <dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>1.3.1</version></dependency><!-- mysql驱动 -->&…

华为OD机试 - 螺旋数字矩阵(Java JS Python C)

题目描述 疫情期间,小明隔离在家,百无聊赖,在纸上写数字玩。他发明了一种写法: 给出数字个数 n (0 < n ≤ 999)和行数 m(0 < m ≤ 999),从左上角的 1 开始,按照顺时针螺旋向内写方式,依次写出2,3,....,n,最终形成一个 m 行矩阵。 小明对这个矩阵有些要求:…

精品Nodejs实现的校园疫情防控管理系统的设计与实现健康打卡

《[含文档PPT源码等]精品Nodejs实现的校园疫情防控管理系统的设计与实现[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; 操作系统&#xff1a;Windows 10、Windows 7、Win…

Docker 概述以及整体架构

文章目录 一、Docker概述1.1 什么是 Docker1.2 Docker 如何工作1.3 底层技术 二、Docker架构2.1 Docker 整体架构2.2 Docker daemon2.3 Docker client2.4 Docker registries2.5 Docker objects2.6 Docker Desktop 参考资料 一、Docker概述 1.1 什么是 Docker Docker是一个用于…

【Linux专区】如何配置新服务器 | 添加普通用户到sudoers | 配置vim | git免账号密码pull push

&#x1f49e;&#x1f49e;欢迎来到 Claffic 的博客&#x1f49e;&#x1f49e; &#x1f449; 专栏&#xff1a;《Linux专区》&#x1f448; &#x1f4ac;前言&#xff1a; 时隔131天&#xff0c;你的好友Claffic重新发文了&#xff01;(✿◕‿◕✿) 上期已经带大家白嫖了阿…

PHP获取今天,昨天,本周,本月,季度,年份等特殊时间戳方法整理

获取当前时间戳与日期格式时间 time() //获取当前十位时间戳 msectime() //获取当前十三位时间戳 date(Y-m-d h:m:s) //获取当前日期格式时间 今天时间戳与日期 时间戳 $startTime strtotime(date(Y-m-d).00:00:00); $overTime strtotime(date(Y-m-d).23:59:59); 日期…

【MATLAB】PSO粒子群优化LSTM(PSO_LSTM)的时间序列预测

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 PSO粒子群优化LSTM&#xff08;PSO-LSTM&#xff09;是一种将粒子群优化算法&#xff08;PSO&#xff09;与长短期记忆神经网络&#xff08;LSTM&#xff09;相结合的混合模型。该算法通过…

什么是 JavaScript 中的 WeakMap

在 JavaScript 中&#xff0c;WeakMap 是一种特殊的 Map 数据结构&#xff0c;它允许将对象作为键&#xff0c;而且键值对是弱引用的关系。 与 Map 不同的是&#xff0c;WeakMap 的键只能是对象&#xff0c;不能是其他类型的值。同时&#xff0c;当键对象没有任何引用时&#…

一篇文章掌握SpringCloud与SpringCloud Alibaba的区别

目录 一、SpringCloud组件的升级与替换 二、服务注册中心的比较 1、根据CAP理论对注册中心进行分类 2、Zookeeper通过Zab协议保证强一致性 3、Eureka保证高可用性 4、Nacos既支持AP模式又支持CP模式 三、服务调用框架的比较 1、Ribbon 2、OpenFeign 3、Dubbo 四、服…

设计模式之初始设计模式和UML图

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

SSH远程登陆服务器

截取自文章&#xff1a;SSH简介及两种远程登录的方法_ssh -CSDN博客 SSH的安装 SSH分为客户端 openssh-client 和服务器 openssh-server&#xff0c;可以利用以下命令确认电脑上是否安装了客户端和服务器。 dpkg -l | grep ssh 如果只是想远程登陆别的机器只需要安装客户端&…

web播放rtsp流视频,使用webrtc毫秒级延迟

目录 一、zlmediakit环境搭建和编译 1)、下载zlmediakit 2)、安装依赖 3)、编译webrtc 4)、启动zlmediakit 二、播放webrtc视频 1)、动态添加拉流代理 2)、播放视频 三、嵌入到自己的vue项目中。 1)、拷贝demo到自己的vue项目中 2)、mkcert生成证书 背景&#xff1…

shell shell脚本编写常用命令 语法 shell 脚本工具推荐

shell 脚本 计算机语言 Shebang 定义解释器 主要定义&#xff0c;您的脚本是用什么语言写的 #!/usr/bin/python //定义这是一个python语言#!/bin/bash //定义这是一个shell语言 echo SHELL我们执行的 linux 命令的时候&#xff0c;其实是使用 /bin/bash 这个二进制文…

鸿蒙应用开发 应用内字体大小调节

1 数据管理概述 在移动互联网蓬勃发展的今天&#xff0c;移动应用给我们生活带来了极大的便利&#xff0c;这些便利的本质在于数据的互联互通。因此在应用的开发中数据存储占据了非常重要的位置&#xff0c;HarmonyOS 应用开发也不例外。 本文将为您介绍 HarmonyOS 提供的数据…

stm32 HAL库 4096线ABZ编码器

[TOC]目录 ABZ编码器 4096线 买的是这个 AB相代表计数方向&#xff0c;Z代表过零点 cubemx配置 定时器Encoder 也可以选上DMA 中断 Z相GPIO中断 找一个空闲管脚 打开对应中断 代码 不用DMA int main(void) {short Enc_cnt 0;HAL_TIM_Encoder_Start_IT(&ht…

DrGraph原理示教 - OpenCV 4 功能 - 单通道图

通道 OpenCV的核心处理对象是Mat&#xff0c;大体是一个二维数组&#xff0c;加上了各种功能函数。 很多的图像处理&#xff0c;会在单通道或二值化的基础上进行&#xff0c;比如连通域、目标识别等。这里的通道就是channels。 不同的图像处理算法可能对通道数有特定的要求。例…

HTML5+CSS3+JS小实例:过年3D烟花秀

实例:过年3D烟花秀 技术栈:HTML+CSS+JS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><…