Fan of Infinity - 网络
type: channel
link: https://www.ffott.cc/index.php/category/network/
items: 用Zerotier和Tailscale异地组网实现内网穿透
items: 检测设备类型的JavaScript库
items: JS文件中引入另一个JS文件
items: CSS响应式DIV自适应PC和移动设备
items: 用HTML5实现Typecho本地视频、音乐播放
items: WINDOWS双网卡路由设置分别访问内外网
items: Handsome主题美化代码修改及备忘
items: WINDOWS通过CMD进行网络重置
items: CFW基于MIXIN启用TUN模式
items: OpenWRT中的AdguardHome设置

用Zerotier和Tailscale异地组网实现内网穿透
type: item
date: 2025-04-22T06:07:00+00:00
description: ------以下设置实现OPENWRT作为主路由下的设备如何访问虚拟网络-------1、官网创建Zerotier虚拟网络ID；2、客户端填写生成的ID加入该虚拟网络；3、官网授权客户端加入并访问该虚拟网络；4、OPENWRT添加新网络接口，名称为zerotier，协议为不配置协议，设备为zt开头的虚拟网卡，防火墙设置里创建名称为zerotier的新防火墙区域，保存并应用；5、网络 → 防火墙，编辑zerotier防火墙，入站数据、出站数据和区域内转发均设置为接受，打开IP动态伪装，允许转发到目标区域lan，允许来自源区域的转发lan，保存并应用；6、网络 → 防火墙 → 通信规则，创建Allow-ZEROTIER规则，协议UDP，源区域任意区域（转发），目标区域设备（输入），目标端口9993，保存并应用；------以下设置实现虚拟网络设备访问OPENWRT路由下的设备-------7、官网控制面板Advanced → Managed Routes添加静态路由表，Destination → 内网网段/24，Via → Zerotier分配给OPENWRT的二级IP;------以下设置实现OPENWRT作为旁路由时虚拟网络如何访问OPENWRT所在网络下的设备-------8、防火墙 → 区域转发，为lan打开IP动态伪装；------以下设置实现OPENWRT作为旁路由的网络设备访问虚拟网络-------9、主路由设置静态路由表，这里是主路由不能是硬路由，因为硬路由的静态路由表针对WAN进行设置。Tailscale参照以上，其中接口和防火墙程序会自动配置，也不需要设置放行端口。

检测设备类型的JavaScript库
type: item
date: 2024-03-22T03:56:00+00:00
description: 作为一个可以用来检测设备的平台、操作系统和方向的 JavaScript 库，current-device.min.js（Github地址）通过操作系统（比如 iOS、安卓、黑莓、Windows、Firefox OX），设备屏幕方向（横屏或者竖屏）以及设备类型（平板或者移动设备）来为设备添加 CSS Class，并提供了一些 Javascript 函数用来判断设备类型，比如在 PC 端打开引入了 current-device.min.js 的 html 页面时会在 标签里添加 desktop landscape 的 class。 ... ... 一、在 html 页面 与 之间引入JS库： 二、在 html 页面的 与 之间运行条件语句：

JS文件中引入另一个JS文件
type: item
date: 2024-03-22T03:13:00+00:00
description: 方法一：在调用文件的顶部加入下例代码。function addScript(url){ document.write(" "); }方法二：在JS中写如下代码，利用document.createElement('script')生成了一个script的标签，设置其 type属性为text/javascript。function addScript(url){ var script = document.createElement('script'); script.setAttribute('type','text/javascript'); script.setAttribute('src',url); document.getElementsByTagName('head')[0].appendChild(script); }方法三：利用ES6中export和import实现模块化，一个js文件代表一个js模块，ES6引入外部模块分两种情况： 1. 导入外部的变量或函数等： import {firstName, lastName} from './test'; 2. 导入外部的模块，并立即执行： import './test' //执行test.js，但不导入任何变量

CSS响应式DIV自适应PC和移动设备
type: item
date: 2024-03-20T12:30:00+00:00
description: Index 响应式布局 头部 左侧 中间 右侧 底部 CSS通过 @media screen and (限制范围) 来控制网页的布局，min-width 代表最小的限制，max-width 代表最大的限制。*{ margin: 0; padding: 0; } /*适应PC端 宽度大于1000px*/ @media screen and (min-width: 1000px) { #content{ width: 960px; margin:0 auto; } #header{ width: 100%; line-height: 100px; float: left; background: #333; color: #fff; text-align: center; font-size: 30px; margin-bottom: 10px; } #left{ width: 200px; line-height: 400px; text-align: center; background: #333; float: left; font-size: 30px; color: #fff; margin-right: 10px; } #center{ width: 540px; line-height: 400px; text-align: center; background: #333; float: left; font-size: 30px; color: #fff; } #right{ width: 200px; line-height: 400px; text-align: center; background: #333; float: right; font-size: 30px; color: #fff; } #footer{ width: 960px; height: 200px; background: #333; color: #fff; line-height: 200px; font-size: 30px; text-align: center; float: left; margin-top: 10px; } } /*适应pad端 宽度在640-1000之间*/ @media screen and (min-width: 640px) and (max-width: 1000px) { #content{ width: 600px; margin:0 auto; } #header{ width: 100%; line-height: 100px; float: left; background: #333; color: #fff; text-align: center; font-size: 30px; margin-bottom: 10px; } #left{ width: 200px; line-height: 400px; text-align: center; background: #333; float: left; font-size: 30px; color: #fff; margin-right: 10px; } #center{ width: 390px; line-height: 400px; text-align: center; background: #333; float: left; font-size: 30px; color: #fff; } #right{ width: 600px; line-height: 300px; text-align: center; background: #333; float: left; font-size: 30px; color: #fff; margin-top: 10px; } #footer{ width: 600px; height: 200px; background: #333; color: #fff; line-height: 200px; font-size: 30px; text-align: center; float: left; margin-top: 10px; } } /*适应移动端 宽度小于640*/ @media screen and (max-width: 639px){ #content{ width: 400px; margin:0 auto; } #header{ width: 100%; line-height: 100px; float: left; background: #333; color: #fff; text-align: center; font-size: 3…

用HTML5实现Typecho本地视频、音乐播放
type: item
date: 2024-03-20T08:23:00+00:00
description: 1、基本语法（Basic Syntax）常用的 HTML5 Video 标签含有 src、poster、preload (none, metadata, auto)、controls、width、height 等几个属性，以及一个内部使用的标签。 2、对象填充（Object Fit）对象填充属性（object-fit）用于指定视频在其容器中的布局方式。下面是一些常用的对象填充属性值：fill：默认值，视频会完全填充容器，可能会导致视频的原始比例发生变化。contain：视频将等比例缩放以适应容器的宽度和高度，可能会露出空白区域。cover：视频将等比例缩放以填充容器的宽度和高度，可能会裁剪视频的部分内容。none：视频将按照其原始大小显示在容器中，可能会导致容器内出现空白。 3、视频宽高比（Aspect Ratio）视频宽高比属性用于指定视频的宽高比，控制并保持视频的正确比例，避免视频被拉伸或压缩。 在上述示例中创建了一个名为 video-container 的容器，并使用 CSS 的 aspect-ratio 属性将视频的宽高比设置为16/9，视频元素的宽度和高度设置为100%，并使用对象填充属性 object-fit 将其缩放模式设置为 contain，以适应容器的宽度和高度。4、自定义缩放模式通过 CSS 或 JavaScript 自定义视频的缩放模式，通过动态修改视频的宽度和高度，实现自定义的缩放效果。 放大 缩小 原始大小 首先创建了一个名为 video-container 的容器，用于包裹视频元素，视频元素的宽度和高度设置为100%，通过 JavaScript 中的 scaleVideo 函数，可以根据传入的缩放比例动态修改视频的宽度和高度，通过点击按钮来触发函数，实现视频的放大、缩小和恢复原始大小的功能。5、音乐不显示播放器 <bgsound src="音乐保存的绝对路径" autostart=true loop=infinite> 6、音乐显示播放器 可以使用 CSS 的 display 控制 audio 标签的隐藏和显示：

WINDOWS双网卡路由设置分别访问内外网
type: item
date: 2022-05-10T02:38:00+00:00
description: 1、使用管理员权限打开Power Shell或CMD；2、ipconfig查看网卡IP配置3、route添加路由表信息，不加参数显示帮助信息；4、添加路由信息示例route add 192.168.50.6 mask 255.255.255.0 192.168.50.1 # 临时通过网关192.168.50.1访问地址192.168.50.6，重启后恢复 route add 192.168.50.0 mask 255.255.0.0 192.168.50.1 -p # 加了参数-p，永久通过网关192.168.50.1访问地址192.168.50.X网段 route add 0.0.0.0 mask 0.0.0.0 192.168.1.1 -p # 永久通过网关192.168.1.1访问其它所有未指定的网段IP地址 route delete 192.168.50.0 # 删除192.168.50.X网段的路由配置 route change 192.168.50.0 mask 255.255.0.0 192.168.50.3 # 修改192.168.50.X网段的子网掩码为255.255.0.0，访问网关为192.168.50.35、查看已添加的路由信息；route print -4 # -4 IPv4; -6 IPv6; 不赋参数，同时显示IPv4和IPv6

Handsome主题美化代码修改及备忘
type: item
date: 2021-11-17T14:12:00+00:00
description: 飘落樱花前景 + 点击鼠标心形主题 footer.php 底部 之前血小板看板娘（主题 -> 开发者设置 -> 自定义 JS）<!--引入上传的JS文件> 心知天气/usr/themes/handsome/component/headnav.php第184行 之后： 响应时间和访客总数/usr/themes/handsome/functios.php的第44行： /*与sidebar.php文件中第106行配合显示加载时间*/ function timer_start() { global $timestart; $mtime = explode( ' ', microtime() ); $timestart = $mtime[1] + $mtime[0]; return true; } timer_start(); function timer_stop( $display = 0, $precision = 3 ) { global $timestart, $timeend; $mtime = explode( ' ', microtime() ); $timeend = $mtime[1] + $mtime[0]; $timetotal = number_format( $timeend - $timestart, $precision ); $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s"; if ( $display ) { echo $r; } return $r; } /*与sidebar.php文件中第106行配合显示总访问量*/ function theAllViews(){ $db = Typecho_Db::get(); $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`'); echo number_format($row[0]['SUM(VIEWS)']); } /usr/themes/handsome/component/sidebar.php的第106行： <?php echo theAllViews();?> <?php _me("访客总数") ?> <?php echo timer_stop();?> <?php _me("响应耗时") ?> 后台顶部中文字段管理后台[欢迎文字]、[版本文字]、[顶部大按钮]通过\libs\Settings.php修改。大字体的版本文字在145行。后台设置中文字段具体的设置内容、设置提示、文字说明通过functions_mine.php修改。后台顶部颜色主题十六进制颜色阵列，通过libs\Handsome.php第16到19行修改。

WINDOWS通过CMD进行网络重置
type: item
date: 2021-10-10T03:43:00+00:00
description: ipconfig /flushdns nbtstat -RR netsh int ip reset netsh winsock reset

CFW基于MIXIN启用TUN模式
type: item
date: 2021-08-26T03:54:00+00:00
description: 对于不遵循系统代理的软件，TUN模式可以接管其流量并交由CFW处理，在Windows中，TUN模式性能比TAP模式好：1、进入网站Wintun，点击界面中Download Wintun xxx下载压缩包，根据系统版本将对应目录中wintun.dll复制至Home Directory目录中。基于x64的处理器的64位操作系统请使用amd64版本，32位操作系统请使用x86版本2、点击General中Service Mode右边Manage，在打开窗口中安装服务模式，安装完成应用会自动重启，Service Mode 右边地球图标变为绿色即安装成功3、进入Settings页面 -> Profile Mixin栏 -> 点击YAML右边Edit小字打开编辑界面，修改内容为：mixin: # object dns: enable: true enhanced-mode: redir-host nameserver: - 8.8.8.8 # 真实请求DNS，可多设置几个 - 223.5.5.5 - 223.6.6.6 - 114.114.114.114 # interface-name: WLAN # 出口网卡名称，或者使用下方的自动检测 tun: enable: true stack: gvisor # 使用 system 需要 Clash Premium 2021.05.08 及更高版本 dns-hijack: - 198.18.0.2:53 # 请勿更改 auto-route: true auto-detect-interface: true # 自动检测出口网卡4、编辑完成以上配置后点击保存，并在首页启用Mixin，向所有配置文件中注入该公共属性。#TIP 配置文件内容不会被修改，混合行为只会发生在内存中 可以通过任务栏图标菜单启用或禁用该代码

OpenWRT中的AdguardHome设置
type: item
date: 2021-08-24T04:03:00+00:00
description: 1、配合PW，不要使用SSRP2、重定向53端口到AdguardHome3、防火墙注释掉以下四行：#iptables -t nat -A PREROUTING -p udp --dport 53 -j REDIRECT --to-ports 53 #iptables -t nat -A PREROUTING -p tcp --dport 53 -j REDIRECT --to-ports 53 #[ -n "$(command -v ip6tables)" ] && ip6tables -t nat -A PREROUTING -p udp --dport 53 -j REDIRECT --to-ports 53 #[ -n "$(command -v ip6tables)" ] && ip6tables -t nat -A PREROUTING -p tcp --dport 53 -j REDIRECT --to-ports 53