作者: Jet L

  • 【网站】让WordPress封面区块的视频背景支持在微信环境下自动切换为照片

    移动版本的微信,在其内置的微信WEB环境中,对视频播放有很多限制,如果我们的封面区块想设置视频,就会出现无法加载播放的情况。

    为了解决这个问题,我去看了一下一些大厂的做法,当然大厂用的肯定不是WP,不过思路是可以借鉴的。

    华为的做法是用一个JS来判断是否是微信环境,如果是微信环境则切换到图片。OPPO的做法更加直接,他们直接用图片+动画的形式解决了视频这个问题,emm通用性确实刚刚的。

    那么我们在WP下,使用原版的封面区块是否可以进行类似的切换呢?也是可以的,原理是在区块代码中插入一个图片,利用一个简单的IF判断来实现微信环境下的自动切换。

    具体代码如下:

    <!-- wp:cover {"url":"//默认图片地址","id":588,"dimRatio":50,"overlayColor":"contrast","isUserOverlayColor":true,"backgroundType":"video","minHeight":840,"minHeightUnit":"px","isDark":false,"className":"main-container","layout":{"type":"constrained"}} -->
    <div class="wp-block-cover is-light main-container" style="min-height:840px">
        <span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim"></span>
    
        <!-- 视频背景,添加 id="background-video" -->
        <video id="background-video" class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline 
            src="//视频地址" data-object-fit="cover">
        </video>
    
        <!-- 备用静态图片,默认隐藏 -->
        <img id="background-image" src="//图片地址" 
            alt="Background Image" style="display:none; width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;">
    
        <div class="wp-block-cover__inner-container">
            <!-- 可添加文本或其他内容 -->
        </div>
    </div>
    <!-- /wp:cover -->
    
    <script>
    document.addEventListener("DOMContentLoaded", function () {
        function isWeChatBrowser() {
            return /MicroMessenger/i.test(navigator.userAgent);
        }
    
        if (isWeChatBrowser()) {
            let video = document.getElementById("background-video");
            let image = document.getElementById("background-image");
    
            if (video && image) {
                video.style.display = "none"; // 隐藏视频
                image.style.display = "block"; // 显示备用图片
            }
        }
    });
    </script>
    
  • 【网站】WordPress中如何获得无间隔的区块

        "spacing": {
            "blockGap": "1.2rem",
            "padding": {
                "left": "var:preset|spacing|50",
                "right": "var:preset|spacing|50"
            }
        },

    6.X版本的Wordpress中,区块之间会有一个默认1.2rem的间隔,这个间隔在页眉页脚设置中会与其他不同色彩的区块产生非常显眼的割裂,或者同一种非白色区块中间产生间隔缝隙。

    如何修改这个问题?很简单,我们可以在主题样式和区块设置 (theme.json)中进行更改,去掉这个间隔,让我们的区块背景更加融合或者分离的更明显,具体如上代码,找到 “spacing” 中的 “blockGap” 部分,将预设的 “1.2rem” 改为null即可(不用带引号),修改完毕的代码如下所示↓

    修改完毕后最好检查一下页面是否有其他区块被影响,目前观察容易受到影响的有导航栏,可以在其单独的样式中针对性调整区块间隔。

        "spacing": {
            "blockGap": null,
            "padding": {
                "left": "var:preset|spacing|50",
                "right": "var:preset|spacing|50"
            }
        },
  • 【音乐】《问月》——你可听过百年故事千年唱

    歌词:

    玉盘玉盘

    你为何悬于屋顶上

    玉盘玉盘

    你为何白白送银光

    玉盘玉盘

    你为何有时招摇有时藏

    有时瘦来有时胖

    玉盘玉盘

    你可曾装过喜时糖

    玉盘玉盘

    你可曾见过别时泪长淌

    玉盘玉盘

    你可曾听过百年故事千年唱

    长诗逾万行

    月亮月亮心头光

    月光月光亮汪汪

    月亮月亮

    那孩子正抬头凝望

    请仙鹤来访

    直驾九天上

    玉盘玉盘

    太白和眼睛谁比较璀璨

    玉盘玉盘

    金乌和嫦娥谁比较孤单

    玉盘玉盘

    是什么亮闪闪推动我的小船

    有时明来有时暗

    玉盘玉盘

    那天宫是否有答案

    玉盘玉盘

    那大圣取经何时还

    玉盘玉盘

    那孩子乘风越过天上万重山

    漫漫漫漫漫漫向星汉

    月亮月亮太极长

    月光月光浩茫茫

    月亮月亮

    那孩子已拂去风霜

    为他揽星辰

    带他回故乡

    月亮月亮太极长

    月光月光浩茫茫

    月亮月亮

    那孩子已拂去风霜

    为他揽星辰

    带他回故乡

    月亮月亮 嘿 月亮

    抬头凝望,玉盘悬于屋顶上,今人不见古时月,今月曾经照古人。从古人对广寒宫的朴素畅想,到如今的玉兔在月,鹊桥环绕,无论阴晴圆缺,月亮始终伴随中华民族的成长,见证无数聚散,其已经成为一个意义丰富的文化符号。

    今年的春晚我并没有认真看,这两天却听到了其中的《玉盘》,这简单重复的旋律,却有一种特别的引力,因此我找到了《问月》,也知道了谭淇尹、葫芦童声、妞妞合唱团,知道了歌曲背后的故事,了解了一群可爱的孩子。

    说来有趣,我最喜欢的主旋律歌曲也和航天有关——《祖国不会忘记》,说来有趣,我也和凉山的孩子有过一些间接的接触——通过敬爱的支教老师,也捐赠过一些学习用品。

    因此在听这首歌时候,更有一些别样的情感,难以一言以蔽之,有对文化的回响,有对经历的共鸣,有对星空的畅想,鉴于这是一首与航天有关的曲子,更有康斯坦丁·齐奥尔科夫斯基的话语——“地球是人类的摇篮,但人类不可能永远被束缚在摇篮里”。

    回顾这几年,有的人类在摇篮里厮杀,也有人类试图朝着太空不断进发(当然也有人想回还没回来(X))但愿月亮成为人类的前进的基地,携手向更远的世界探索,让未来的百年或者千年故事可以传唱其他的行星、卫星或者恒星,毕竟我们已经对着月亮唱了千年。

  • 【小贴士】WordPress主题更新的问题

    我的网站一般通过functions.php文件来加载特定的JS代码或CSS,这样虽然有一定的灵活性,但是WordPress主题文件更新时,其会将用户上传到主题文件夹的代码删除,也会重置functions.php文件,不过不用太担心,这个操作在你点击更新之前会进行提示而非全自动就给你覆盖掉了。

    因此必须定期备份修改过的文件,此外也可以考虑采用子主题——Child Theme,这个操作可以参考WordPress的子主题介绍来进行。

    其中对于如何上传自主题、如何修改functions.php,都有较为详细的解释。

  • 【Ai】在Windows系统本地部署DeepSeek-R1的极简步骤

    惊闻B站有人出售百元本地部署教程,NND给我看笑了,什么都能卖钱是吧,当然不排除人家手把手教,提供足够的情绪价值。

    但是如果你不想花钱,同时想提升一下英文水平和计算机熟练度,请跟着官方文档一步步进行,目前的文档已经相当详细且可行。

    我们如果在Windows上进行部署和调试,推荐使用Open WebUi+Ollama的方式进行部署。

    PS:其实更建议在Linux上进行部署,一键部署更加便利~

    1、选择后端Ollama

    在Ollama官网选择Win版本下载,会自动部署相关环境,在CMD或者中powershell可以按照对应的模型拉取到本地。

    请根据自己的硬件量力而行。我的显卡为RTX3070 8G,按照ollama默认设置,运行7B已经亚历山大。

    2、选择前端Open-WebUi

    请根据您的系统,在Open-WebUi的官方文档,按照步骤,一步步来进行部署。

    Win版本下按照官方建议,可以使用uv,在powershell中进行拉取和部署,其中对网络环境有一定要求。

    3、启动Open-WebUi后的注意事项

    Open-WebUi原版毕竟是国外软件,在国内这个环境启动还是有一点网络困扰的,尤其是有些文件是通过Github的地址获取的,请对自己的网络环境做出一些针对性的优化调整。

    另外完成本地部署后,如果是启动在127.0.0.1上,那么检查ollama的端口是否running,一般按照官方部署都可以进行顺畅进行(只有国内这个网不太顺畅)

    此外Open-WebUi默认检查OpenAi的API,这个选项可以在首次登陆后去管理员面板关闭,这样不会每次启动都遇到拉取模型缓慢、超时的情况。

    4、其他分享

    我的电脑采用13700K 32G DDR5 RTX3070 8G,但大模型运行需要大显存,8G显存只能算起步,参数量只能流畅运行7B左右的模型,因此一般的家用和办公电脑跑大模型都存在很大的限制。

    RTX3070 8G跑DeepSeek-R1:7B的速度——显存爆满,ollama默认设置,显示CPU处理占用10%,GPU处理占用90%,常规问答的response token/s在39左右 ,prompt_token/s在2500左右。但是大模型性能存在一定的短板,长上下文效果不尽如人意。

    RTX3070 8G跑DeepSeek-R1:14B,ollama默认设置命令行中速度可以接受,在WebUi中短回答response token/s约为14,较长的上下文降低到7不到,一半跑在GPU一半跑在CPU,长文本效果很差。

    RTX3070 8G跑DeepSeek-R1:32B,ollama默认设置在命令行中速度还行,缓慢但可以简单对话,处理长文本速度基本不可用。若用13700K跑在CPU则32G内容跑满,速度也是非常慢。

    在跑完Ai测试后,请关闭Ollama的进程,否则你将面临满占用的显存或内存~

    5、体验

    搭配Open-WebUi可以实现本地部署,多端使用,但是对体验影响更大的限制——模型本身——我们个人、及小公司的计算性能均没法有效支撑,本来大模型就是为了提升效率,本地部署一个跑的死慢的模型,对效率的提升实在是存疑。

    当然我鼓励大家都去本地部署体验一下,从中也可以获得一些乐趣,但是如果到实际应用层面,大一些的模型硬件需求激增,小公司玩这个自建后端的硬件成本还是太高了。

    因此,对小公司而言,可能选择一个大树,使用API,保护好自己的数据(真的是有价值的数据吗?)进行针对性的训练,拓展自己的RAG系统,做好本地化的情况下拥抱云计算,才是提升小公司效率的一条路吧。

    但话说回来,小公司真的愿意为这个人工和软件成本付费吗?

  • 【Python】提取视频画面并生成PPT

    比较笨的方法,用来提取PPT课程视频画面,并生成对应的PPT,代码检测黑屏但没有检测白屏,没有检测重复画面(因为有些人讲课会来回翻PPT),因此还有优化空间。内存占用会逐渐增多,不过测试没有出现崩溃的情况。

    PS:做完发现可以直接问讲课人要PPT原件,我,,,

    import cv2
    import os
    import numpy as np
    from pptx import Presentation
    from pptx.util import Inches
    from skimage.metrics import structural_similarity as ssim
    import tkinter as tk
    from tkinter import filedialog, messagebox
    
    # 选择视频和输出目录
    def select_video_and_output():
        video_path = filedialog.askopenfilename(title="选择视频文件", filetypes=[("MP4 files", "*.mp4")])
        if not video_path:
            messagebox.showwarning("选择视频", "未选择视频文件")
            return None, None
        
        output_dir = filedialog.askdirectory(title="选择输出目录")
        if not output_dir:
            messagebox.showwarning("选择输出目录", "未选择输出目录")
            return None, None
    
        pptx_path = os.path.join(output_dir, "output_presentation.pptx")
        return video_path, pptx_path
    
    # 处理视频并生成 PPT
    def process_video_to_ppt(video_path, pptx_path):
        os.makedirs("ppt_images", exist_ok=True)
        
        cap = cv2.VideoCapture(video_path)
        _, prev_frame = cap.read()
        prev_gray = cv2.cvtColor(prev_frame, cv2.COLOR_BGR2GRAY)
    
        frame_count = 0
        slide_count = 0
        images = []
        similarity_threshold = 0.95  # 提高 SSIM 阈值,减少相似图片
        brightness_threshold = 10  # 黑屏检测(平均亮度 < 10 认为是黑屏)
    
        def process_frame(frame):
            """ 计算 SSIM 相似度,判断是否保存该帧 """
            nonlocal prev_gray, slide_count
            gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
            score = ssim(prev_gray, gray)
    
            # 计算平均亮度,过滤黑屏
            avg_brightness = np.mean(gray)
            if avg_brightness < brightness_threshold:
                return  # 跳过黑屏帧
    
            if score < similarity_threshold:  
                img_path = os.path.join("ppt_images", f"slide_{slide_count}.jpg")
    
                # 确保不同的幻灯片才保存
                if len(images) == 0 or images[-1] != img_path:  
                    cv2.imwrite(img_path, frame)
                    images.append(img_path)
                    slide_count += 1
                    prev_gray = gray  # 只在确认变化时更新参考帧
    
        while cap.isOpened():
            ret, frame = cap.read()
            if not ret:
                break
    
            # 仅每隔 15 帧处理一次
            if frame_count % 15 == 0:
                process_frame(frame)
    
            frame_count += 1
    
        cap.release()
        # cv2.destroyAllWindows()
    
        # 创建 PPT
        prs = Presentation()
        for img in images:
            slide = prs.slides.add_slide(prs.slide_layouts[5])  # 空白幻灯片
            left, top, width, height = Inches(0), Inches(0), Inches(10), Inches(7.5)
            slide.shapes.add_picture(img, left, top, width, height)
    
        prs.save(pptx_path)
        messagebox.showinfo("完成", f"PPTX 生成完成: {pptx_path}")
    
    # 主函数
    def main():
        root = tk.Tk()
        root.withdraw()  # 隐藏主窗口
        video_path, pptx_path = select_video_and_output()
        if video_path and pptx_path:
            process_video_to_ppt(video_path, pptx_path)
    
    if __name__ == "__main__":
        main()
    
  • 【网站】正确配置Nginx及DNS解析,实现全站裸域名

    网站之前一直是www和裸域名并行,现在有了多个域名,因此想让www直接重定向到裸域名,但是实施过程比我想得要复杂的多。

    一、DNS解析

    设定www域名的CNAME解析,绑定到裸域名。

    二、Nginx配置重定向逻辑

    可以分成几个代码块,此外还需要注意证书的配置,示例:

    1、重定向 HTTP 到 HTTPS,并强制跳转到裸域名:

    server {
    listen 80;
    listen [::]:80;
    server_name example.cn www.example.cn;
    return 301 https://example.cn$request_uri;

    }

    2、重定向 HTTPS 的www 到裸域名

    server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name www.example.cn;
    return 301 https://example.cn$request_uri;

    }

    3、HTTPS 裸域名配置

    server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name example.cn;

    }

    此外,还需要注意的是,Wordpress和Apache2搭配,可以很好的进行重写操作,比如链接结构的更改,但是变更到Nginx之后这种变更就没有那么的自动化了,这个问题在我从Apache2切换到Nginx之后去实现全站配置裸域名时出现得非常频繁。

    如果不想使用插件,可以在配置主站点的各种设置到裸域名后,直接去数据库对post表里的www域名进行查询和替换,实现快速的替换。

    UPDATE wp_posts
    SET post_content = REPLACE(post_content, ‘http://www.example.com’, ‘http://example.com’);

  • 【网站】通过模板函数及WP设置文件配置SMTP邮件服务

    为什么我们需要配置邮件服务?

    第一,配置邮件服务可以避免WP中勾选邮件通知但是后台未配置导致的评论发送延迟。第二,可以让找回密码等服务可用。(也就是你要是没有配置服务所谓的密码找回是无效的,当然有自己服务器的就无所谓了,有更加快捷的方法重置密码)

    服务器注意事项

    前提1:服务器端需要开放465端口。

    前提2:防火墙开放465端口。

    采用465端口是因为云服务器的提供商普遍禁25端口,尝试解封了一下没有什么卵用。

    因此我们可以使用465端口进行邮件服务,国内可以直接使用QQ邮箱,在设置中获取授权码、服务器地址等配置基础信息。Hotmail需要配置另外一套验证机制,有点麻烦了,还是建议使用QQ邮箱,响应速度很快。

    配置步骤

    一般分为两个步骤,对wp-config文件和function模板函数进行修改,其实也可以直接配置模板函数,不过理论上通过WP配置文件配置更加安全,因为权限更高。

    WP-Config:

    // SMTP 配置
    define('HOST', 'smtp.qq.com');// smtp服务器
    define('PORT', 465);// 端口
    define('USERNAME', 'email@qq.com'); // 设置邮箱
    define('PASSWORD', 'password'); // 授权码
    define('SECURE', 'ssl'); // ssl
    define('FROM', 'your_qq_email@qq.com'); // 邮箱
    define('FROM_NAME', 'Name'); // 发件人名称

    模板函数:

    function custom_phpmailer_settings($phpmailer) {
    $phpmailer->isSMTP();
    $phpmailer->Host = HOST;
    $phpmailer->SMTPAuth = true;
    $phpmailer->Port =PORT;
    $phpmailer->Username = USERNAME;
    $phpmailer->Password = PASSWORD;
    $phpmailer->SMTPSecure = SECURE;
    $phpmailer->From = FROM;
    $phpmailer->FromName = FROM_NAME;
    }
    add_action('phpmailer_init', 'custom_phpmailer_settings');
  • 【小贴士】从Apache2切换到Nginx的注意事项

    这两天尝试了一下Apache2,感觉还是Nginx的配置更加直观,因此又切换回了Nginx,不过之前删掉了Nginx,俺寻思我Nginx配置那么多次了,重安装还不是轻轻松松,没想到还是遇到了一系列问题。

    1、Nginx及PHP

    重新安装的Nginx默认用户是Nginx,使用PHP-FPM时默认用户要切换成www-data。

    确认PHP端口保持一致。

    2、Cerbot从Apache2切换到Nginx

    删除Apache2的话,Cerbot的配置文件会无法执行操作,我们在重新配置Cerbot时候只需要把其配置文件改为:

    authenticator = nginx
    installer = nginx

    如上即可正确配置证书更新设置。

    3、Fail2Ban之类的conf文件更新

    需要按照Nginx的日志地址进行更新。

    4、读取错误日志进行针对性优化

    这是个很好的习惯!

    总之还是得多上手配置几次,才能知道知识掌握的是否牢固。

  • 【小贴士】WordPress多站点配置错误的解决

    最近配置Wordpress的多站点,初次成功,后续改变了主站点的域名到裸域名,再次配置多站点时候出现五花八门的错误,什么重定向过多,什么连接不上数据库,如果遇到这种情况,那么大概率在重启多站点的时候,你会看到警告:存在已有的多站点数据。

    那么这时候请按照Wordpress的官方多站点配置进行设置和检查,可以很快定位到问题所在。

    如果是使用Apache2进行的网站配置,检查Rewrite模块及模块中的 ‘AllowOverride all’设置。

    重点检查的WP配置文件:wp-config.php

    需要重点检查的数据表:

    wp_blogs

    wp_blogmeta

    wp_blog_versions

    wp_registration_log

    wp_signups

    wp_site

    wp_sitemeta

    其实主要的原因是Wordpress在关闭多站点设置的时候,不会自动对数据库的多站点数据进行清理,所以在重配置的时候会看到警告,也可能会出现花式错误。

    请参考官方链接:

    WP多站点网络创建

    WP多站点网络管理

    WP多站点网络的Debug

    在成功配置多站点后,一定要注意检查网站的固定链接结构!否则在网页中通过固定连接引用的页面会失效。

    如果多站点配置完成出现Cookie的相关错误,或者点击登录、操作需要等待响应等现象,可以配置wp-config.php添加:

    define(‘COOKIE_DOMAIN’, $_SERVER[‘HTTP_HOST’]);
    define(‘COOKIEPATH’, ‘/’);

    刷新站点缓存及本地缓存,重置Cookie后再尝试。