【教程】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):
        continue
    print(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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Python跨年烟花秀

Python跨年烟花秀

写在前面 今年跨年怎么过呢~博主用python的pygame实现了一场炫酷的烟花秀，一起来看看吧！ 环境需求 python3.11.4及以上PyCharm Community Edition 2023.2.5pyinstaller6.2.0（可选，这个库用于打包，使程序没有python环境…
阅读更多...
使用yolov5的2.0分支训练自己的模型并在x3派运行

使用yolov5的2.0分支训练自己的模型并在x3派运行

目录 准备代码、权重、数据集配置环境准备数据标注数据 训练模型转换模型验证模型准备校准数据转换为板上模型模型精度分析 上板 之前训练自己模型的时候使用的是博主 bubbling的1.0分支的代码，博主的 博客比较详细，使用的是VOC2007数据集，…
阅读更多...
迷宫问题的对比实验研究（代码注释详细、迷宫及路径可视化）

迷宫问题的对比实验研究（代码注释详细、迷宫及路径可视化）

题目描述 对不同的迷宫进行算法问题，广度优先、深度优先、以及人工智能上介绍的一些算法：例如A*算法，蚁群算法等。 基本要求： （1）从文件读入9*9的迷宫，设置入口和出口，分别采用以上方…
阅读更多...
基于huffman编解码的图像压缩算法matlab仿真

基于huffman编解码的图像压缩算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 Huffman编码算法步骤 4.2 Huffman编码的数学原理 4.3 基于Huffman编解码的图像压缩 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ..…
阅读更多...
基于ElementUI二次封装el-table与el-pagination分页组件[实际项目使用]

基于ElementUI二次封装el-table与el-pagination分页组件[实际项目使用]

效果&#xff1a; 二次封装el-table组件 <template><div><!-- showHeader:是否显示头部size:表格的大小height:表格的高度isStripe:表格是否为斑马纹类型tableData:表格数据源isBorder:是否表格边框handleSelectionChange:行选中&#xff0c;多选内容发生变化回…
阅读更多...
遗传算法的应用——求解一元函数的极值

遗传算法的应用——求解一元函数的极值

遗传算法的应用——求解一元函数的极值 1 基本概念2 预备知识3.1 模拟二进制转化为十进制的方法3.2 轮盘赌选择算法 3 问题4 Matlab代码5 运行效果6 总结 1 基本概念 遗传算法(Genetic Algorithm,GA)是模拟生物在自然环境中遗传和进化过程从而形成的随机全局搜索和优化方法&am…
阅读更多...
3D视觉-结构光测量-多线结构光测量

3D视觉-结构光测量-多线结构光测量

工作原理 多线结构光测量在测量方式上类似上述线结构光测量&#xff0c;但是两者也有着一些明显的差别。这种形式的结构光测量&#xff0c;也常常被成为面结构光测量。首先激光器发出电光源通过通过光栅的调制产生多个切片光束&#xff0c;这些切片光束照射到待测物体表面后形成…
阅读更多...
2023第三届中国高校大数据挑战赛B题代码

2023第三届中国高校大数据挑战赛B题代码

任务已完成&#xff0c;聚类效果很好&#xff08;主要在于数据的处理以及特征工程&#xff09;, 需代码si&#xff0c;yuer有限先到先得。
阅读更多...
AI测试｜颠覆客户端UI自动化？别担心，你还不会失业！AppAgent框架简单试用

AI测试｜颠覆客户端UI自动化？别担心，你还不会失业！AppAgent框架简单试用

01 AppAgent会成为新的趋势吗&#xff1f; 近日&#xff0c;腾讯团队发表了一篇论文&#xff0c;并开源了一款基于大语言模型的&#xff0c;用于手机端执行复杂任务的多模态智能代理框架——AppAgent。该框架设计的初衷&#xff0c;是让 AI 智能体能自己操作手机&#xff0c;完…
阅读更多...
数据压缩专题——静止图像的小波变换编码

数据压缩专题——静止图像的小波变换编码

随着数字图像技术的发展和应用的广泛&#xff0c;对图像的压缩和编码变得越来越重要。小波变换编码作为一种有效的图像压缩和编码方法&#xff0c;在静止图像处理中得到了广泛应用。本文将介绍静止图像的小波变换编码的基本原理和关键步骤&#xff0c;以及其在图像压缩中的应用…
阅读更多...
Baumer工业相机堡盟工业相机如何通过NEOAPI SDK获取相机当前实时帧率（C++）

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK获取相机当前实时帧率（C++）

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK获取相机当前实时帧率&#xff08;C&#xff09; Baumer工业相机Baumer工业相机的帧率的技术背景Baumer工业相机的帧率获取方式CameraExplorer如何查看相机帧率信息在NEOAPI SDK里通过函数获取相机帧率&#xff08;C&#xff09; …
阅读更多...
前后端分离nodejs+vue医院预约挂号系统6nrhh

前后端分离nodejs+vue医院预约挂号系统6nrhh

医院预约挂号系统主要有管理员、用户和医生三个功能模块。以下将对这三个功能的作用进行详细的剖析。 运行软件:vscode 前端nodejsvueElementUi 语言 node.js 框架&#xff1a;Express/koa 前端:Vue.js 数据库&#xff1a;mysql 开发软件&#xff1a;VScode/webstorm/hbuiderx均…
阅读更多...
HBuilder常用的快捷键

HBuilder常用的快捷键

查看专栏目录 Network 灰鸽宝典专栏主要关注服务器的配置&#xff0c;前后端开发环境的配置&#xff0c;编辑器的配置&#xff0c;网络服务的配置&#xff0c;网络命令的应用与配置&#xff0c;windows常见问题的解决等。 文章目录 常用快捷键分9项快捷键1.文件(4)2.编辑(13)3.…
阅读更多...
JavaScript系列——正则表达式

JavaScript系列——正则表达式

文章目录 需求场景正则表达式的定义创建正则表达式通过 / 表示式/ 创建通过构造函数创建 编写一个正则表达式的模式使用简单模式使用特殊字符常用特殊字符列表特殊字符组和范围 正则表达式使用代码演示 常用示例验证手机号码合法性 小结 需求场景 在前端开发领域&#xff0c;在…
阅读更多...
Idea中使用Tomcat部署并启动Web项目

Idea中使用Tomcat部署并启动Web项目

首先在Idea中选择编辑运行配置&#xff0c;如下图 左上角的“”号&#xff0c;选择Tomcat服务&#xff0c;如下图 自定义服务名称和项目在浏览器的访问路径 配置Tomcat服务器路径&#xff0c;如下图 然后在服务器中部署项目&#xff08;下面的警告提示&#xff1a;Warning: No …
阅读更多...
PostgreSQL 作为向量数据库：入门和扩展

PostgreSQL 作为向量数据库：入门和扩展

PostgreSQL 拥有丰富的扩展和解决方案生态系统&#xff0c;使我们能够将该数据库用于通用人工智能应用程序。本指南将引导您完成使用 PostgreSQL 作为向量数据库构建生成式 AI 应用程序所需的步骤。 我们将从pgvector 扩展开始&#xff0c;它使 Postgres 具有特定于向量数据库…
阅读更多...
HCIP：rip综合实验

HCIP：rip综合实验

实验要求&#xff1a; 【R1-R2-R3-R4-R5运行RIPV2】 【R6-R7运行RIPV1】 1.使用合理IP地址规划网络&#xff0c;各自创建环回接口 2.R1创建环回 172.16.1.1/24 172.16.2.1/24 172.16.3.1/24 3.要求R3使用R2访问R1环回 4.加快网络收敛&#xff0c;减少路由条目数量&#xff0c;增…
阅读更多...
Vue 框架前导：详解 Ajax

Vue 框架前导：详解 Ajax

Ajax Ajax 是异步的 JavaScript 和 XML。简单来说就是使用 XMLHttpRequest 对象和服务器通信。可以使用 JSON、XML、HTML 和 text 文本格式来发送和接收数据。具有异步的特性&#xff0c;可在不刷新页面的情况下实现和服务器的通信&#xff0c;交换数据或者更新页面 01. 体验 A…
阅读更多...
golang 图片加水印

golang 图片加水印

需求&#xff1a; 1&#xff0c;员工签到图片加水印 2&#xff0c;水印文字需要有半透明的底色&#xff0c;避免水印看不清 3&#xff0c;图片宽设置在600&#xff0c;小于600或者大于600都需要等比例修改图片的高度&#xff0c;保持水印在图片中的大小和位置 4&#xff0c;处理…
阅读更多...
湘潭大学-2023年下学期-c语言-作业0x0a-综合1

湘潭大学-2023年下学期-c语言-作业0x0a-综合1

A 求最小公倍数 #include<stdio.h>int gcd(int a,int b) {return b>0?gcd(b,a%b):a; }int main() {int a,b;while(~scanf("%d%d",&a,&b)){if(a0&&b0) break;printf("%d\n",a*b/gcd(a,b));}return 0; }记住最大公约数的函数&…
阅读更多...
最新文章

Copyright @ 2022~2023