打开docker

在注册表中输入homeassistant

选择 homeassistant/home-assistant 右键-下载此映像

选择 latest

下载完成后，在日志中可看到

Add image from docker.io/homeassistant/home-assistant:latest

选择容器
关闭 homeassistant 容器

右键-操作-(重置)清除-是

不用担心你的数据都在，如果实在不放心，可以把镜像导出备份一下

再打开

更新成功

1
2
3
4
5
6
7

Cloning into 'blog'...
kex_exchange_identification: Connection closed by remote host
Connection closed by xxx.xxx.xxx.xxx port 22
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

在尝试关掉openClash之后发现，可以正常了，看来是代理的问题。

经过搜索，发现只要在规则里增加一条，便可以解决问题。

我的是在路由中使用的 openClash 操作方法具体如下：

• 全局设置-规则设置-打开自定义规则

• 在rules: 中增加一条 - DST-PORT,22,DIRECT

• 拉到最下放 点击保存配置，应用配置

等待重启完成之后便可以正常clone了。

一直在用google photo ，各种的图片分类和整理真的很方便，还会不定期的推送，它自动合成的视频和一些动图，虽然国内也有一刻相册，ios的相册也有了类似的功能，但这些跟googlePhoto比起来还是略有不足

今年2021年6月1号开始，谷歌相册开始不免费了，再备份就会占用15GB的存储空间，我也一直在找替代方案，尝试一些其他的相册服务之后，实在是不够完美，无意间发现 pixle 1 还可以无限容量的备份，就来了思路。

所需设备：主力机，Pixle1, 群晖。

软件： Syncthing

首先从闲鱼150收了一个二手的Pixle1 , 没有声音，略有烧屏，不过便宜能用就好。

到手升级到了安卓10 ，居然有声音了，心想赚了，重启后又没有了，网上搜索了一下才知道，这个是当时的通病，不过无所谓了。

看到相册这里，的确说明可以免费无限备份

群晖安装 Syncthing

Syncthing 介绍请看官网这里就不多做介绍了。

https://docs.syncthing.net/index.html

先在套件中心新增一个套件来源

名称随意这里填写：imnks

位置填写：https://spk.imnks.com

这里的地址仅供参考。要是无法添加可以再换一个。

然后就是搜索 Syncthing 点击安装。安装成功之后等待启动。

启动完成之后，我们在浏览器中输入 http://192.168.2.42:8384/# 这里的地址换成你的NAS地址 端口号是 8384

先在左侧新增文件夹，下图是我配置好的

这里的文件夹路径可以在群晖的文件管理中右键-属性获得

这里我是通过手机上的 Moments app 备份至群晖的，这个Moments/Mobile文件夹下 就是根据你备份设备的名称自动建立了。因为我之前已经有了大量照片，新的同步方案只用于新的照片，我把我的手机改了下名称，这样再通过 Moments 同步到群晖 就会生成一个新的文件夹。

复制这里的 所在位置，填入 Syncthing 的文件夹路径中

第二个tab签是 要共享的设备 我这里已经有了 Pixel

版本控制不用启用，忽略模式这里要填上 @eaDir 这个目录是群晖的全局搜索建立的索引目录，如果不排查也会同步到 远程设备上，这个我们是不需要的。

高级这里我们选择仅发送即可，其他不用修改了。

在pixle1上安装 Syncthing

安装之后，先通过 右上角的 + 来添加设备。

这里我们打开 群晖上的 Syncthing Web端 扫码添加

扫码添加后就可以在手机端的设备tab签下看到了。

然后切换到 文件夹 tab 添加一个要接收文件的文件夹，这里要注意的是，文件夹的路径要选到 DCIM 目录下，这个是相册目录，谷歌相册自动就识别了，有文件后就自动上传。目录种类这里 选择仅接收，这样等我们手机的存储占满后可以使用谷歌相册的释放空间功能释放本地空间，也不会影响NAS上的文件。

至此已配置完成。之后手机上通过Moments 备份至 NAS后，Pixel1便会自动备份了，且是无限容量哦。

对了，记得关闭主力设备上的谷歌相册备份功能。

后记：ios的 livephoto 照片通过pixle1备份到google photo 后发现是一个 照片加一个视频，跟ios 直接备份的1张动态图片有出入，我通过查询发现，google 是通过备份设备来判断的，pixle1不会生成 live photo的照片，所以备份到 google photot 就是分开的，这个暂时无解。

然而，由于较早版本的浏览器不支持 WebP 格式，因此现阶段还不应将全站图片转换为 WebP 格式。目前主流自适应 WebP 解决方案包括使用标签，浏览器端 js 检测替换以及 http header 识别等。部分 CDN 服务（又拍云，腾讯云等）也已经提供了自适应 WebP 图片转换功能。考虑到现有大量图片托管在阿里云 OSS 上，并通过CDN回源加速，在为了减少工作量，考虑采用 CDN 边缘脚本 + OSS 图片处理的方法实现类似功能。

但并不是所有的浏览器都支持这种图片格式，因此我们需要根据浏览器判断支持并返回正确的图片。我之前曾一直使用的又拍云是可以一键打开 WebP 自适应转换的，但阿里云这边并没有看到这样的选项，不过没关系，我们可以通过边缘脚本实现相同的功能。

OSS 添加图片 WebP 样式

首先需要在 OSS Bucket 管理功能中添加自定义图片处理规则，并在访问设置中设置自定义分割符（例如设置为感叹号 ! ）。此时即可通过在 OSS 资源访问地址中追加样式尾缀（分隔符+规则名称，例如 !webp ）的方法对图片进行在线处理。

另外可以在访问设置中设置自定义标识符，直接通过样式输出图片。

CDN 设置边缘脚本实现自动跳转

在 CDN 管理界面添加边缘脚本，根据 HTTP 相应头判断浏览器是否支持 WebP 图片格式，如果支持则 301 重定向至包含包含图片处理尾缀 “!webp” 的访问路径，注意尾缀应与规则名称一致。

1
2
3
4
5

m1 = and($http_accept, match_re($http_accept, '.*image\/webp.*'))
m2 = match_re($uri, '.+(.JPEG|.jpeg|.JPG|.jpg|.PNG|.png)$')
if and(m1, m2) {
    rewrite(concat($uri, '!webp'), 'enhance_redirect', 301)
}

设置完成后可在模拟环境下测试自适应重定向是否成功（Chrome浏览器中重定向，ie中无效），并可通过浏览器开发者模式检查图片是否为 WebP 格式。

参数说明

操作名称：format

参数说明如下：

注意事项

• 图片处理包含缩放操作时，建议将格式转换参数放到处理参数的最后。

  例如image/resize,w_100/format,jpg

• 图片处理包含缩放和水印操作时，建议将格式转换参数添加在缩放参数之后。

  例如image/reisze,w_100/format,jpg/watermark,...

示例

本文示例使用的Bucket为杭州地域名为image-demo的Bucket，图片外网访问地址为：

https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.gif[](http://static-aliyun-doc.oss-cn-hangzhou.aliyuncs.com/assets/img/zh-CN/8448459951/p139212.png)

• 将原图转换为PNG格式

  图片处理URL为：https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.gif?x-oss-process=image/format,png[](http://static-aliyun-doc.oss-cn-hangzhou.aliyuncs.com/assets/img/zh-CN/8448459951/p139213.png)

• 将原图转换成JPG格式，并支持渐进显示

  需求及处理参数如下：

  • 图片设置为渐进显示：interlace,1
  • 图片转换为JPG格式：format,jpg

  图片处理URL为：https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.gif?x-oss-process=image/interlace,1/format,jpg

  

• 将原图缩放为宽200 px，并转换为WebP格式

  需求及处理参数如下：

  • 图片缩放为宽200 px：resize,w_200
  • 图片转换为WebP格式：format,webp

  图片处理URL为：https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.gif?x-oss-process=image/resize,w_200/format,webp[](http://static-aliyun-doc.oss-cn-hangzhou.aliyuncs.com/assets/img/zh-CN/1548459951/p2559.webp?spm=a2c4g.11186623.2.12.48fc66a35FOLP9&file=p2559.webp)

原文地址 https://help.aliyun.com/document_detail/44703.html?spm=a2c4g.11186623.6.752.665f7fd8tuPrz4

下载安装

官方给出了绿色版和安装版，这里推荐安装版，更方便快捷，省区了配置环境变量的麻烦。

下载地址 https://github.com/coreybutler/nvm-windows/releases

下载 nvm-setup.zip 即可。

下载完成解压安装即可。

这里要注意的是有两个路径提示，第一个是nvm的安装路径，第二个是nodeJs的安装路径。如果你的nodeJs安装在默认路径下。一路下一步即可安装成功。

使用nvm安装nodeJs

安装 14.17.0

1

nvm install 14.17.0

注意这里的版本号，需要真是存在才可以。可以去 https://nodejs.org/zh-cn/download/releases/ 查询需要的版本

如果遇到下载失败，也没有关系，我们可以到阿里的镜像网站下载对应的安装包，解压到nvm的路径里

例如我们需要 14.17.0 的版本 https://npm.taobao.org/mirrors/node/v14.17.0/

找到 node-v14.17.0-win-x64.7z 下载解压至 C:\Users\【这里一般是你的用户名】\AppData\Roaming\nvm\v14.17.0 即可。

如果遇到安装后，node可以使用 npm 用不了也可以使用此方法。

切换node版本

1

nvm use 14.17.0

即可切换。

如果切换后使用 node -v 命令发现版本没有切换。可以把原来安装的nodeJs目录改掉

如我原来的nodeJs安装目录是 C:\Program Files\nodejs 改为 C:\Program Files\nodejsx 即可成功

显示安装的版本

1
2
3

nvm list
* 14.17.0 (Currently using 64-bit executable)
  8.17.0

带* 号的则为当前版本

链接汇总

nvm 下载地址 https://github.com/coreybutler/nvm-windows/releases

nodeJs官方版本库 https://nodejs.org/zh-cn/download/releases/

阿里镜像源 https://npm.taobao.org/mirrors/node/

进入以下页面，获取 Linux Binaries (x64) 的链接
https://nodejs.org/en/download/

若需要其他版本请访问 https://nodejs.org/dist/

以下安装步骤以 node-v12.18.0-linux-x64 为例，其他版本替换相应路径即可。

下载

wget https://nodejs.org/dist/v12.18.0/node-v12.18.0-linux-x64.tar.xz

解压

xz -d node-v12.18.0-linux-x64.tar.xz
tar -xf node-v12.18.0-linux-x64.tar

部署

这里注意node解压的路径 以 ~ 目录为例
ln -s ~/node-v12.18.0-linux-x64/bin/node /usr/bin/node
ln -s ~/node-v12.18.0-linux-x64/bin/npm /usr/bin/npm
ln -s ~/node-v12.18.0-linux-x64/bin/npm /usr/bin/npx

测试

node -v
npm
npx

安装pm2

npm i -g pm2

运行

1

pm2 start npm --name "package.json中的应用名称" -- run start

pm2 常用命令

nginx 反向代理设置

1
2
3
4
5
6
7
8

server {
  listen 80;
  server_name 域名1 域名2;
  location / {
        root /data/wwwroot/路径; # 前端文件目录
        proxy_pass http://127.0.0.1:3000;
  }
}

pm2 开机启动

1
2
3
4
5
6
7
8

# 启动项目
pm2 start npm --name "package.json中的应用名称" -- run start
# 保存当前进程状态
pm2 save
# 生成开机自启动服务
pm2 startup
# 启用开机自启
systemctl enable pm2-root

错误

1. -bash: pm2: command not found
   替换 node-v12.18.0-linux-x64 为你的node 版本号

   1	ln -s /root/node-v12.18.0-linux-x64/lib/node_modules/pm2/bin/pm2 /usr/local/bin

2. 执行 npm i失败
   安装node-sass时会出现，Permissions Errors

使用二进制安装的Node 会有权限问题。

1

chown -R root:root node-v8.10.0-linux-x64

使用 navicat 恢复备份后发现部分表丢失
查看错误日志发现 创建表失败

1
2

[Err] 1067 - Invalid default value for '*******'
[Err] Failed to create Table: *******

解决方案

搜索之后发现是因为升级到 mysql 5.7 之后默认值不兼容的问题。
解决办法就是修改 sql_mode

解决

windows 环境下进入到 mysql 的 bin 目录下
shift加鼠标右键 选择在此处打开PowerShell 窗口

1

.\mysql -hlocalhost -P3306 -uroot -p123123

注意这里在PowerShell下要使用 .\mysql 不是直接使用 mysql

输入 show variables like 'sql_mode'; 查看当前的 sql_mode 设置

如果结果中包含 NO_ZERO_IN_DATE, NO_ZERO_DATE
则需要修改

在命令行中执行

1

set session sql_mode=‘ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION’;

这只是临时会话有效。需要修改配置文件。

尝试使用

1

set sql_mode=‘ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION’;

也没有效果。

这里通过修改 配置文件 实现

· windows my.ini

· linux my.cnf

在配置文件[mysqld]中加上

注意要加在[mysqld]中

1	sql_mode='ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION'

重启服务器，再次导入navicat备份，全部成功

附 sql_mode常用值

1
2

http://ex.wordpress.com/wp-json/wp/v2/categories/分类id
http://ex.wordpress.com/wp-json/wp/v2/categories?parent=父级分类id

获取文章列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 默认10篇
http://ex.wordpress.com/wp-json/wp/v2/posts

# 指定分类
categories=分类id

# 带特色图片和作者信息
_embed=true

# 页码
page=2

# 设置每页返回数量(1~100)
per_page=2

# 偏移
offset=1

返回说明

1
2
3
4
5

# 集合中的记录总数
X-WP-Total

# 包含所有可用记录的总页数
X-WP-TotalPages

获取文章

1

http://ex.wordpress.com/wp-json/wp/v2/posts/文章id

根据标签获取文章

1

http://ex.wordpress.com/wp-json/wp/v2/posts?tags=标签id

filter

1
2
3
4
5
6
7
8
9
10
11

# 指定标签的文章
http://ex.wordpress.com/wp-json/wp/v2/posts?filter[tag]=library

# 指定日期的文章
http://ex.wordpress.com/wp-json/wp/v2/posts?filter[year]=2016&filter[monthnum]=03

# 指定作者的文章
http://ex.wordpress.com/wp-json/wp/v2/posts?filter[author_name]=jinyun

# 随机文章
http://ex.wordpress.com/wp-json/wp/v2/posts?filter[orderby]=rand

标签

1
2

http://ex.wordpress.com/wp-json/wp/v2/tags
http://ex.wordpress.com/wp-json/wp/v2/tags/3

媒体

1
2

http://ex.wordpress.com/wp-json/wp/v2/media
http://ex.wordpress.com/wp-json/wp/v2/media/3

页面

1
2

http://ex.wordpress.com/wp-json/wp/v2/pages
http://ex.wordpress.com/wp-json/wp/v2/pages/3

类型

1
2

http://ex.wordpress.com/wp-json/wp/v2/types
http://ex.wordpress.com/wp-json/wp/v2/types/post

评论

1
2

http://ex.wordpress.com/wp-json/wp/v2/comments
http://ex.wordpress.com/wp-json/wp/v2/comments/2

用户

1
2

http://ex.wordpress.com/wp-json/wp/v2/users
http://ex.wordpress.com/wp-json/wp/v2/users/2

必备插件

WP-China-Yes

安装后可以解除更新和商店的封锁，可以正常更新和安装插件
作者站点 https://www.ibadboy.net/archives/3204.html
git地址 https://github.com/sunxiyuan/wp-china-yes
点击 clone or download 按钮，点击 Download ZIP 既可下载
在wordpress 后台的安装插件处 上传安装。

高级自定义字段

可以给文章扩展自定义字段，可根据条件显示不同的字段

Simple Custom Post Order && Post Types Order

文章和栏目拖拽排序，这两个插件必须都安装，才可以实现拖拽排序

Admin Menu Editor

自定义后台的菜单目录

WP文件管理器

可以管理网站的目录

REST API Helper

可以让rest api 显示出 封面图片，作者，类别，和自定义字段

OSS Upload

上传图片到阿里云oss

forminator

强大的自定义表单插件

forminator

强大的自定义表单插件

Contact Form 7

表单插件，可支持 REST API
http://www.yourdomain.com[你的域名]/wp-json/contact-form-7/v1/contact-forms/358[表单ID]/feedback

插件只支持发送到邮件，但可以通过 Flamingo 插件保存信息
说明 https://contactform7.com/save-submitted-messages-with-flamingo/
在额外的设置标签下添加 [the-email-field] 为配置中的字段

1
2
3
4

skip_mail: on
flamingo_email: "[the-email-field]"
flamingo_name: "[the-name-field]"
flamingo_subject: "[the-subject-field]"

skip_mail: on 为跳过邮件发送
启用插件后，可在目录中找到Flamingo 点击进入收件箱
数据保存在 wp_postmeta 表中

aliyun-cdn-helper

刷新阿里云的cdn服务
https://github.com/0xJacky/aliyun-cdn-helper

下面介绍使用VSCode调试Nuxt.js的服务端接口

点击 VSCode 侧栏上的 debug 工具，选择添加配置文件

添加如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13

{
    "version": "0.2.0",
    "configurations": [
        
        {
            "type": "node",
            "request": "attach",
            "name": "调试nuxt",
            "processId": "${command:PickProcess}",
            "port": 9229
        }
    ]
}

然后运行 npm run dev

选择好配置文件后，点击签名的小三角开始调试，会弹出窗口提示选择node.js进程。选择nuxt 本地的调试进程就好。默认是3000的端口

之后就进入了调试状态。

在VSCode中打上响应的断点，然后刷新对应的页面，就可以愉快的debug了。

使用七牛云的中国代理 https://goproxy.cn/

1
2
3
4
5
6
7
8
9
10

$ go env -w GO111MODULE=on
$ go env -w GOPROXY=https://goproxy.cn,direct

# macOs
$ export GO111MODULE=on
$ export GOPROXY=https://goproxy.cn

# windows
C:\> $env:GO111MODULE = "on"
C:\> $env:GOPROXY = "https://goproxy.cn"

安装Go

https://golang.google.cn/dl/

1
2
3
4
5

# 查看版本号
go version

# 查看环境变量
go env

vscode 开发可以安装 go的插件

一个Demo

main.go

1
2
3
4
5
6
7

package main

import "fmt"

func main() {
fmt.Println("你好")
}

运行

1

go run main.go

基本语法

变量定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 变量名称由数字、字母、下划线组成，首个字符不能为数字
var 变量名称 类型 = 值 

# 类型推导
var 变量名称 := 值 

# 一次声明多个变量
var 变量名称,变量名称 类型 //类型一致
var ( //类型不一致
    变量名称 类型
    变量名称 类型
    变量名称 类型
)

# 短变量声明法 只能在函数内部使用，不是全局变量
变量名称 := 值 

# 短变量一次声明多个
变量名称,变量名称,变量名称 := value1, value2, value3

# 匿名变量 用来忽略某些值 ,如果一个函数返回两个值，但只需要一个值的时候可以使用匿名变量 _

变量定义后必须使用，声明后不赋值则为空

常量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

const pi = 3.14

pi = 2 //error 常量不可改变

// n1 n2 n3 n4 都是100
const (
    n1 = 100
    n2
    n3
    n4
)

// iota
const (
    n1 = iota //0
    n2 //1
    n3 //2
    n4 //3
    _ //跳过
    n5 //5
)

const (
    n1, n2 = iota+1, iota+2 //1 2
    n3, n4 // 3 4
)

go fmt fileName.go 可以格式化代码

数据类型

1
2
3
4
5
6

// 1 int int8 int16 int32 int64
var num int = 10

// 类型转换 int8 转换成 int16
var num1 int8 = 10
int16(num1)

内置函数

打印方法
fmt 包

1
2
3
4

ftm.Println("") //换行打印 
fmt.Print("")      //不换行打印 
fmt.Printf("类型:%T, 值1:%v, 值2:%v", 变量1, 变量2, 变量3) 
// %v 原样输出；%d 10进制输出； %b 2进制输出；%o 8进制 %x 16进制

unsafe.Sizeof 可以查看不同长度的整型，在内存中的存储空间

1
2

var a int8 = 99
fmt.Println(unsafe.Sizeof(a))

安装beego 及 bee 工具

1
2
3

go get -u github.com/astaxie/beego

$ go get -u github.com/beego/bee

创建一个API项目

1

bee api projectName

正在施工…

1
2
3
4
5

# 压缩
tar czvf filename.tar dirname

# 解压缩
tar zxvf filename.tar

指定用户或组 将目前目录下的所有文件与子目录的拥有者皆设为 www，群体的使用者 www:

1

chown -R www.www *

iptables

1
2
3
4
5
6
7
8

# 查看 iptables
iptables -nvL

# 添加规则 这里添加了一个 3306 端口
iptables -I INPUT 4 -p tcp -m state --state NEW -m tcp --dport 3306 -j ACCEPT

# 保存
service iptables save

mysql数据库

1
2
3
4
5
6
7
8
9
10

# 登录数据库
mysql -uroot -p

# 创建一个用户
create user username@'%' identified by 'password';

# 授权
grant all privileges on *.* to windy_db@'%' with grant option;
#  *.* 为所有权限， 也可以指定库和表 dbname.tablename
#  grant all privileges 为授权所有操作，也可单独指定  grant select,insert,update,delete,create,drop

1

npm install -g n

安装node

1
2
3
4
5
6
7

n 版本号

# 安装最新的稳定版本
n stable

# 安装最新版本
n latest

列表所有安装的版本

1

n list

切换版本

1
2
3
4
5

# 会显示一个可交互选择的列表
n

# 切换至指定版本
n 版本号

删除版本

1

n rm 版本号

错误处理

如果npm -v报一下错误

1

Segmentation fault

使用 n 5.10.1 安装一个低版本

然后 n list 列出所有按装的版本

n rm 12.16.1 删除错误的版本

n stable 安装最新的稳定版本

npm版本管理

升级

1

npm i -g npm

若升级后版本没有变化

1
2
3
4
5
6
7

获取当前npm 路径 查看路径是否是最新的npm 路径

npm config get prefix

重新设置npm路径

npm config set prefix /usr/local

安装

1

npm install weinre -g --registry=https://registry.npm.taobao.org

运行

1

weinre --httpPort 8081 --boundHost -all-

然后使用浏览器打开 http://localhost:8081/ 可以看到

在需要调试的页面上插入一段js

1

<script src="http://换成你的ip:8081/target/target-script-min.js#anonymous"></script>

手机页面的本地调试

• 本地起一个服务器，使用xampp 或 phpStudy 或其他你顺手的都可以。

• 本地开热点，windows 10 自带，如果你是台式机可能需要一个无线网卡才行

• 配置本地host 执行本地的服务器，服务器也要配置相应的域名

手机连上热点就可以使用Host中配置的域名访问本地站点了。

tips: 可能需要关闭本地的防火墙能访问到 weinre 的脚本，或者把node.js添加到排除中，可以在手机上直接访问脚本试试。

调试

点击 Access Points 下的 debug client user interface

在 Targets 中选中要调试的页面

就可以愉快的调试了，类似于 chrome 的控制台。

距离父元素顶部的距离

1
2
3
4
5

// js
ele.offsetTop;

// jq
$('ele').offset().top;

网页被卷起来的高度

1
2
3
4
5
6

// js
document.documentElement.scrollTop || document.body.scrollTop
window.pageYOffset

// jq
$(window).scrollTop()

元素的高度/宽度

1
2
3
4
5

// js
document.querySelector('.eleClass').clientHeight;

// jq
$('.eleClass').height();

窗口的高度

1
2

//js
window.innerHeight || document.documentElement.clientHeight

getBoundingClientRect

1
2
3
4
5

//元素顶部距窗口顶部的距离
element.getBoundingClientRect().top 

//元素底部部距窗口顶部的距离
element.getBoundingClientRect().bottom

下载烧录

这是官方的下载地址

https://www.home-assistant.io/hassio/installation/

一开始下的1.12版怎么也进不去系统，后来换了1.1版才可以。

https://github.com/home-assistant/hassos/releases/download/1.1/hassos_rpi3-64-1.1.img.gz

然后下载一个烧录工具etcher

https://www.balena.io/etcher/

把镜像烧到sd卡中

需要16G 以上的 TF 卡 官方推荐32G的卡

配置无限连接

配置 wifi 需要单独准备一个U盘来存放wifi连接信息

https://github.com/home-assistant/hassos/blob/dev/Documentation/network.md

uuid 的生成地址 https://www.uuidgenerator.net/

在network文件夹内创建文件my-network

修改其中的 ssid为你的wifi psk 为你的wifi密码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

[connection]
id=hassos-network
uuid=72111c67-4a5d-4d5c-925e-f8ee26efb3c3
type=802-11-wireless

[802-11-wireless]
mode=infrastructure
ssid=MY_SSID

[802-11-wireless-security]
auth-alg=open
key-mgmt=wpa-psk
psk=MY_WLAN_SECRET_KEY

[ipv4]
method=auto

[ipv6]
addr-gen-mode=stable-privacy
method=auto

安装 HASSIO

一定要给安装hassio的树莓派全程翻墙

启动后过一会访问hassio.loacl:8123会看到一个蓝色的房子让你等20分钟，如果你翻墙网速够好也就20分钟的事，要不然可能永远也不会好。

添加插件源

Hass.io -> ADD-ON STORE

https://github.com/hassio-addons/repository

主要的插件

SSH server

可以让你ssh连接hass.io

配置也比较简单

1
2
3
4

{
  "authorized_keys": [],
  "password": "youPassWord"
}

Configurator

可以在页面上编辑hass.io的配置文件，配置文件是hass.io的核心内容，通过简单的配置在不用安装插件的情况下就可以接入大量智能设备

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{
  "username": "yourUserName",
  "password": "yourPassWord",
  "ssl": false,
  "certfile": "fullchain.pem",
  "keyfile": "privkey.pem",
  "allowed_networks": [
    "192.168.0.0/16",
    "172.30.0.0/16"
  ],
  "banned_ips": [
    "8.8.8.8"
  ],
  "banlimit": 0,
  "ignore_pattern": [
    "__pycache__"
  ],
  "dirsfirst": false,
  "enforce_basepath": false,
  "notify_service": "persistent_notification.create"
}

你也可以使用winscp连接ssh直接编辑文件，但使用 Configurator 会帮你纠错

custom-ui

https://bbs.hassbian.com/thread-3975-1-4.html

开启MQTT

1
2

mqtt:
  password: mqttPassWord

默认值

接入homekit

在 configuration 文件里添加

1

homekit:

如果之前激活过，需要删掉config文件夹下的 .homekit.state 文件 然后重启

斐讯设备

小米设备

博联设备

ESP8266

ESP_Easy_0

192.168.4.1

烧录固件时把io0接到GND

不接RXD TXD 可运行

MQTT的配置

Devices -> Send to Controller

Tools -> Advanced -> 勾上 MQTT Retain Msg

Controller -> Edit -> 填入MQTT 的 IP ，端口一般为1883, Controller User为homeassistant(hassio默认) 密码是在配置文件中配置的，Controller Subscribe 默认，Controller Publish 改第一个变量 如 /Lux/%tskname%/%valname%

Enabled 勾上

然后到 hassio 的 configuration 文件中配置

1
2
3
4
5
6
7

sensor 3:
  - platform: mqtt
    name: "Lux" # 随便起，但中文不行
    state_topic: "/Lux/2561/Lux" # /你在esp8266 controller 中配置的/devices中的name/devices 中的Values 单位
    qos: 0
    retain: true
    unit_of_measurement: "lux" # 单位

Node RED

添加插件源 https://github.com/notoriousbdg/hassio-addons

资料参考

hass.io 官网 https://www.home-assistant.io

hass.io 组件一览表 https://www.home-assistant.io/components/

HassBan论坛 https://bbs.hassbian.com/forum.php

ESP EASY 官网 https://www.letscontrolit.com/

ESP EASY wiki https://www.letscontrolit.com/wiki/index.php/Main_Page

安可信官网 http://en.ai-thinker.com/

ESP8266文档 http://en.ai-thinker.com/esp8266/docs

软件下载

安信可串口调试助手 http://en.ai-thinker.com/_media/tools/aithinker_serial_tool_v1.2.3.7z

物料列表

树莓派3B+

32G TF卡

ESP8266 芯片 ESP01

ESP8266 芯片 ESP V3

面包板

杜邦线

TTL

光敏传感器

环境win10 命令行工具 Power Shell

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

如果以上命令出错可能需要改变组策略 执行以下命令
Set-ExecutionPolicy RemoteSigned -scope CurrentUser

安装 ios-webkit-debug-proxy

项目git https://github.com/google/ios-webkit-debug-proxy

如果 ping github.com 超时
去以下网址查询github.com 和 github.global.ssl.fastly.net 的IP
https://www.ipaddress.com/

然后在hosts里添加
192.30.253.112 github.com
151.101.185.194 github.global.ssl.fastly.net
执行 ipconfig /flushdns 刷新缓存

scoop bucket add extras
scoop install ios-webkit-debug-proxy

启动代理

ios_webkit_debug_proxy
会提示
Listing devices on :9221

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
Listing devices on :9221

使用chrome 打开
http://localhost:9222/

应用池

1
2

# 导出处所有应用池
%windir%\system32\inetsrv\appcmd list apppool /config /xml > c:\apppools.xml

1
2

# 导入处所有应用池
%windir%\system32\inetsrv\appcmd add apppool /in < c:\apppools.xml

这里要注意如果有重名的应用池就会导入失败，所以导入前要先删掉 默认的应用池 比如 DefaultAppPool

站点

1
2

# 导出处所有站点
%windir%\system32\inetsrv\appcmd list site /config /xml > c:\sites.xml

1
2

# 导入处所有站点
%windir%\system32\inetsrv\appcmd add site /in < c:\sites.xml

同样要删掉重名的站点 比如 Default Website

单独导入导出

1
2
3
4
5
6
7
8
9
10
11

# 导出单独应用程序池:
%windir%\system32\inetsrv\appcmd list apppool “应用程序池名称” /config /xml > c:\myapppool.xml

# 导入单独应用程序池:
%windir%\system32\inetsrv\appcmd add apppool /in < c:\myapppool.xml
 
# 导出单独站点:
%windir%\system32\inetsrv\appcmd list site “站点名称” /config /xml > c:\mywebsite.xml 

# 导入单独站点:
%windir%\system32\inetsrv\appcmd add site /in < c:\mywebsite.xml

打开 openwrt 上dnsmasq配置文件

1

vi /etc/config/dhcp

在 config dnsmasq 下添加

1

list address 'clients1.google.com/clients2.google.com/203.79.253.17'

clients1.google.com/clients2.google.com为域名，可以设置多个，使用‘/’分隔，最后一段是ip

重启使之生效

1

/etc/init.d/dnsmasq restart

苹果官网

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

@media only screen and (max-width: 1044px) {
    #ac-globalnav {
        min-width:320px
    }
}
@media only screen and (max-width: 1023px) {
    #ac-gn-segmentbar {
        min-width:320px
    }
}
@media only screen and (max-width: 767px) {
    #ac-globalnav .ac-gn-searchresults-list {
        padding:3px 30px 0
    }
}
@media only screen and (max-width: 419px) {
    #ac-globalnav .ac-gn-searchresults-list {
        padding:4px 0
    }
}

微软官网

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

@media (min-width:1779px) {
    html img.vp6 {
        display:block;
    }
}
@media (min-width:1400px) and (max-width:1778px) {
    html img.vp5 {
        display:block;
    }
}
@media (min-width:1084px) and (max-width:1399px) {
    html img.vp4 {
        display:block;
    }
}
@media (min-width:768px) and (max-width:1083px) {
    html img.vp3 {
        display:block;
    }
}
@media (min-width:540px) and (max-width:767px) {
    html img.vp2 {
        display:block;
    }
}
@media (max-width:539px) {
    html img.vp1 {
        display:block;
    }
}

@media 使用说明

设置meta

1

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• width = device-width：宽度等于当前设备的宽度
• initial-scale：初始的缩放比例（默认设置为1.0）
• minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
• maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
• user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

  加载兼容JS

  IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

  1 2 3 4

  <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]-->

设置IE渲染方式默认为Edge

1

<meta http-equiv="X-UA-Compatible" content="IE=edge">

除了在@media 规则中使用外，媒体查询也可应用于HTML标签以将样式表的应用限于某个特定媒体。

1

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen-styles.css" />

基本语法

1
2
3

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

媒体类型 mediatype

• all
  适用于所有设备。
• print
  为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media（媒体屏幕尺寸）, 以满足个别设备网页尺寸不匹配等问题。
• screen
  主要适用于彩色的电脑屏幕
• speech
  解析speech这个合成器.

媒体查询包括四种逻辑运算符 and|not|only

• and

1
2
3
4

- 逗号分隔(or)

```@media (min-width: 700px), handheld and (orientation: landscape) { ... }

• not not 对整句查询起效

1
2
3
4

等价于

```@media not (all and (monochrome)) { ... }

而不是

1
2
3
4

- only

```@media only (min-width: 300px) { ... }

可用的其他参数 media feature

• width:浏览器可视宽度。
• height:浏览器可视高度。
• device-width:设备屏幕的宽度。
• device-height:设备屏幕的高度。
• orientation:检测设备目前处于横向还是纵向状态。
• aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
• device-aspect-ratio:检测设备的宽度和高度的比例。
• color:检测颜色的位数。
• color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
• monochrome:检测单色楨缓冲区域中的每个像素的位数。
• resolution:检测屏幕或打印机的分辨率。
• grid：检测输出的设备是网格的还是位图设备。

常用的分辨率

1
2
3
4
5
6
7
8
9
10
11

/* 大屏幕 */
@media (min-width: 1200px) { ... }
 
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }

/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }

• 笔记本 1440px
• 小尺寸笔记本 1280px
• iPad Pro 1024px
• iPad 768px
• iPhone6/7/8 414px

使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

/*当页面宽度小于 960px 的时候执行包裹的css*/
@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

/*当页面宽度大于 960px 的时候执行包裹的css*/
@media screen and (min-width:960px){
    body{
        background:red;
    }
}


/*当设备的最大宽度等于 960px 的时候执行包裹的css*/
@media screen and (max-device-width:960px){
    body{
        background:red;
    }
}


/*当页面宽度大于 960px 且小于 1440px 的时候执行包裹的css*/
@media screen and (min-width:960px) and (max-width:1440px){
    body{
        background:red;
    }
}

/* 浏览器支持flex 且 页面宽度大于 900px 的时候执行包裹的css  */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

一些链接

@media说明

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

@media示例

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

设备分辨率查询网址

http://viewportsizes.mattstow.com/