上些日子给网站做了有关于新年红的配色，今天就总觉得差点什么，索性写了一个播放器。过年了放上会更加有新年氛围，提前祝大家新年快乐！

功能说明
响应式布局：手机端底部居中（支持收缩 / 展开），电脑端左下角固定显示
核心功能：播放 / 暂停、下一曲切换、单曲结束自动切歌，随机切歌不重复
体验优化：刷新 / 页面跳转精准续播、无闪烁无冗余样式、手机端点击空白处收缩展开
样式特色：新年红金配色、悬浮阴影效果、按钮交互反馈，适配中文字体无乱码
兼容处理：突破浏览器自动播放限制，兼容微信 X5 内核，全局样式无冲突
使用说明

1. 代码部署
将以下完整代码直接粘贴到 Typecho 主题自定义 HTML/PHP 文件中（如页脚文件footer.php），建议放在标签前。

    <style>
    #musicPlayer {
        position: fixed;
        bottom: 10px;
        z-index: 999;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 20px;
        background: rgba(216, 0, 15, 0.9);
        border-radius: 50px;
        box-shadow: 0 0 20px rgba(250, 108, 0, 0.8);
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
        border: 2px solid #dc8f03;
        left: 50%;
        transform: translateX(-50%);
        min-width: fit-content;
        transition: all 0.3s ease-in-out;
    }
    @media screen and (min-width: 768px) {
        #musicPlayer {
            left: 15px;
            transform: translateX(0);
        }
        #musicInfo {
            display: block !important;
        }
    }
    @media screen and (max-width: 767px) {
        #musicPlayer.shrink {
            padding: 8px;
        }
        #musicInfo {
            display: block;
            transition: all 0.3s ease-in-out;
        }
        #musicPlayer.shrink #musicInfo {
            display: none;
        }
    }
    .music-btn {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: none;
        outline: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        color: #d8000f;
        background: #dc8f03;
        transition: all 0.3s ease;
        box-shadow: 0 0 10px rgba(250, 108, 0, 0.5);
    }
    .music-btn:hover {
        background: #fff;
        color: #d8000f;
        box-shadow: 0 0 15px rgba(250, 108, 0, 1);
    }
    .music-btn:active {
        transform: scale(0.95);
    }
    #musicInfo {
        color: #fff;
        font-size: 13px;
        font-family: "Microsoft YaHei", sans-serif;
        white-space: nowrap;
        line-height: 1.2;
    }
    #musicInfo span {
        color: #ffd700;
        font-weight: 500;
    }
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    </style>
    <div id="musicPlayer">
        <audio id="bgMusic" preload="auto" style="display: none;"></audio>
        <button id="playBtn" class="music-btn">播放</button>
        <button id="nextBtn" class="music-btn">下一曲</button>
        <div id="musicInfo">
            <span id="playStatus">暂停播放</span>：<span id="songName"></span> - <span id="singerName"></span>
        </div>
    </div>
    <script>
    window.addEventListener('load', function() {
        const audio = document.getElementById('bgMusic');
        const playBtn = document.getElementById('playBtn');
        const nextBtn = document.getElementById('nextBtn');
        const playStatusEl = document.getElementById('playStatus');
        const songNameEl = document.getElementById('songName');
        const singerNameEl = document.getElementById('singerName');
        const musicPlayer = document.getElementById('musicPlayer');
    
        const musicList = [
            { src: '/UGC/1.mp3', name: '《张灯结彩》', singer: '王二妮、阿宝' },
            { src: '/UGC/2.mp3', name: '《恭喜发财》', singer: '刘德华' },
            { src: '/UGC/3.mp3', name: '《新年大吉》', singer: '祁隆' }
        ];
    
        let lastIndex = -1;
        let isPlaying = false;
        const CACHE_KEY = 'music_play_state';
        let isInitiated = false;
        let isShrinked = false;
    
        function updateStatus() {
            const statusText = isPlaying ? '正在播放' : '暂停播放';
            playStatusEl.innerText = statusText;
            playBtn.innerText = isPlaying ? '暂停' : '播放';
        }
    
        function updateMusicInfo(index) {
            const song = musicList[index];
            songNameEl.innerText = song.name;
            singerNameEl.innerText = song.singer;
        }
    
        function getRandomIndex() {
            let randomIndex;
            do {
                randomIndex = Math.floor(Math.random() * musicList.length);
            } while (randomIndex === lastIndex && musicList.length > 1);
            lastIndex = randomIndex;
            return randomIndex;
        }
    
        function saveState() {
            const currentIndex = musicList.findIndex(item => item.src === audio.src);
            const state = {
                isPlaying,
                index: currentIndex > -1 ? currentIndex : 0,
                time: audio.currentTime,
                lastIndex
            };
            sessionStorage.setItem(CACHE_KEY, JSON.stringify(state));
        }
    
        function restoreState() {
            const cache = sessionStorage.getItem(CACHE_KEY);
            if (!cache) return false;
            try {
                const state = JSON.parse(cache);
                audio.src = musicList[state.index].src;
                audio.currentTime = state.time;
                lastIndex = state.lastIndex;
                isPlaying = state.isPlaying;
                updateMusicInfo(state.index);
                return true;
            } catch (e) {
                sessionStorage.removeItem(CACHE_KEY);
                return false;
            }
        }
    
        function toggleShrink() {
            if (window.innerWidth > 767) return;
            isShrinked = !isShrinked;
            musicPlayer.classList.toggle('shrink', isShrinked);
        }
    
        function playCore() {
            audio.muted = true;
            audio.play().then(() => {
                isPlaying = true;
                updateStatus();
                setTimeout(() => audio.muted = false, 100);
                isInitiated = true;
                saveState();
                if (window.innerWidth <= 767 && !isShrinked) {
                    isShrinked = true;
                    musicPlayer.classList.add('shrink');
                }
            }).catch(err => {
                isPlaying = false;
                updateStatus();
            });
        }
    
        function playMusic() {
            if (!audio.src) {
                const index = getRandomIndex();
                audio.src = musicList[index].src;
                updateMusicInfo(index);
            }
            playCore();
        }
    
        function pauseMusic() {
            audio.pause();
            isPlaying = false;
            updateStatus();
            saveState();
        }
    
        function togglePlay() {
            if (window.innerWidth <= 767 && isShrinked) {
                toggleShrink();
            }
            isPlaying ? pauseMusic() : playMusic();
        }
    
        function playNext() {
            if (window.innerWidth <= 767 && isShrinked) {
                toggleShrink();
            }
            const index = getRandomIndex();
            audio.src = musicList[index].src;
            updateMusicInfo(index);
            audio.currentTime = 0;
            playCore();
            setTimeout(() => {
                if (window.innerWidth <= 767 && !isShrinked) {
                    isShrinked = true;
                    musicPlayer.classList.add('shrink');
                }
            }, 2000);
        }
    
        playBtn.addEventListener('click', togglePlay);
        playBtn.addEventListener('touchstart', (e) => { e.preventDefault(); togglePlay(); });
        nextBtn.addEventListener('click', playNext);
        nextBtn.addEventListener('touchstart', (e) => { e.preventDefault(); playNext(); });
        musicPlayer.addEventListener('click', (e) => {
            if (e.target === musicPlayer && window.innerWidth <= 767) {
                toggleShrink();
            }
        });
        musicPlayer.addEventListener('touchstart', (e) => {
            if (e.target === musicPlayer && window.innerWidth <= 767) {
                e.preventDefault();
                toggleShrink();
            }
        }, { passive: false });
        audio.addEventListener('ended', playNext);
        audio.addEventListener('timeupdate', saveState);
        window.addEventListener('resize', () => {
            if (window.innerWidth > 767) {
                musicPlayer.classList.remove('shrink');
            }
        });
    
        const hasCache = restoreState();
        if (hasCache) {
            isPlaying && playCore();
        } else {
            playMusic();
        }
    
        function initOnUserAction() {
            if (isInitiated) return;
            playMusic();
            document.removeEventListener('click', initOnUserAction);
            document.removeEventListener('touchstart', initOnUserAction);
        }
        document.addEventListener('click', initOnUserAction);
        document.addEventListener('touchstart', initOnUserAction, { passive: false });
    });
    </script>

2. 音乐文件配置
将 MP3 音乐文件上传至网站/UGC/目录（若无该目录请自行创建）
如需修改音乐文件路径 / 添加 / 替换歌曲，直接修改代码中musicList数组即可，格式如下：

const musicList = [
    { src: '音乐文件路径', name: '歌曲名', singer: '歌手名' },
    // 按需添加更多歌曲
];

3. 基础操作
电脑端：直接点击「播放 / 暂停」「下一曲」按钮操作，全程显示歌曲信息
手机端：
点击按钮自动展开播放器，播放后 2 秒自动收缩
点击播放器空白处，可手动切换收缩 / 展开状态
切歌时自动展开显示新歌曲信息，2 秒后恢复收缩

之前发过一些关于足迹的源码，后来由于地图的更新或者一些限制无法在使用，又重新写了一套，这套足迹使用百度地图来实现的，我觉得要比之前好得多，加入了图文，足迹logo，等等。具体可到我的关于页面查看。

源码截图

使用说明

将源码下载好后首先我们要到百度地图开放平台注册一个自己的账号，并设置好自己的域名信息，等待审核通过后 拿到自己的AK码。然后添加至首页的` <!-- 引入百度地图API -->

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=这里是你的AK"></script>`这个位置即可。

地图样式可在个性化地图界面设置地图样式。然后将代码添加至` // 设置地图样式

    map.setMapStyleV2({
        styleId: '这里是地图样式'ID
    });`
            

数据信息再markers.js中进行修改，一定要注意格式，不然会不显示的。

// 坐标查询：https://api.map.baidu.com/lbsapi/getpoint/index.html

        var markers = [
            {
        latLng: [125.341771,43.873726],
        name: "长春市",
        icon: "/footprint/zj.png",
        desc: "长春市"
    },
    {
        latLng: [124.831767,45.148014],// 图文带跳转的
        name: "松原市",
        icon: "/footprint/zj.png",// 这是足迹logo
        desc: "松原市。",// 这里是简介
        photo: [
            "/usr/uploads/2025/01/2486362157.jpg",
            "/usr/uploads/2025/01/1044572061.jpg",
            "/usr/uploads/2025/01/1454283446.jpg",
            "/usr/uploads/2025/01/3919603999.jpg",
        ],
        links: [
            "/index.php/archives/138/",// 第一个图文带跳转的链接
            "/index.php/archives/138/",// 第2个图文带跳转的链接
            "/index.php/archives/138/",// 第3个图文带跳转的链接
            "/index.php/archives/138/",// 第4个图文带跳转的链接
        ]
    },
    {
        latLng: [128.091721,42.05933],// 单独文字介绍的
        name: "长白山",
        icon: "/footprint/zj.png",        
        desc: "长白山"
    },
    {
        latLng: [128.251537,43.32305],
        name: "六顶山",
        icon: "/footprint/zj.png",        
        desc: "六顶山"
    },
    {
        latLng: [126.992893,46.644393],
        name: "绥化市",
        icon: "/footprint/zj.png",        
        desc: "绥化市"
    },

        ];

喜欢什么样式添加什么样式就可以了。

调试

数据添加好了之后可以先访问一下看下有没有错误，没有的可以就可以在页面或者直连的方式进行访问查看了。如果是加入嵌入式。再加入如下 原生html 代码即可！

<iframe scrolling=no style="min-height:480px !important;" src="你的足迹地址" width="100%" height="100%"></iframe>

源码下载

点击下载

免责声明

本站提供的资源，均来自网络，如有版权争议与本站无关，所有内容及软件的文章仅限用于个人学习和研究目的。下载者不得将上述内容用于商业或者非法用途，否则，一切后果请用户自行自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险与本站无关，您务必在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，或购买注册，以得到更好的正版服务。如本站侵犯了您的权益，请致信E-mail：937745580@qq.com

Typecho文章加密后不显示文章标题解方法有两种，第一种就是修改程序代码，第二种就是下载插件。我个人更倾向于修改代码，因为也没有那么麻烦。简单修改一下就好了。

方法一：代码修改

首先我们先找到： Contents.php ，具体位置在： /var/Widget/Base/Contents.php 。老版本的在： /var/Widget/Abstract/Contents.php

打开： Contents.php

查找：

$value['title'] = _t('此内容被密码保护');

注释：
将代码修改注释掉就可以了。

/* $value['title'] = _t('此内容被密码保护'); */

方法二：使用插件

此插件的功能:

1，加密文章的标题正常显示

2，加密文章的标签正常显示

3，加密文章的评论数正常显示

4，自定义所有加密文章的提示文字

5，意外的解决了加密文章无法评论的问题

6，意外的解决了加密文章返回403问题

安装方法:

下载后解压至： /usr/plugins 文件夹下，将文件夹重命名为 Titleshow ，进入后台在启用设置即可。

插件下载

{hide}
{cloud title="Titleshow插件" type="github" url="https://github.com/typecho-fans/plugins/releases/download/plugins-S_to_Z/Titleshow.zip" password=""/}
{/hide}

通过微信公众号直接向Typecho博客发送图文，即可在博客展现出来，鉴于这个功能相关的文章，之前都是参考了多个博主，并且主要应用于“handsome”主题，有很多地方，需要修改代码，又有很多无用的代码。经过我本人测试也遇到各种各样的问题，无奈....所以我把代码全部重写了直接按下面步骤即可，无需修改代码！目前不限主题。

如果有问题请在下方留言，看到第一时间回复！

要求服务器环境

PHP >= 7.1
PHP cURL 扩展
PHP OpenSSL 扩展
PHP SimpleXML 扩展
PHP fileinfo 扩展
PHP PDO_MYSQL 扩展

公众号

没有公众号可以使用测试版，效果也是一样的： 微信公众测试号

1、独立域名

首先我们要下载wechat包，源码在下面，下载好后放在一个单独的域名(非博客)下。例：http:// XXX .pet111.cn（因为微信公众号不支持二级目录作为接口地址。）

解压后上传至服务器，执行 /install.php 进行安装。

数据库，直接填写你博客的数据库配置就行。或者单独建一个，不会覆盖或清空，仅仅增加了一个cross表。如果还是怕出现问题，务必提前做好备份工作

token可以写： spDJ7DdtqJ1nnUdLnfCx

公众号aes_key： 测试号随意写

高德地图aes_key： 随意写

要填写公众号相关信息/高德Key去官网申请（可以发送地图位置）此项不能空。

返回到公众号后台，接口URL就填写http(s):// 你非博客的域名地址 /server.php。

2、下载 times包

接下来下载 times包压缩包后，放在你的主题目录下。并在 functions.php 中最上方，引入 require_once 'times/Ajax.php';

3、绑定公众号

关注你的公众号，发送文字 绑定 ，填写相关信息。

时光机编码怎么填？在你的时光机(说说、碎语、日记)页面，新增字段 time_code ,值任意。

公众号处也填相同的值。cid就是单页面ID，mid就是分类ID。

4、使用说明

1.发送 绑定 进行绑定或修改绑定信息

2.直接向时光机发送消息

支持文字、图片、地理位置、链接四种消息类型。

其他消息类型等后续开发，暂不支持（如果发送了，会提示不支持该类型的，如语音消息）。

如果发送的是图片会自动将图片存放到typecho 的 usr/uploads/time 目录下。

支持发送私密说说。只需要在发送内容前加入#即可。 举例发送： #这是私密的说说 ，仅发送者可见。

连续发送多条信息

发送【 开始 】，开始一轮连续发送

发送【 结束 】，结束当前轮的发送

3.发送文章

输入【 发文章 】，开始文章发送，支持多条消息，支持多条消息图文混合

输入【 结束 】，结束文章发送

4.其他操作

发送 博客 收到你的博客地址的链接

发送 发博客 收到发博文的字的链接

发送 解除绑定 或 解绑 可删除掉你的绑定信息

发送 帮助 查看帮助信息

源码

https://www.ilanzou.com/s/46mfhSe

我之前发足迹地图经过本人实测有BUG存在，那套源码只可以存放在网站的根目录，不支持文件夹内访问。所以发出这套，喜欢的朋友可以看一下我的。

使用说明

将文件上传至服务器网站目录下的任意一文件夹即可访问，

注：mapData.js文件为足迹数据，添加如下：

{name: '城市', value: 圆圈大小, description: '描述', geoCoord:纬度.经度]},

• 经纬度可以取前四位。
• value 表示地图上黄色点的大小，数值越大，显示的大小越大；
• geoCoord 表示了经纬度，相关数据可以通过gpsspg查到，查到的数据之间放到[]中就行；
• name 和 description 表示了鼠标悬浮在黄色点上显示的内容。

调试

数据添加好了之后可以先访问一下看下有没有错误，没有的可以就可以在页面或者直连的方式进行访问查看了。如果是加入嵌入式。再加入如下 原生html 代码即可！

<iframe scrolling=no style="min-height:480px !important;" src="你的足迹地址" width="100%" height="100%"></iframe>

源码下载

请输入链接描述

免责声明

本站提供的资源，均来自网络，如有版权争议与本站无关，所有内容及软件的文章仅限用于个人学习和研究目的。下载者不得将上述内容用于商业或者非法用途，否则，一切后果请用户自行自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险与本站无关，您务必在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，或购买注册，以得到更好的正版服务。如本站侵犯了您的权益，请致信E-mail：937745580@qq.com

配置足迹数据

其中 /data/config.json 为配置数据，在里面可以配置你的足迹数据，结构如下：

[
    {
        "latLng": [36.44852263442782, 118.73921200195313],
        "name": "城市",
        "desc": "描述",
        "photos":[
            "图片1",
            "图片2",
        ],
        "freq": 10
    },
    ...
]

• latLng： 为足迹的经纬度，可以通过 https://jingweidu.bmcx.com查询得到
• name： 足迹地点的名称
• desc：足迹地点的描述， \n 为换行符
• photos：足迹地点的照片链接，为一组图片 url 数据
• freq：足迹地点的到访次数，范围为 [1, 10]

使用配置

将足迹地图内嵌到你博客中的相应位置，示例代码如下：

<iframe scrolling=no style="min-height:480px !important;" src="你的足迹地址l" width="100%" height="100%"></iframe>

地图样式调整

默认的地图为中国地图，足迹点的样式及背景样式都是固定的，如果想对足迹地图进行进一步的定制化，
可以对 /css/index.css 及 /js/index.js 文件进行修改。
其中 /js/jquery-jvectormap-cn-merc-en.js为中国地图，
你可以替换为世界地图，具体操作见 https://jvectormap.com
足迹地图依赖的是 JVectorMap，关于基本的样式定义可以参考官网 https://jvectormap.com/documentation/javascript-api/jvm-map

下载源码

{hide}
{cloud title="足迹地图HTML源码" type="lz" url="https://wuzuhua.lanzoue.com/iHmIS17sjo4j" password=""/}
{/hide}

免责声明

本站提供的资源，均来自网络，如有版权争议与本站无关，所有内容及软件的文章仅限用于个人学习和研究目的。下载者不得将上述内容用于商业或者非法用途，否则，一切后果请用户自行自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险与本站无关，您务必在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，或购买注册，以得到更好的正版服务。如本站侵犯了您的权益，请致信E-mail：937745580@qq.com

{mtitle title=" 转载：空木白博客 - https://wuzuhua.cn/478.html "/}

以下代码放置在自己适合的位子即可

Xc主题直接放置在文件路径 Xc/public/aside.php 23行下面即可

更换SVG阿里矢量图标地址： https://www.iconfont.cn/

代码如下：

<div class="Xc_contact-information" style="display: flex;-webkit-box-align: center;align-items: center;justify-content: space-around;padding-top: 10px;">
<a class="github" href="这里填写Github地址" target="_blank" title="Github" rel="noopener noreferrer nofollow">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="M512 95.872a426.666667 426.666667 0 0 0-134.912 831.445333c21.333333 3.754667 29.312-9.045333 29.312-20.266666 0-10.112-0.512-43.733333-0.512-79.445334-107.221333 19.712-134.954667-26.154667-143.488-50.133333a155.136 155.136 0 0 0-43.733333-60.288c-14.933333-7.978667-36.266667-27.733333-0.554667-28.245333a85.376 85.376 0 0 1 65.621333 43.733333 91.178667 91.178667 0 0 0 124.245334 35.2 89.770667 89.770667 0 0 1 27.221333-57.088c-94.933333-10.666667-194.133333-47.445333-194.133333-210.645333a166.058667 166.058667 0 0 1 43.733333-114.688 153.344 153.344 0 0 1 4.266667-113.066667s35.712-11.178667 117.333333 43.733333a402.218667 402.218667 0 0 1 213.333333 0c81.578667-55.466667 117.333333-43.733333 117.333334-43.733333a153.301333 153.301333 0 0 1 4.266666 113.066667 165.077333 165.077333 0 0 1 43.733334 114.688c0 163.712-99.754667 199.978667-194.688 210.645333a101.034667 101.034667 0 0 1 28.8 78.933333c0 57.088-0.512 102.954667-0.512 117.333334 0 11.221333 7.978667 24.533333 29.312 20.266666A426.88 426.88 0 0 0 512 95.872z" fill="var(--title)"></path></svg>
</a>
<a class="gitee" href="这里填写Gitee地址" target="_blank" title="Gitee" rel="noopener noreferrer nofollow">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m259.168-568.896h-290.752a25.28 25.28 0 0 0-25.28 25.28l-0.032 63.232c0 13.952 11.296 25.28 25.28 25.28h177.024a25.28 25.28 0 0 1 25.28 25.28v12.64a75.84 75.84 0 0 1-75.84 75.84h-240.224a25.28 25.28 0 0 1-25.28-25.28v-240.192a75.84 75.84 0 0 1 75.84-75.84h353.92a25.28 25.28 0 0 0 25.28-25.28l0.064-63.2a25.312 25.312 0 0 0-25.28-25.312H417.184a189.632 189.632 0 0 0-189.632 189.6v353.952c0 13.952 11.328 25.28 25.28 25.28h372.928a170.656 170.656 0 0 0 170.656-170.656v-145.376a25.28 25.28 0 0 0-25.28-25.28z" fill="#d90013"></path></svg>
</a>
<a class="bilibili" href="这里填写B站地址" target="_blank" title="B站" rel="noopener noreferrer nofollow">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="M777.514667 131.669333a53.333333 53.333333 0 0 1 0 75.434667L728.746667 255.829333h49.92A160 160 0 0 1 938.666667 415.872v320a160 160 0 0 1-160 160H245.333333A160 160 0 0 1 85.333333 735.872v-320a160 160 0 0 1 160-160h49.749334L246.4 207.146667a53.333333 53.333333 0 1 1 75.392-75.434667l113.152 113.152c3.370667 3.370667 6.186667 7.04 8.448 10.965333h137.088c2.261333-3.925333 5.12-7.68 8.490667-11.008l113.109333-113.152a53.333333 53.333333 0 0 1 75.434667 0z m1.152 231.253334H245.333333a53.333333 53.333333 0 0 0-53.205333 49.365333l-0.128 4.010667v320c0 28.117333 21.76 51.157333 49.365333 53.162666l3.968 0.170667h533.333334a53.333333 53.333333 0 0 0 53.205333-49.365333l0.128-3.968v-320c0-29.44-23.893333-53.333333-53.333333-53.333334z m-426.666667 106.666666c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z m320 0c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z" fill="#fb7299"></path></svg>
</a>
<a class="qq" href="这里填写QQ地址" target="_blank" title="QQ" rel="noopener noreferrer nofollow">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="22"><path d="M511.09761 957.257c-80.159 0-153.737-25.019-201.11-62.386-24.057 6.702-54.831 17.489-74.252 30.864-16.617 11.439-14.546 23.106-11.55 27.816 13.15 20.689 225.583 13.211 286.912 6.767v-3.061z" fill="#FAAD08"></path><path d="M496.65061 957.257c80.157 0 153.737-25.019 201.11-62.386 24.057 6.702 54.83 17.489 74.253 30.864 16.616 11.439 14.543 23.106 11.55 27.816-13.15 20.689-225.584 13.211-286.914 6.767v-3.061z" fill="#FAAD08"></path><path d="M497.12861 474.524c131.934-0.876 237.669-25.783 273.497-35.34 8.541-2.28 13.11-6.364 13.11-6.364 0.03-1.172 0.542-20.952 0.542-31.155C784.27761 229.833 701.12561 57.173 496.64061 57.162 292.15661 57.173 209.00061 229.832 209.00061 401.665c0 10.203 0.516 29.983 0.547 31.155 0 0 3.717 3.821 10.529 5.67 33.078 8.98 140.803 35.139 276.08 36.034h0.972z" fill="#000000"></path><path d="M860.28261 619.782c-8.12-26.086-19.204-56.506-30.427-85.72 0 0-6.456-0.795-9.718 0.148-100.71 29.205-222.773 47.818-315.792 46.695h-0.962C410.88561 582.017 289.65061 563.617 189.27961 534.698 185.44461 533.595 177.87261 534.063 177.87261 534.063 166.64961 563.276 155.56661 593.696 147.44761 619.782 108.72961 744.168 121.27261 795.644 130.82461 796.798c20.496 2.474 79.78-93.637 79.78-93.637 0 97.66 88.324 247.617 290.576 248.996a718.01 718.01 0 0 1 5.367 0C708.80161 950.778 797.12261 800.822 797.12261 703.162c0 0 59.284 96.111 79.783 93.637 9.55-1.154 22.093-52.63-16.623-177.017" fill="#000000"></path><path d="M434.38261 316.917c-27.9 1.24-51.745-30.106-53.24-69.956-1.518-39.877 19.858-73.207 47.764-74.454 27.875-1.224 51.703 30.109 53.218 69.974 1.527 39.877-19.853 73.2-47.742 74.436m206.67-69.956c-1.494 39.85-25.34 71.194-53.24 69.956-27.888-1.238-49.269-34.559-47.742-74.435 1.513-39.868 25.341-71.201 53.216-69.974 27.909 1.247 49.285 34.576 47.767 74.453" fill="#FFFFFF"></path><path d="M683.94261 368.627c-7.323-17.609-81.062-37.227-172.353-37.227h-0.98c-91.29 0-165.031 19.618-172.352 37.227a6.244 6.244 0 0 0-0.535 2.505c0 1.269 0.393 2.414 1.006 3.386 6.168 9.765 88.054 58.018 171.882 58.018h0.98c83.827 0 165.71-48.25 171.881-58.016a6.352 6.352 0 0 0 1.002-3.395c0-0.897-0.2-1.736-0.531-2.498" fill="#FAAD08"></path><path d="M467.63161 256.377c1.26 15.886-7.377 30-19.266 31.542-11.907 1.544-22.569-10.083-23.836-25.978-1.243-15.895 7.381-30.008 19.25-31.538 11.927-1.549 22.607 10.088 23.852 25.974m73.097 7.935c2.533-4.118 19.827-25.77 55.62-17.886 9.401 2.07 13.75 5.116 14.668 6.316 1.355 1.77 1.726 4.29 0.352 7.684-2.722 6.725-8.338 6.542-11.454 5.226-2.01-0.85-26.94-15.889-49.905 6.553-1.579 1.545-4.405 2.074-7.085 0.242-2.678-1.834-3.786-5.553-2.196-8.135" fill="#000000"></path><path d="M504.33261 584.495h-0.967c-63.568 0.752-140.646-7.504-215.286-21.92-6.391 36.262-10.25 81.838-6.936 136.196 8.37 137.384 91.62 223.736 220.118 224.996H506.48461c128.498-1.26 211.748-87.612 220.12-224.996 3.314-54.362-0.547-99.938-6.94-136.203-74.654 14.423-151.745 22.684-215.332 21.927" fill="#FFFFFF"></path><path d="M323.27461 577.016v137.468s64.957 12.705 130.031 3.91V591.59c-41.225-2.262-85.688-7.304-130.031-14.574" fill="#EB1C26"></path><path d="M788.09761 432.536s-121.98 40.387-283.743 41.539h-0.962c-161.497-1.147-283.328-41.401-283.744-41.539l-40.854 106.952c102.186 32.31 228.837 53.135 324.598 51.926l0.96-0.002c95.768 1.216 222.4-19.61 324.6-51.924l-40.855-106.952z" fill="#EB1C26"></path></svg>
</a>
<a class="weibo" href="这里填写微博地址" target="_blank" title="微博" rel="noopener noreferrer nofollow">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="M851.4 590.193c-22.196-66.233-90.385-90.422-105.912-91.863-15.523-1.442-29.593-9.94-19.295-27.505 10.302-17.566 29.304-68.684-7.248-104.681-36.564-36.14-116.512-22.462-173.094 0.866-56.434 23.327-53.39 7.055-51.65-8.925 1.89-16.848 32.355-111.02-60.791-122.395C311.395 220.86 154.85 370.754 99.572 457.15 16 587.607 29.208 675.873 29.208 675.873h0.58c10.009 121.819 190.787 218.869 412.328 218.869 190.5 0 350.961-71.853 398.402-169.478 0 0 0.143-0.433 0.575-1.156 4.938-10.506 8.71-21.168 11.035-32.254 6.668-26.205 11.755-64.215-0.728-101.66z m-436.7 251.27c-157.71 0-285.674-84.095-285.674-187.768 0-103.671 127.82-187.76 285.674-187.76 157.705 0 285.673 84.089 285.673 187.76 0 103.815-127.968 187.768-285.673 187.768z" fill="#E71F19"></path><path d="M803.096 425.327c2.896 1.298 5.945 1.869 8.994 1.869 8.993 0 17.7-5.328 21.323-14.112 5.95-13.964 8.993-28.793 8.993-44.205 0-62.488-51.208-113.321-114.181-113.321-15.379 0-30.32 3.022-44.396 8.926-11.755 4.896-17.263 18.432-12.335 30.24 4.933 11.662 18.572 17.134 30.465 12.238 8.419-3.46 17.268-5.33 26.41-5.33 37.431 0 67.752 30.241 67.752 67.247 0 9.068-1.735 17.857-5.369 26.202a22.832 22.832 0 0 0 12.335 30.236l0.01 0.01z" fill="#F5AA15"></path><path d="M726.922 114.157c-25.969 0-51.65 3.744-76.315 10.942-18.423 5.472-28.868 24.622-23.5 42.91 5.509 18.29 24.804 28.657 43.237 23.329a201.888 201.888 0 0 1 56.578-8.064c109.253 0 198.189 88.271 198.189 196.696 0 19.436-2.905 38.729-8.419 57.16-5.508 18.289 4.79 37.588 23.212 43.053 3.342 1.014 6.817 1.442 10.159 1.442 14.943 0 28.725-9.648 33.37-24.48 7.547-24.906 11.462-50.826 11.462-77.175-0.143-146.588-120.278-265.813-267.973-265.813z" fill="#F5AA15"></path><path d="M388.294 534.47c-84.151 0-152.34 59.178-152.34 132.334 0 73.141 68.189 132.328 152.34 132.328 84.148 0 152.337-59.182 152.337-132.328 0-73.15-68.19-132.334-152.337-132.334zM338.53 752.763c-29.454 0-53.39-23.755-53.39-52.987 0-29.228 23.941-52.989 53.39-52.989 29.453 0 53.39 23.76 53.39 52.989 0 29.227-23.937 52.987-53.39 52.987z m99.82-95.465c-6.382 11.086-19.296 15.696-28.726 10.219-9.43-5.323-11.75-18.717-5.37-29.803 6.386-11.09 19.297-15.7 28.725-10.224 9.43 5.472 11.755 18.864 5.37 29.808z" fill="var(--background-reverse)"></path></svg>
</a>
<a class="email" href="mailto:填写邮箱号" target="_blank" title="邮箱" rel="noopener noreferrer nofollow">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="21" height="22"><path d="M512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512S276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667z m341.333333-426.666667a341.333333 341.333333 0 1 0-169.301333 294.869333l-43.008-73.685333A256 256 0 1 1 768 512v42.666667a42.666667 42.666667 0 0 1-85.333333 0V384h-57.770667a170.666667 170.666667 0 1 0 2.816 253.44A128 128 0 0 0 853.333333 554.666667v-42.666667z m-341.333333-85.333333a85.333333 85.333333 0 1 1 0 170.666666 85.333333 85.333333 0 0 1 0-170.666666z" fill="#dc4835"></path></svg>
</a>
</div>

SVG取地址：

将下载好的SVG图片打开，F12调用程序员开发工具，复制整体代码，在调整好图像大小即可！

通常大小参数为：width="20" height="20"

<!--打字机一言开始-->
<script>
    var yiyan = function (r) {
      function t() {
        return b[Math.floor(Math.random() * b.length)]
      }  
      function e() {
        return String.fromCharCode(94 * Math.random() + 33)
      }
      function n(r) {
        for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
          var l = document.createElement("span");
          l.textContent = e(), l.style.color = t(), n.appendChild(l)
        }
        return n
      }
      function i() {
        var t = o[c.skillI];
        c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
      }
      var l = "总有人间一两风，填我十万八千梦🍂",  //固定一条
      o = [""].map(function (r) {  //多条顺序格式 "内容1"，"内容2"
      return r + ""
      }),
      a = 25,  //打字完等待重载时间
      g = 1,
      s = 1,
      d = 80,  //打字过程速度
      b = [""],
      c = {
        text: "🍂",  //固定开头内容，不打字效果
        prefixP: -s,
        skillI: 0,
        skillP: 0,
        direction: "forward",
        delay: a,
        step: g
      };
      i()
      };
      yiyan(document.getElementById('yiyan'));
  </script>
<!--打字机一言结束-->

视频教程

{bilibili bvid="BV16D421A7FN" page="Typecho小程序双鱼2-5搭建教程"/}

一、环境设置

1、在服务器网站的设置中开启Typecho的伪静态。

2、在PHP环境管理中修改配置选项下关闭display_errors为关闭状态。

二、代码设置

在网站../var/Typecho/Response.php中，加入下面的代码，将代码加入到大约147行左右！

/**
     * 抛出ajax的回执信息
     *
     * @access public
     * @param string $message 消息体
     * @return void
     */
    public function throwXml($message)
{
        /** 设置http头信息 */
        $this->setContentType('text/xml');

        /** 构建消息体 */
        echo '<?xml version="1.0" encoding="' . $this->getCharset() . '"?>',
        '<response>',
        $this->_parseXml($message),
        '</response>';

        /** 终止后续输出 */
        exit;
    }

    /**
     * 抛出json回执信息
     *
     * @access public
     * @param mixed $message 消息体
     * @return void
     */
    public function throwJson($message)
{
        /** 设置http头信息 */
        $this->setContentType('application/json');

        echo json_encode($message);

        /** 终止后续输出 */
        exit;
    }...

三、后台设置

在插件中设置秘钥

四、发布小程序

完成以上的设置，小程序显示正常即可发布上传小程序了。

源码下载

{cloud title="Typecho小程序" type="lz" url="https://www.ilanzou.com/s/nUmjtYL" password="xsbk"/}

免责声明

本站提供的资源，均来自网络，如有版权争议与本站无关，所有内容及软件的文章仅限用于个人学习和研究目的。下载者不得将上述内容用于商业或者非法用途，否则，一切后果请用户自行自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险与本站无关，您务必在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，或购买注册，以得到更好的正版服务。如本站侵犯了您的权益，请致信E-mail：937745580@qq.com

/* logo 扫光开始 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
/* logo 扫光结束 */...

侧边栏百度优化 同样在网站后台自定义CSS中添加如下代码

/*侧栏百度一下*/
.searchs {padding-top:8px;padding-bottom:0px;padding-right:10px;padding-left:10px;
overflow: hidden;transition: all 0.3s;border-radius: 4px;position: relative;margin: 0px 0px 15px 0px;}.mip-layout-container, .mip-layout-fixed-height {margin: 0px 0px 0px 0px;display: block;position: relative;}mip-form form {position: relative;}.searchs input[type="text"] {border: #45B6F7 1px solid;border-radius: 4px;width: calc( 100% - 2px );}mip-form input[type='text'], mip-form input[type='input'], mip-form input[type='datetime'], mip-form input[type='email'], mip-form input[type='number'], mip-form input[type='tel'], mip-form input[type='url'] {padding-right: 30px;}.searchs input {outline: none;}mip-form input, mip-form textarea, mip-form select {border: 1px solid #f1f1f1;padding: 6px;display: block;box-sizing: border-box;-webkit-box-sizing: border-box;resize: none;font-size: 16px;}mip-form div {display: none;color: #ec1f5c;font-size: 13px;text-align: left;padding: 0 10% 0 3%;}.searchs input[type="submit"] {position: absolute;right: 2px;top: 2px;background-color: #45B6F7;color: #fff;font-size: 13px;margin: 2px;height: 30px;line-height: 30px;padding: 0 10px;}mip-form input[type='submit'] {border: 1px solid #f1f1f1;border-radius: 5px;color: #333;background-color: #d8d7d7;}.searchs input {outline: none;}.tit {background-color: #FF5E52;position: relative;top: -15px;display: inline-block;color: #fff;padding: 4px 15px;font-size: 14px;}.tit strong {font-weight: normal;}.tit {background-color: #FF5E52;position: relative;top: -15px;display: inline-block;color: #fff;padding: 4px 15px;font-size: 13px;}...

之后在 usr/themes/cuteen/include/sidebar.php 文件中合适位置添加如下代码

            <!-- 百度一下 -->
<section class="sidebar-comment-box card mt-4">
<div class="px-3 py-2 my-2 d-flex align-items-center border-bottom">
<svg t="1676984611515" class="icon icon-20 me-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13091" width="200" height="200"><path d="M852.6 367.6c16.3-36.9 32.1-90.7 32.1-131.8 0-109.1-119.5-147.6-314.5-57.9-161.4-10.8-316.8 110.5-355.6 279.7 46.3-52.3 117.4-123.4 183-151.7C316.1 378.3 246.7 470 194 565.6c-31.1 56.9-66 148.8-66 217.5 0 147.9 139.3 129.8 270.4 63 47.1 23.1 99.8 23.4 152.5 23.4 145.7 0 276.4-81.4 325.2-219H694.9c-78.8 132.9-295.2 79.5-295.2-71.2h493.2c9.6-65.4-2.5-143.6-40.3-211.7zM224.8 648.3c26.6 76.7 80.6 143.8 150.4 185-133.1 73.4-259.9 43.6-150.4-185z m174-163.3c3-82.7 75.4-142.3 156-142.3 80.1 0 153 59.6 156 142.3h-312z m276.8-281.4c32.1-15.4 72.8-33 108.8-33 47.1 0 81.4 32.6 81.4 80.6 0 30-11.1 73.5-21.9 101.8-39.3-63.5-98.9-122.4-168.3-149.4z" p-id="13092" data-spm-anchor-id="a313x.7781069.0.i5" class="" fill="#1296db"></path></svg>
                <span>优化一下</span>
                <span class="ios"></span></div>
<div class="px-3 searchs">
<mip-form method="get" url="https://www.baidu.com/s" class="mip-element mip-layout-container">
<form action="https://www.baidu.com/s" method="GET" target="_blank">
<input type="text" name="wd" validatetarget="q" validatetype="must" placeholder="关键词:小生博客" value="blog.pet111.cn">
<div target="q">关键词:小生博客</div>
<input type="submit" value="搜索">
</form><font size=1.5>🔎点击搜索，帮本站seo优化！</font>
</mip-form>
</div></section>...

背景图片 在网站后台自定义CSS中添加如下代码即可

/*背景*/
body::before {
    z-index: -1;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    position: fixed;
    background: center/cover no-repeat;
    background-image: url(这里填写背景图片地址);
}...