更换Typecho壁纸背景样式，借鉴Telegram Wallpaper

文章目录

演示
借鉴网站源码
源码分析
Telegram Wallpaper移植到Typecho

演示

本站
Telegram Wallpaper.png

通过jquery JS实现颜色渐变背景，然后叠加透明svg图片，CSS可调节叠加效果，壁纸效果还行。

借鉴网站源码

https://t.me/s/bizhi123?before=76

源码分析

CSS

<link href="telegram-web.css" rel="stylesheet" media="screen">

jquery

<script src="jquery.min1.js"></script>
<script src="tgwallpaper.min.js"></script>
<script src="telegram-web.js"></script>
<script>TWeb.init();</script>

canvas调用

<body class="widget_frame_base tgme_webpreview mobile emoji_image thin_box_shadow tme_mode twallpaper">
<div class="tgme_background_wrap">
<canvas id="tgme_background" class="tgme_background" width="50" height="50" data-colors="dbddbb,6ba587,d5d88d,88b884">
</canvas>
<div class="tgme_background_pattern"></div>
</div>

全部源码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>壁纸 | Wallpaper – Telegram</title> 
<link href="telegram-web.css" rel="stylesheet" media="screen">
</head>
  <body class="widget_frame_base tgme_webpreview mobile emoji_image thin_box_shadow tme_mode twallpaper">
    <div class="tgme_background_wrap">
      <canvas id="tgme_background" class="tgme_background" width="50" height="50" data-colors="dbddbb,6ba587,d5d88d,88b884"></canvas>
      <div class="tgme_background_pattern"></div>
    </div>
<script src="jquery.min1.js"></script>
<script src="tgwallpaper.min.js"></script>
<script src="telegram-web.js"></script>
<script>TWeb.init();</script>
</body>
</html>

Telegram Wallpaper移植到Typecho

上传SVG图片、2个js文件、1个CSS文件到Typecho加载目录

pattern.svg
jquery.min1.js
telegram-web.js
telegram-web.css
tgwallpaper.min.js

修改components/header.php文件

<head>
....

<link href="https://ntnas.top:82/typecho/usr/plugins/telegram-web.css" rel="stylesheet" media="screen">
</head>

<body class="widget_frame_base tgme_webpreview mobile emoji_image thin_box_shadow tme_mode twallpaper">
 <div class="tgme_background_wrap">
      <canvas id="tgme_background" class="tgme_background" width="50" height="50" data-colors="dbddbb,6ba587,d5d88d,88b884"></canvas>
      <div class="tgme_background_pattern"></div>
    </div>
<script src="jquery.min1.js"></script>
<script src="tgwallpaper.min.js"></script>
<script src="telegram-web.js"></script>
<script>TWeb.init();</script>

注意修改文件调用目录路径就OK。