更新

2020-11-24 17:45:32 +08:00
1 parent 5cd551a08e
commit 40cde540d6
@@ -1,9 +1,12 @@
 ---
 title: Angular CLI 之初体验
-tags: []
 id: '143'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - Angular
+ - CLI
+ - angular/cli
 date: 2017-09-20 17:13:04
 ---

@@ -11,41 +14,73 @@ date: 2017-09-20 17:13:04

 ## 配置开发环境

-1.  安装最新版本的node，angular官方要求**node `6.9.x` 和 npm `3.x.x` 以上的版本。** 具体安装请参考 [node官网](http://nodejs.cn/) ,安装过程不再赘述。
+1.  安装最新版本的node，angular官方要求**node `6.9.x` 和 npm `3.x.x` 以上的版本。** 具体安装请参考 [node官网](http://nodejs.cn/) , 安装过程不再赘述。
 2.  全局安装 [**Angular CLI**](https://cli.angular.io/)
+
    
-    ```
+
+    
+
+``` 
+
    npm install -g @angular/cli
    ```
+
    

 ## 创建新项目

 1.  打开终端窗口 运行下列命令来生成一个新项目以及应用的骨架代码：
+
    
-    ```
+
+    
+
+``` 
+
    ng new myapp
    ```
+
    
+
 2.  进入项目目录，并启动服务器。
+
    
-    ```
+
+    
+
+``` 
+
    cd myapp
    ng serve --open
    ```
+
    
+
    ng serve命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。 使用--open（或-o）参数可以自动打开浏览器并访问http://localhost:4200/。
+
    
-    ![app-works](https://image.dengtongyu.com/blog/2017/09/app-works.png)
+
+    
+
+![app-works](https://image.dengtongyu.com/blog/2017/09/app-works.png)
+
    

 ## 设置代理

 1.  我们开发的时候，有时需要对接口做代理，**[Angular CLI](https://cli.angular.io/)**同样给我们提供了设置代理的方式
+
    
+
    首先在项目的根目录下创建一个**proxy.conf.json** 文件
+
    
-    ```
+
+    
+
+``` 
+
    {
        "/data": {
            "target": "http://xxx.xxx.xxx.xxx:8080",
@@ -54,16 +89,28 @@ date: 2017-09-20 17:13:04
        }
    }
    ```
+
    
+
    "/data"是接口所包含的字符，target则是代理的ip和端口号
+
    
+
 2.  然后在项目的根目录打开终端，运行下面的指令：
+
    
-    ```
+
+    
+
+``` 
+
    ng serve --proxy-config proxy.conf.json
    ```
+
    
+
    这样代理的设置就完成了。
+
    

 ## 样式编译
@@ -71,35 +118,61 @@ date: 2017-09-20 17:13:04
 **[Angular CLI](https://cli.angular.io/)** 支持sass、less、stylus等方式编译样式

 1.  在创建项目时可以设置编译方式：
+
    
-    ```
+
+    
+
+``` 
+
    ng new myapp --style=sass
    ng new myapp --style=less
    ng new myapp --style=stylus
    ```
+
    
+
    上面分别是创建项目时设定的样式编译方式：sass、less、stylus
+
    
+
 2.  当然，你也可以在手动修改，在项目根目录下找到 **.angular-cli.json**
+
    
-    ```
+
+    
+
+``` 
+
    "defaults": {
        "styleExt": "styl",
        "component": {}
      }
    ```
+
    
+
    defaults下面的styleExt就是你要设定的编译方式，这里采用了stylus，stylus的后缀为styl，其他的方式设置对应的后缀名。
+
    
+
    然后继续在该文件中找到
+
    
-    ```
+
+    
+
+``` 
+
    "styles": [
            "styles.styl"
          ]
    ```
+
    
+
    全改完了之后，不要忘了把项目**根目录**里的css文件和**src/app**里的css文件也改成相应的后缀
+
    

 ## 打包编译后资源引入根目录
@@ -107,8 +180,13 @@ date: 2017-09-20 17:13:04
 **[Angular CLI](https://cli.angular.io/)** 打包编译后，引入的资源都是"/"根目录引入，但有时候我们的项目可能并不是存放在域名的根目录，所以这种情况就需要我们设置一下引入资源的根目录了

 1.  打开src目录下面的**index.html**文件，在<head>标签里面有个base标签
+
    
-    ```
+
+    
+
+``` 
+
    <!doctype html>
    <html>
    <head>
@@ -122,12 +200,21 @@ date: 2017-09-20 17:13:04
    </body>
    </html>         
    ```
+
    
+
    base标签默认是"/"根目录
+
    
+
 2.  然后我们回到整项目的根目录下面找到**package.json**文件,打开文件，找到"scripts"，修改"build"的值
+
    
-    ```
+
+    
+
+``` 
+
    "scripts": {
        "ng": "ng",
        "start": "ng serve --proxy-config proxy.conf.json",
@@ -137,19 +224,35 @@ date: 2017-09-20 17:13:04
        "e2e": "ng e2e"
      },
    ```
+
    
+
    然后在命令行中输入
+
    
-    ```
+
+    
+
+``` 
+
    npm run build 
    ```
+
    
+
    等待编译完成后，在dist目录下的**index.html**文件中的base标签的值就变成你之前设置的目录了，引入的资源放到正式环境也可以正常访问。
+
    
+
    当然，你也可以不设置**package.json**文件，直接在命令行输入
+
    
-    ```
+
+    
+
+``` 
+
    ng build --prod --bh /pages/myapp/
    或者
    ng build --prod --base-href /pages/myapp/
-    ```
+    ```
@@ -1,58 +1,61 @@
 ---
 title: browser-sync代理接口在IE8下返回406问题
-tags: []
 id: '64'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - browser-sync
+ - 代理
+ - IE8
+ - 406
 date: 2016-06-28 10:15:34
 ---

-正常情况下，代理返回的头信息为： HTTP/1.1 200 OK server?? ?Apache-Coyote/1.1 content-type?? ?application/json;charset=UTF-8 transfer-encoding?? ?chunked date?? ?Tue, 28 Jun 2016 02:07:39 GMT connection?? ?close   然而在IE8下面却返回了下面的头信息： HTTP/1.1 406 Not Acceptable server: Apache-Coyote/1.1 set-cookie: JSESSIONID=7F367B9EB53FDC8306D807E0A7BD4201; Path=/; HttpOnly content-type: text/html;charset=utf-8 date: Tue, 28 Jun 2016 02:01:31 GMT connection: close Transfer-Encoding: chunked   通过对比头信息，在代理设置里做了一下判断，在低版本IE浏览器重新设置一下头信息。
-
-```js
+正常情况下，代理返回的头信息为： HTTP/1.1 200 OK server?? ? Apache-Coyote/1.1 content-type?? ?application/json; charset=UTF-8 transfer-encoding?? ?chunked date?? ? Tue, 28 Jun 2016 02:07:39 GMT connection?? ?close   然而在IE8下面却返回了下面的头信息： HTTP/1.1 406 Not Acceptable server: Apache-Coyote/1.1 set-cookie: JSESSIONID=7F367B9EB53FDC8306D807E0A7BD4201; Path=/; HttpOnly content-type: text/html; charset=utf-8 date: Tue, 28 Jun 2016 02:01:31 GMT connection: close Transfer-Encoding: chunked   通过对比头信息，在代理设置里做了一下判断，在低版本IE浏览器重新设置一下头信息。

+``` js
 var browserSync = require('browser-sync');

 var proxyMiddleware = require('http-proxy-middleware');

 var proxy_context = ['/service/web'];
 var proxy_option = {
-target: 'http://' + proxyConfig.host + ':' + proxyConfig.port,
-//增加一个错误处理在window 7 ie7,8
-onProxyReq: function(proxyReq, req, res){
-var is4dot0 = false;
-var acceptValue = "";
-var acceptEncodeing = "";
-var rawHeaders = req.rawHeaders;
+    target: 'http://' + proxyConfig.host + ':' + proxyConfig.port,
+    //增加一个错误处理在window 7 ie7,8
+    onProxyReq: function(proxyReq, req, res) {
+        var is4dot0 = false;
+        var acceptValue = "";
+        var acceptEncodeing = "";
+        var rawHeaders = req.rawHeaders;

-rawHeaders.forEach(function(value, index){
-if(value === "Accept"){
-acceptValue = rawHeaders[index+1];
-}
-if(value === "Accept-Encoding"){
-acceptEncodeing = rawHeaders[index+1];
-}
-if(value.indexOf("Mozilla/4.0") === 0){
-is4dot0 = true;
-}
-});
-if(is4dot0){
-proxyReq.setHeader("Accept", acceptValue);
-proxyReq.setHeader("Accept-Encoding", acceptEncodeing);
-}
-}
+        rawHeaders.forEach(function(value, index) {
+            if (value === "Accept") {
+                acceptValue = rawHeaders[index + 1];
+            }
+            if (value === "Accept-Encoding") {
+                acceptEncodeing = rawHeaders[index + 1];
+            }
+            if (value.indexOf("Mozilla/4.0") === 0) {
+                is4dot0 = true;
+            }
+        });
+        if (is4dot0) {
+            proxyReq.setHeader("Accept", acceptValue);
+            proxyReq.setHeader("Accept-Encoding", acceptEncodeing);
+        }
+    }
 };
 var proxy = proxyMiddleware(proxy_context, proxy_option);

 browserSync({
-host: 'local.xxx.com',
-port: 3000,
-open: 'external',
-browser: 'google chrome',
-ghostMode: false, // 每个页面的镜像独立，不相互影响
-server: {
-baseDir: "build",
-middleware: [proxy]
-}
+    host: 'local.xxx.com',
+    port: 3000,
+    open: 'external',
+    browser: 'google chrome',
+    ghostMode: false, // 每个页面的镜像独立，不相互影响
+    server: {
+        baseDir: "build",
+        middleware: [proxy]
+    }
 });
-```
+```
@@ -1,15 +1,18 @@
 ---
 title: egret 练手 《围住神经猫》
-tags: []
 id: '115'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - egret
+ - 围住神经猫
+ - 小游戏
 date: 2017-09-04 11:42:10
 ---

-Egret引擎是一个开源免费的游戏框架，用于构建二维游戏、演示程序和其他图形界面交互应用等。Egret使用TypeScript脚本语言开发。当游戏完成最终的打包后，可以将程序转换为HTML5游戏。实现跨平台特性。 Egret不仅仅是一个基于HTML5技术的游戏引擎，我们的产品线中除了Egret引擎还提供了很多辅助游戏开发的工具。准确的来说，Egret是一套游戏开发的解决方案。你可以使用Egret引擎来帮助你开发HTML5游戏，并运行在手机和PC端的浏览器中，同时也你可以使用Egret提供的相关工具搭建你自己的游戏开发工作流。 Egret的语法与ActionScript 3.0 一致，如果对as3.0熟悉的童鞋能很快上手。 果然有兴趣的童鞋可以直接去Egret的官网，有详细的文档资料 [白鹭引擎官网](https://www.egret.com/) 最近学习Egret，看了一些文档后，决定找个简单的项目自己练一下手，《围住神经猫》应该是个很好的选择。 先贴上完成的作品 [Demo](https://demo.dengtongyu.com/pages/nervcat/) **1.新建项目** 打开EgretWing --> 文件 --> 新建项目 --> Egret游戏项目 完成后打开 src 下的 Main.ts，改文件就是整个项目的入口文件，里面还有一些已经写好的方法，方便你后面调用。 具体请参考 [传送门](http://edn.egret.com/cn/article/index/id/579) 里面介绍得很详细 **2.加载进度条** 新建游戏项目后，默认的加载进度比较简陋，我们需要美化一下。 打开 src\\LoadingUI.ts 文件，这个就是加载进度条的类。
+Egret引擎是一个开源免费的游戏框架，用于构建二维游戏、演示程序和其他图形界面交互应用等。Egret使用TypeScript脚本语言开发。当游戏完成最终的打包后，可以将程序转换为HTML5游戏。实现跨平台特性。 Egret不仅仅是一个基于HTML5技术的游戏引擎，我们的产品线中除了Egret引擎还提供了很多辅助游戏开发的工具。准确的来说，Egret是一套游戏开发的解决方案。你可以使用Egret引擎来帮助你开发HTML5游戏，并运行在手机和PC端的浏览器中，同时也你可以使用Egret提供的相关工具搭建你自己的游戏开发工作流。 Egret的语法与ActionScript 3.0 一致，如果对as3.0熟悉的童鞋能很快上手。 果然有兴趣的童鞋可以直接去Egret的官网，有详细的文档资料 [白鹭引擎官网](https://www.egret.com/) 最近学习Egret，看了一些文档后，决定找个简单的项目自己练一下手，《围住神经猫》应该是个很好的选择。 先贴上完成的作品 [Demo](https://demo.dengtongyu.com/pages/nervcat/) **1. 新建项目** 打开EgretWing --> 文件 --> 新建项目 --> Egret游戏项目 完成后打开 src 下的 Main.ts，改文件就是整个项目的入口文件，里面还有一些已经写好的方法，方便你后面调用。 具体请参考 [传送门](http://edn.egret.com/cn/article/index/id/579) 里面介绍得很详细 **2. 加载进度条** 新建游戏项目后，默认的加载进度比较简陋，我们需要美化一下。 打开 src\\LoadingUI.ts 文件，这个就是加载进度条的类。

-```
+``` 

 class LoadingUI extends egret.Sprite {

@@ -37,7 +40,7 @@ class LoadingUI extends egret.Sprite {

 从代码可以看出，进度条仅仅是用文字展示了加载进度，我们来加个进度条UI美化一下。

-```
+``` 

 class LoadingUI extends egret.Sprite {

@@ -81,9 +84,13 @@ class LoadingUI extends egret.Sprite {
 }
 ```

-效果如图： ![20170901165944](https://image.dengtongyu.com/blog/2017/09/20170901165944.png) **3.开始画面** 进度条弄好之后，我们开始做游戏开始的画面。如图： ![20170901171729](https://image.dengtongyu.com/blog/2017/09/20170901171729.png) 可以看出，开始画面由背景、网格地图和开始按钮的图片组成，这个实现起来很简单。
+效果如图： 

-```
+![20170901165944](https://image.dengtongyu.com/blog/2017/09/20170901165944.png) **3. 开始画面** 进度条弄好之后，我们开始做游戏开始的画面。如图： ![20170901171729](https://image.dengtongyu.com/blog/2017/09/20170901171729.png)
+
+ 可以看出，开始画面由背景、网格地图和开始按钮的图片组成，这个实现起来很简单。
+
+``` 

    private  mapGroup:eui.Group;//地图容器
    private  circleArray:Array<object>;//圆圈网格的数组
@@ -134,15 +141,13 @@ class LoadingUI extends egret.Sprite {
        this.btnStart.removeEventListener(egret.TouchEvent.TOUCH_TAP,this.touchHandler,this);
     }

-
-
 然后在createGameScene方法里面执行this.init()就可以了。

 但是我们还要绘制围住神经猫的9X9的网格地图。
 我们在 src 下面创建一个自定义布局类，命名为 Map.ts
 ```

-```
+``` 

 module uilayout {

@@ -210,7 +215,7 @@ let childY:number = row * (layoutElement.height + gapY);

 这样一个自定义布局类就写好了，如果对自定义布局不太了解的，可以去Egret的官网查看文档 [传送门](http://edn.egret.com/cn/article/index/id/525) 然后，我们在Main.ts入口文件里绘制9X9的圆圈网格。

-```
+``` 

 /**创建网格**/
     private creatMap() {
@@ -249,4 +254,8 @@ let childY:number = row * (layoutElement.height + gapY);
     }
 ```

-然后在init方法里面执行this.creatMap()就可以完成绘制了 ![20170901171508](https://image.dengtongyu.com/blog/2017/09/20170901171508.png) 后面的操作逻辑就不赘述了，有机会再跟大家分享。
+然后在init方法里面执行this.creatMap()就可以完成绘制了 
+
+![20170901171508](https://image.dengtongyu.com/blog/2017/09/20170901171508.png)
+
+ 后面的操作逻辑就不赘述了，有机会再跟大家分享。
@@ -1,15 +1,20 @@
 ---
 title: egret 获取设备陀螺仪信息以及运动状态信息
-tags: []
 id: '217'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - egret
+ - 陀螺仪
+ - DeviceOrientation
+ - Motion
 date: 2017-11-22 15:55:55
 ---

-在最新版本的egret（5.0.12）中，已经支持了移动设备陀螺仪和运动状态的相关API。 **egret.DeviceOrientation** 可以监听设备方向的变化。 **egret.Motion**从用户设备读取运动状态信息并派发 CHANGE 事件。当设备移动时，传感器会检测到此移动并返回设备加速度，重力和旋转数据。 废话不多说，直接上代码：
+在最新版本的egret（5.0.12）中，已经支持了移动设备陀螺仪和运动状态的相关API。 **egret. DeviceOrientation** 可以监听设备方向的变化。 **egret. Motion**从用户设备读取运动状态信息并派发 CHANGE 事件。当设备移动时，传感器会检测到此移动并返回设备加速度，重力和旋转数据。 废话不多说，直接上代码：
+
+``` 

-```
    class Main extends egret.DisplayObjectContainer {

    private orientationLabel: egret.TextField;
@@ -81,4 +86,6 @@ date: 2017-11-22 15:55:55
 }
 ```

-首先创建了DeviceOrientation的实例orientation。并给他添加了一个事件侦听器，监听它的CHANGE事件。然后调用了他的start()方法来开始监听设备方向的变化。 当系统监听到了方向的变化后，将回调函数 onOrientation。然后通过egret.OrientationEvent事件的三个属性来获取设备的方向变化信息。 OrientationEvent的三个属性：alpha,beta和gamma。 alpha表示设备绕 Z 轴的角度，单位是 角度 beta 表示设备绕 X 轴的角度，单位是 角度 gamma 表示设备绕 Y 轴的角度，单位是 角度 同样，创建了Motion的实例motion。并给他添加了一个事件侦听器，监听它的CHANGE事件。然后调用了他的start()方法来开始监听设备方向的变化。 当系统监听到了方向的变化后，将回调函数 onMotion。然后通过egret.MotionEvent事件的三个属性来获取设备运动的具体信息。 acceleration 表示设备在 X Y Z 轴方将的加速度信息，单位是 m/s2，不包含重力。 acceleration 表示设备在 X Y Z 轴方将的加速度信息，单位是 m/s2，包含重力。 rotationRate 表示设备在 alpha、 beta 和 gamma 三个轴向的角速度信息，单位是 角度每秒。 最终的效果demo->[传送门](https://demo.dengtongyu.com/pages/orientation/) 或者手机扫一扫： ![egret陀螺仪demo](https://image.dengtongyu.com/blog/2017/11/下载-1.png)
+首先创建了DeviceOrientation的实例orientation。并给他添加了一个事件侦听器，监听它的CHANGE事件。然后调用了他的start()方法来开始监听设备方向的变化。 当系统监听到了方向的变化后，将回调函数 onOrientation。然后通过egret. OrientationEvent事件的三个属性来获取设备的方向变化信息。 OrientationEvent的三个属性：alpha, beta和gamma。 alpha表示设备绕 Z 轴的角度，单位是 角度 beta 表示设备绕 X 轴的角度，单位是 角度 gamma 表示设备绕 Y 轴的角度，单位是 角度 同样，创建了Motion的实例motion。并给他添加了一个事件侦听器，监听它的CHANGE事件。然后调用了他的start()方法来开始监听设备方向的变化。 当系统监听到了方向的变化后，将回调函数 onMotion。然后通过egret. MotionEvent事件的三个属性来获取设备运动的具体信息。 acceleration 表示设备在 X Y Z 轴方将的加速度信息，单位是 m/s2，不包含重力。 acceleration 表示设备在 X Y Z 轴方将的加速度信息，单位是 m/s2，包含重力。 rotationRate 表示设备在 alpha、 beta 和 gamma 三个轴向的角速度信息，单位是 角度每秒。 最终的效果demo->[传送门](https://demo.dengtongyu.com/pages/orientation/) 或者手机扫一扫： 
+
+![egret陀螺仪demo](https://image.dengtongyu.com/blog/2017/11/下载-1.png)
@@ -1,9 +1,13 @@
 ---
 title: egret3d 用视频video做纹理贴图
-tags: []
 id: '267'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - egret
+ - video
+ - 纹理贴图
+ - Texture
 date: 2018-01-29 17:50:02
 ---

@@ -11,7 +15,8 @@ date: 2018-01-29 17:50:02

 思路也很简单，创建一个立方体，然后把立方的纹理设置成一个视频video，主要代码如下

-```
+``` 
+
     public createGameScene() {

        this.createVideoTexture();
@@ -57,4 +62,4 @@ date: 2018-01-29 17:50:02

 效果->[传送门](https://demo.dengtongyu.com/pages/videocude/)

-![视频贴图](https://image.dengtongyu.com/blog/2018/01/下载.png)
+![视频贴图](https://image.dengtongyu.com/blog/2018/01/下载.png)
@@ -1,19 +1,27 @@
 ---
 title: egret天空盒子浅尝
-tags: []
 id: '238'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - egret
+ - 天空盒子
+ - QueueLoader
+ - LoaderEvent3D
 date: 2017-11-22 18:35:36
 ---

-现在移动端越来越多类VR的推广H5页面需求，egret恰好也有相关的API可以方便我们使用，这就是egret的天空盒子-**egret3d.Sky** 在 Egret 3D 所创建的空间中最外层是由天空盒子来包裹起来的。我们通常使用天空盒子来展现风景，地平线，天空，星空等等空间的“大背景”。天空盒子由一组无缝的贴图包裹起来的盒状空间。当我们的 3D 场景中包含有物体时，天空盒子总是充当其背景。 ![天空盒子](https://image.dengtongyu.com/blog/2017/11/images.jpeg) 环境：egret 5.0.12 IDE：egret wing 3
+现在移动端越来越多类VR的推广H5页面需求，egret恰好也有相关的API可以方便我们使用，这就是egret的天空盒子-**egret3d. Sky** 在 Egret 3D 所创建的空间中最外层是由天空盒子来包裹起来的。我们通常使用天空盒子来展现风景，地平线，天空，星空等等空间的“大背景”。天空盒子由一组无缝的贴图包裹起来的盒状空间。当我们的 3D 场景中包含有物体时，天空盒子总是充当其背景。 
+
+![天空盒子](https://image.dengtongyu.com/blog/2017/11/images.jpeg)
+
+ 环境：egret 5.0.12 IDE：egret wing 3

 # 加载天空盒子素材资源

-通过**egret3d.QueueLoader**加载器加载资源，然后监听资源加载完成事件**egret3d.LoaderEvent3D.LOADER\_COMPLETE**。
+通过**egret3d. QueueLoader**加载器加载资源，然后监听资源加载完成事件**egret3d. LoaderEvent3D. LOADER\_COMPLETE**。

-```
+``` 

    /**
     *  加载器
@@ -34,9 +42,9 @@ date: 2017-11-22 18:35:36

 # 创建天空盒子

-资源加载完成后，用**egret3d.Sky**创建天空盒子，**egret3d.Sky**方法有三个参数， Sky(geometry:egret3d.Geometry, material:egret3d.MaterialBase, camera:egret3d.Camera3D), 分别是3D几何形状，纹理贴图，摄像机。然后把天空盒子添加到3D显示类里。
+资源加载完成后，用**egret3d. Sky**创建天空盒子，**egret3d. Sky**方法有三个参数， Sky(geometry:egret3d. Geometry, material:egret3d. MaterialBase, camera:egret3d. Camera3D), 分别是3D几何形状，纹理贴图，摄像机。然后把天空盒子添加到3D显示类里。

-```
+``` 

    // 天空盒资源加载完成 创建天空盒
    private onSkyBoxTexture(e: egret3d.LoaderEvent3D) {
@@ -65,7 +73,7 @@ date: 2017-11-22 18:35:36

 我们需要通过获取陀螺仪信息来根据手机的旋转，让天空盒子视角旋转对应的角度。

-```
+``` 

    // 获取设备旋转角度
    private setOrientation() {
@@ -90,4 +98,6 @@ date: 2017-11-22 18:35:36
    }
 ```

-最终效果->[传送门](https://demo.dengtongyu.com/pages/boxsky/) 手机扫一扫 ![egret天空盒子demo](https://image.dengtongyu.com/blog/2017/11/下载-2.png)
+最终效果->[传送门](https://demo.dengtongyu.com/pages/boxsky/) 手机扫一扫 
+
+![egret天空盒子demo](https://image.dengtongyu.com/blog/2017/11/下载-2.png)
@@ -1,9 +1,13 @@
 ---
 title: egret引用Animate CC发布的HTML5 Canvas
-tags: []
 id: '252'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - egret
+ - Animate CC
+ - Canvas
+ - swf
 date: 2017-12-15 18:04:34
 ---

@@ -17,7 +21,7 @@ date: 2017-12-15 18:04:34

  

-# 1.建立引用路径
+# 1. 建立引用路径

 ![egret引用HTML5 Canvas](https://image.dengtongyu.com/blog/2017/12/20171215173527.png)

@@ -25,13 +29,14 @@ date: 2017-12-15 18:04:34

  

-# 2.动画采集器
+# 2. 动画采集器

 通过外部引用html，然后获取页面的canvas的bitmap，然后添加到egret的舞台上。

 新创建一个类，命名为CollectAnimation.ts

-```
+``` 
+
 class CollectAnimation extends egret.DisplayObjectContainer {

 private _iframe:any;
@@ -144,11 +149,12 @@ this.parent.removeChild(this);

  

-# 3.在egret中使用
+# 3. 在egret中使用

 在Main.ts中使用我们刚刚创建的类

-```
+``` 
+
 class Main extends egret.DisplayObjectContainer {
    
    public constructor() {
@@ -178,4 +184,4 @@ class Main extends egret.DisplayObjectContainer {

 以上就是在egret中引用HTML5 Canvas的一些尝试，还有别的东西可能要等我慢慢挖掘了。

-效果->[传送门](https://demo.dengtongyu.com/pages/walkman/)
+效果->[传送门](https://demo.dengtongyu.com/pages/walkman/)
@@ -1,13 +1,16 @@
 ---
 title: egret粒子系统官方文档的那些坑
-tags: []
 id: '200'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - egret
+ - 粒子系统
+ - RES
 date: 2017-10-20 16:33:15
 ---

-最近体验了一下[egret粒子系统](http://edn.egret.com/cn/article/index/id/178),看了官方文档后，照着文档写，发现各种报错，不知道是原来文档就是错误的，还是egret版本多次迭代后，文档没有及时更新，而且在[egret开发者中心](http://developer.egret.com/)提供的QQ群加了也没有回应，或许是egret官方太忙了，但是不管怎样，这种错误的官方文档对新手很不友好。
+最近体验了一下[egret粒子系统](http://edn.egret.com/cn/article/index/id/178), 看了官方文档后，照着文档写，发现各种报错，不知道是原来文档就是错误的，还是egret版本多次迭代后，文档没有及时更新，而且在[egret开发者中心](http://developer.egret.com/)提供的QQ群加了也没有回应，或许是egret官方太忙了，但是不管怎样，这种错误的官方文档对新手很不友好。

 下面我来说说我在体验[egret粒子系统](http://edn.egret.com/cn/article/index/id/178)踩的一些坑

@@ -23,13 +26,15 @@ date: 2017-10-20 16:33:15

 按照示例的代码在egret 4.0.3版本中，编译就会报错

-```
+``` 
+
 error TS2339: Property 'system' does not exist on type 'Main'.
 ```

 'system'这个属性不属于'Main'，新人们在这里会懵逼一会儿，但是代码是死的，人是活的，我直接用个变量来保存particle对象嘛。我把代码改一下

-```
+``` 
+
        let texture = RES.getRes("funny");
        let config = RES.getRes("funny_json");
        let funny = new particle.GravityParticleSystem(texture, config);
@@ -39,20 +44,23 @@ error TS2339: Property 'system' does not exist on type 'Main'.

 我用个变量funny来保存particle对象，然后我再编译一下，没有报错，但是刷新浏览器的时候报错了

-```
+``` 
+
 Uncaught TypeError: Cannot read property 'textureWidth' of null
 ```

 无法读取纹理的宽度，其值为null。出现这种报错一般就是纹理加载不成功，所以要看看加载素材的地方

-```
+``` 
+
        let texture = RES.getRes("funny");
        let config = RES.getRes("funny_json");
 ```

 上面的纹理加载很明显与egret的素材加载方式有点不一样，不知道官方文档为什么会这样写，所以我改了一下，把纹理的后缀加上

-```
+``` 
+
        let texture = RES.getRes("funny_png");
        let config = RES.getRes("funny_json");
 ```
@@ -71,4 +79,4 @@ egret粒子系统库的引入也是一个小坑，我从[egret第三方库的Git

 **第三方库必须放到项目外面!**

-重要的事情说三遍
+重要的事情说三遍
@@ -1,20 +1,23 @@
 ---
 title: ES6 下定义变量，let大法好！
-tags: []
 id: '52'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - ES6
+ - let
+ - 作用域
 date: 2016-06-16 22:37:51
 ---

   var _声明的变量作用域不是块级的，会扩大变量的作用域，可能造成变量污染。_ let _声明的变量作用域就更精确，离开作用域变量就销毁。_ const _顾名思义就是常量了。_ **变量作用域更加精准** 不用担心变量作用域自动提升，造成上一级或全局变量值被覆盖。 举个栗子：

-```js
+``` js
 let a = 1;
 var b = 1;
 if (true) {
-  let a = 2;
-  var b = 2;
+    let a = 2;
+    var b = 2;
 }
 console.log(a) // 输出 1
 console.log(b) // 输出 2
@@ -22,20 +25,20 @@ console.log(b) // 输出 2

 **变量作用域可控性更好** let 的作用域是根据代码块（enclosing block）来判定的，而 var 的作用域是根据函数块（function block）来判定的。这样的话，如果我们的变量都使用 let/const 来声明，那么以前的立即执行函数就不需要了，我们只要加一个代码块就好了。 举个栗子：

-```js
+``` js
 {
-let a = 1;
+    let a = 1;
 }
 console.log(a) // 输出 a is not defined
 ```

 **Runtime自动检查重复声明的函数并报错** 在同一个作用域内不允许重复声明变量。 举个栗子：

-```js
+``` js
 if (true) {
-  let a = 1;
-  let a = 2;
+    let a = 1;
+    let a = 2;
 }
 ```

-Runtime会报错：Uncaught SyntaxError: Identifier 'a' has already been declared 有了更加清晰的作用域，我们的代码就能够更好被预测，也更好维护。 有了更容易控制的作用域可以让我们减少很多立即执行的函数。 Runtime的自动检查可以避免不必要，甚至是错误的代码声明。
+Runtime会报错：Uncaught SyntaxError: Identifier 'a' has already been declared 有了更加清晰的作用域，我们的代码就能够更好被预测，也更好维护。 有了更容易控制的作用域可以让我们减少很多立即执行的函数。 Runtime的自动检查可以避免不必要，甚至是错误的代码声明。
@@ -1,9 +1,13 @@
 ---
 title: https实践，Let's Encrypt 免费泛域名 SSL 证书申请
-tags: []
 id: '304'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - https
+ - Let's Encrypt
+ - SSL证书
+ - 免费泛域名
 date: 2018-07-12 11:26:42
 ---

@@ -15,7 +19,7 @@ date: 2018-07-12 11:26:42

 部署 HTTPS 网站的时候需要证书，证书由 CA 机构签发，大部分传统 CA 机构签发证书是需要收费的，这不利于推动 HTTPS 协议的使用。

-[Let’s Encrypt](https://letsencrypt.org/) 也是一个 CA 机构，但这个 CA 机构是免费的!也就是说签发证书不需要任何费用。
+[Let’s Encrypt](https://letsencrypt.org/) 也是一个 CA 机构，但这个 CA 机构是免费的! 也就是说签发证书不需要任何费用。

 [Let’s Encrypt](https://letsencrypt.org/) 是国外一个公共的免费 SSL 项目，由 Linux 基金会托管。由 Mozilla、思科、Akamai、IdenTrust 和 EFF 等组织发起，目的就是向网站自动签发和管理免费证书。以便加速互联网由 HTTP 过渡到 HTTPS，目前 Facebook 等大公司开始加入赞助行列。

@@ -35,13 +39,15 @@ ACME v2 是 ACME 协议的更新版本，泛域名证书只能通过 ACME v2 获

 如果没有下载安装过Certbot，先下载Certbot客户端

-```
+``` 
+
 wget https://dl.eff.org/certbot-auto
 ```

 然后把certbot-auto设为可执行权限

-```
+``` 
+
 chmod a+x certbot-auto
 ```

@@ -49,7 +55,8 @@ chmod a+x certbot-auto

 如果已经安装了Certbot，查看下自己的Certbot客户端是不是支持 ACME v2 版本，官方介绍 Certbot 0.22.0 版本支持新的协议版本

-```
+``` 
+
 ./certbot-auto --version
 Upgrading certbot-auto 0.21.1 to 0.25.1...
 Replacing certbot-auto... 
@@ -70,7 +77,8 @@ certbot 0.22.0

 使用 Certbot 客户端申请证书方法比较的简单，输入以下命令：

-```
+``` 
+
 ./certbot-auto certonly  -d domain.com -d *.domain.com --manual --preferred-challenges dns --server https://acme-v02.api.letsencrypt.org/directory 
 ```

@@ -88,7 +96,8 @@ _2、\*.domain.com可作用于所有子域名，但好像不能作用于domain.c

 执行完这一步之后，就是命令行的输出，请根据提示输入相应内容：

-```
+``` 
+
 Saving debug log to /var/log/letsencrypt/letsencrypt.log
 Plugins selected: Authenticator manual, Installer None
 Cert is due for renewal, auto-renewing...
@@ -116,7 +125,8 @@ Are you OK with your IP being logged?

 继续查看命令行的输出，非常关键：

-```
+``` 
+
 -------------------------------------------------------------------------------
 Please deploy a DNS TXT record under the name
 _acme-challenge.xxxxx.com with the following value:
@@ -130,7 +140,7 @@ Press Enter to Continue

 执行到上图最后一步时，先暂时不要回车。要求配置 DNS TXT 记录，从而校验域名所有权，也就是判断证书申请者是否有域名的所有权。接下来需要按照提示在域名后台添加对应的 DNS TXT 记录。

-上面输出要求给 \_acme-challenge.XXXXX.com 配置一条 TXT 记录，在没有确认 TXT 记录生效之前不要回车执行。
+上面输出要求给 \_acme-challenge. XXXXX.com 配置一条 TXT 记录，在没有确认 TXT 记录生效之前不要回车执行。

 我使用的是阿里云的域名服务器，登录控制台操作如下图：

@@ -138,7 +148,8 @@ Press Enter to Continue

 如上图所示，有两条DNS TXT，因为我们申请的时候就有两个域名，domain.com 和 \*.domain.com，所以我们在阿里云的后台添加一条DNS TXT后，我们回到命令行，按回车继续，然后会输出第二条DNS TXT

-```
+``` 
+
 -------------------------------------------------------------------------------
 Please deploy a DNS TXT record under the name
 _acme-challenge.xxxxx.com with the following value:
@@ -152,7 +163,8 @@ Press Enter to Continue

 同样，按照上面的步骤在阿里云的后台多加一条DNS TXT解析就好。加完稍等几分钟后，回到命令行，按回车

-```
+``` 
+
 Waiting for verification...
 Cleaning up challenges

@@ -176,7 +188,8 @@ Press Enter to Continue

 你也可以输入以下命令确认 TXT 记录是否生效：

-```
+``` 
+
 dig  -t txt  _acme-challenge.XXXXXX.com @8.8.8.8

 ; <<>> DiG 9.10.6 <<>> -t txt _acme-challenge.XXXXXX.com @8.8.8.8
@@ -202,7 +215,8 @@ _acme-challenge.dengtongyu.com.599 INTXT"XQOqY8npyso******ovtudA3zMd_C1dh9bjMEkb

 到了这一步后，恭喜您，证书申请成功。 证书和密钥保存在下列目录：

-```
+``` 
+
 /etc/letsencrypt/live/xxx.com/

 ├── cert.pem
@@ -213,7 +227,8 @@ _acme-challenge.dengtongyu.com.599 INTXT"XQOqY8npyso******ovtudA3zMd_C1dh9bjMEkb

 然后校验证书信息，输入如下命令：

-```
+``` 
+
 openssl x509 -in  /etc/letsencrypt/live/xxx.com/cert.pem -noout -text 
 ...
 Authority Information Access: 
@@ -231,7 +246,8 @@ X509v3 Subject Alternative Name:

 Nginx 配置文件片断：

-```
+``` 
+
 server {
    server_name xxx.com;
    listen 443 http2 ssl;
@@ -243,4 +259,4 @@ server {
      proxy_pass http://127.0.0.1:8080;
    }
 }
-```
+```
@@ -1,15 +1,19 @@
 ---
 title: navigator.mediaDevices.getUserMedia调用本地摄像头
-tags: []
 id: '94'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - 摄像头
+ - navigator
+ - mediaDevices
+ - getUserMedia
 date: 2017-04-28 15:20:27
 ---

 MediaDevices.getUserMedia()方法提示用户允许使用一个视频和/或一个音频输入设备，例如相机或屏幕共享和/或麦克风。 如果用户给予许可，就返回一个Promise 对象，MediaStream对象作为此Promise对象的Resolved［成功］状态的回调函数参数，相应的，如果用户拒绝了许可，或者没有媒体可用的情况下，PermissionDeniedError 或者NotFoundError作为此Promise的Rejected［失败］状态的回调函数参数。 _注意，由于用户不会被要求必须作出允许或者拒绝的选择，所以返回的Promise对象可能既不会触发resolve 也不会触发 reject。_ 首先在页面中放置一个video标签，用来播放本地摄像头采集到的视频流

-```
+``` 

     <video id="video" width="200" height="150" autoplay=""></video>

@@ -17,37 +21,42 @@ MediaDevices.getUserMedia()方法提示用户允许使用一个视频和/或一

 然后在js部分如下

-```js
-
+``` js
 //获取video标签
 var vedio = document.querySelector('#video');

 //constraints 参数是一个包含了video 和 audio两个成员的MediaStreamConstraints
 //对象，用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。
 var constraints = {
-audio: true,
-video: {
-                        //帧率
-frameRate: { ideal: 10,max: 15,min: 8 }
-}
+    audio: true,
+    video: {
+        //帧率
+        frameRate: {
+            ideal: 10,
+            max: 15,
+            min: 8
+        }
+    }
 }

 //获取设备（摄像头或者麦克风）
-navigator.mediaDevices.getUserMedia({ audio: false, video: true })
-.then(function(mediaStream){
-console.log(mediaStream);
-video.src = window.URL.createObjectURL(mediaStream);
-video.onloadedmetadata = function(e) {
-    video.play();
-    console.log(e);
-};
-})
-.catch(function(error){
-console.log(error);
-});
-
+navigator.mediaDevices.getUserMedia({
+        audio: false,
+        video: true
+    })
+    .then(function(mediaStream) {
+        console.log(mediaStream);
+        video.src = window.URL.createObjectURL(mediaStream);
+        video.onloadedmetadata = function(e) {
+            video.play();
+            console.log(e);
+        };
+    })
+    .catch(function(error) {
+        console.log(error);
+    });
 ```

 _注意：调取本地视频或音频设备的接口，出于安全的考虑，只能在localhost或者https下使用！_

-[demo 传送门](https://demo.dengtongyu.com/pages/20170522j7/)
+[demo 传送门](https://demo.dengtongyu.com/pages/20170522j7/)
@@ -1,24 +1,25 @@
 ---
 title: react native for ios 下的一个小坑
-tags: []
 id: '84'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - react
+ - native
+ - ios
 date: 2016-12-09 18:07:07
 ---

 最近在尝试学习一下react native，然后就按照官网的教程一步步配置环境，一切都很顺利，但是在xcode下run的时候就报错了。

-```js
-
-Error: *** Terminating app due to uncaught exception 'NSInternalInconsistencyException',
-reason: 'bundleURL must be non-nil when not implementing loadSourceForBridge'
+``` js
+Error: ** * Terminating app due to uncaught exception 'NSInternalInconsistencyException',
+    reason: 'bundleURL must be non-nil when not implementing loadSourceForBridge'
 ```

 谷歌百度一系列之后，仍然无法解决，然后加了react native中文的官方群提问，有人说是开启了VPN导致，然而我的Mac并没有配置VPN，一切又回到原点。 然而受到这个启发，把之前写web dom时配置的 127.0.0.1 localhost 还原。神奇的事情发生了，Xcode里的项目跑起来了！喜大普奔，然而我也没搞懂这是为什么。

-```js
-
+``` js
 #host文件一定要有这个
-127.0.0.1 localhost
-```
+127.0 .0 .1 localhost
+```
@@ -1,9 +1,12 @@
 ---
 title: vue CLI 代理设置以及打包引入配置
-tags: []
 id: '173'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - vue
+ - CLI
+ - 代理
 date: 2017-10-17 15:25:49
 ---

@@ -11,7 +14,7 @@ date: 2017-10-17 15:25:49

 在用 [vue CLI](https://www.npmjs.com/package/vue-cli) 做开发的时候，很多时候我们需要用到代理请求获取数据，[vue CLI](https://www.npmjs.com/package/vue-cli) 也很方便的为我们提供配置代理的API，打开[vue CLI](https://www.npmjs.com/package/vue-cli)项目的 _/config/index.js_ 文件，找到dev里的proxyTable

-```
+``` 

 module.exports = {
  //代理设置
@@ -37,7 +40,7 @@ module.exports = {

 我们用[vue CLI](https://www.npmjs.com/package/vue-cli)打包项目的时候默认引入的资源是"/"根目录，如果我们的项目在非根目录下就要重新配置一下了，同样的，打开[vue CLI](https://www.npmjs.com/package/vue-cli)项目的 _/config/index.js_ 文件，找到build里的assetsPublicPath

-```
+``` 

 module.exports = {
  build: {
@@ -51,4 +54,4 @@ module.exports = {
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }
-```
+```
@@ -1,42 +1,43 @@
 ---
 title: vue-resource http请求在ios浏览器下的一个小坑
-tags: []
 id: '69'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - vue-resource
+ - http请求
+ - ios
 date: 2016-07-05 18:41:00
 ---

-```js
-
+``` js
 new Vue({
-el: 'body',
-ready:function(){
-this.$http.get('url',{
+    el: 'body',
+    ready: function() {
+        this.$http.get('url', {

-}).then(function(json){
-console.log( typeof json.data )  //谷歌返回的是string，ios返回的是object
-},function(json){
+        }).then(function(json) {
+            console.log(typeof json.data) //谷歌返回的是string，ios返回的是object
+        }, function(json) {

-});
-}
+        });
+    }
 });
 ```

 以上代码，在谷歌返回的是string，ios浏览器返回的是object， 所以通过JSON.parse()格式化json.data的时候，在ios浏览器下就报错了 通过使用vue-resource提供的json()方法解决 具体代码如下

-```js
-
+``` js
 new Vue({
-el: 'body',
-ready:function(){
-this.$http.get('url',{
+    el: 'body',
+    ready: function() {
+        this.$http.get('url', {

-}).then(function(json){
-console.log( typeof json.json()) 
-},function(json){
+        }).then(function(json) {
+            console.log(typeof json.json())
+        }, function(json) {

+        });
+    }
 });
-}
-});
-```
+```
@@ -1,10 +1,12 @@
 ---
 title: 一个星期一早晨感慨
-tags: []
 id: '22'
 categories:
-  - - 生活
+ - 生活
+tags:
+ - 星期一
+ - 感慨
 date: 2016-05-30 09:59:06
 ---

-你看那天，看那墙，看那秋海棠，今天还是星期一。 ——加西亚马尔克斯《百年孤独》 为什么星期五离星期一这么近，星期一离星期五却这么远！这不科学！
+你看那天，看那墙，看那秋海棠，今天还是星期一。 ——加西亚马尔克斯《百年孤独》 为什么星期五离星期一这么近，星期一离星期五却这么远！这不科学！
@@ -1,10 +1,13 @@
 ---
 title: 人应该要学会生活
-tags: []
 id: '20'
 categories:
-  - - 生活
+ - 生活
+tags:
+ - 亦舒
+ - 此一时也彼一时也
+ - 生活
 date: 2016-05-26 23:27:30
 ---

-卖力，不卖命，卖艺，不卖身。 熬通宵这种玩意儿，最最摧残身体健康，有碍养生，过了青春期，万万不可行。 在这狗一般的生涯里，唯一的指望，就是太阳落山。 噫，又是一天，快快乐乐，躺下约会周公，几乎有种释放解脱涅槃的感觉。 ——亦舒《此一时也彼一时也》
+卖力，不卖命，卖艺，不卖身。 熬通宵这种玩意儿，最最摧残身体健康，有碍养生，过了青春期，万万不可行。 在这狗一般的生涯里，唯一的指望，就是太阳落山。 噫，又是一天，快快乐乐，躺下约会周公，几乎有种释放解脱涅槃的感觉。 ——亦舒《此一时也彼一时也》
@@ -1,11 +1,12 @@
 ---
 title: 你也可以成为鉴黄师，nsfwjs鉴黄库初探
-tags: []
 id: '361'
 categories:
-
-  + - 分享
-
+ - 分享
+tags:
+ - 鉴黄
+ - nsfwjs
+ - tensorflow
 date: 2020-06-20 12:11:46
 ---

@@ -22,6 +23,7 @@ date: 2020-06-20 12:11:46
 最终结果输出一个数组，每个分类都会输出一个概率，按概率从高到低排，所有分类的概率总和是1

 ``` 
+
 [
    {
        "className": "Sexy",
@@ -53,6 +55,7 @@ date: 2020-06-20 12:11:46
 NSFW JS是由TensorFlow.js作为对等依赖项提供支持。 所以我们要先安装TensorFlow.js。

 ``` 
+
 yarn add @tensorflow/tfjs
 yarn add nsfwjs
 // or
@@ -73,6 +76,7 @@ npm i nsfwjs
 ### 使用

 ``` 
+
 // 导入模块
 import * as nsfwjs from "nsfwjs";
 // 图片dom节点
@@ -1,9 +1,13 @@
 ---
 title: 使用acme.sh 申请 Let's Encrypt 泛域名SSL证书
-tags: []
 id: '333'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - SSL证书
+ - acme.sh
+ - Let's Encrypt
+ - 泛域名
 date: 2018-07-23 18:25:45
 ---

@@ -13,7 +17,8 @@ date: 2018-07-23 18:25:45

 ### 安装acme.sh

-```
+``` 
+
 curl https://get.acme.sh  sh
 ```

@@ -23,9 +28,10 @@ curl https://get.acme.sh  sh

 目前泛域名证书仅支持DNS验证，acme.sh通过DNS提供商的API自动完成操作，因此需要先设置DNS API，以阿里云为例。

-先前往阿里云后台获取App\_Key跟App\_Secret,在【用户信息管理】-【安全信息管理】创建SecretKey [传送门](https://ak-console.aliyun.com/#/accesskey)，然后执行以下脚本
+先前往阿里云后台获取App\_Key跟App\_Secret, 在【用户信息管理】-【安全信息管理】创建SecretKey [传送门](https://ak-console.aliyun.com/#/accesskey)，然后执行以下脚本
+
+``` 

-```
 # 替换成从阿里云后台获取的密钥
 export Ali_Key="LTA*********uV6"
 export Ali_Secret="QKmsZgo*************8Htr6"
@@ -35,21 +41,24 @@ export Ali_Secret="QKmsZgo*************8Htr6"

 ### 获取证书

-```
+``` 
+
 # 换成自己的域名
 acme.sh --issue --dns dns_ali -d dengtongyu.com -d *.dengtongyu.com
 ```

 如果acme.sh，提示命令没找到，那就请再执行以下指令：

-```
+``` 
+
 source ~/.bashrc
 acme.sh --issue --dns dns_ali -d dengtongyu.com -d *.dengtongyu.com
 ```

 或者先cd到acme.sh目录下，再执行文件

-```
+``` 
+
 cd ~/.acme.sh
 ./acme.sh --issue --dns dns_ali -d dengtongyu.com -d *.dengtongyu.com
 ```
@@ -66,9 +75,10 @@ cd ~/.acme.sh

 注意, 默认生成的证书都放在安装目录下: ~/.acme.sh/, 请不要直接使用此目录下的文件, 例如: 不要直接让 nginx/apache 的配置文件使用这下面的文件. 这里面的文件都是内部使用, 而且目录结构可能会变化.

-正确的使用方法是使用 --installcert 命令,并指定目标位置, 然后证书文件会被copy到相应的位置:
+正确的使用方法是使用 --installcert 命令, 并指定目标位置, 然后证书文件会被copy到相应的位置:
+
+``` 

-```
 acme.sh  --installcert  -d  dengtongyu.com   \
        --key-file   /etc/nginx/ssl/dengtongyu.key \
        --fullchain-file /etc/nginx/ssl/fullchain.cer \
@@ -81,7 +91,8 @@ acme.sh  --installcert  -d  dengtongyu.com   \

 Nginx 配置文件片断：

-```
+``` 
+
 server {
    server_name xxx.com;
    listen 443 http2 ssl;
@@ -99,4 +110,4 @@ server {

 Let's Encrypt 证书的有效期为三个月，acme.sh会每隔60天自动帮你续期，你无需任何操作

-最后，更详细等内容请看[官方说明](https://github.com/Neilpang/acme.sh/wiki/%E8%AF%B4%E6%98%8E)
+最后，更详细等内容请看[官方说明](https://github.com/Neilpang/acme.sh/wiki/%E8%AF%B4%E6%98%8E)
@@ -1,10 +1,12 @@
 ---
 title: 吾日三省吾身
-tags: []
 id: '61'
 categories:
-  - - 生活
+ - 生活
+tags:
+ - 人生
+ - 自省
 date: 2016-06-23 23:13:16
 ---

-当你的才华还撑不起你的野心时，那你就应该静下心来学习。 当你的能力还驾驭不了你的目标时，那你就应该沉下心来历练。 我绝对算不上好人，也决非坏到无药可救， 我把在这个时期自我调整的过程，称为人生， 我把自我调整过程中的感受，称为命运。
+当你的才华还撑不起你的野心时，那你就应该静下心来学习。 当你的能力还驾驭不了你的目标时，那你就应该沉下心来历练。 我绝对算不上好人，也决非坏到无药可救， 我把在这个时期自我调整的过程，称为人生， 我把自我调整过程中的感受，称为命运。
@@ -1,10 +1,12 @@
 ---
 title: 咸鱼需要冷藏
-tags: []
 id: '29'
 categories:
-  - - 生活
+ - 生活
+tags:
+ - 咸鱼
+ - 空调
 date: 2016-06-02 21:22:10
 ---

-6月，广州！ 白天大地在蒸腾，只需在太阳底下10秒，就能感受到阳光满满的恶意。 夜晚空气弥漫着热浪，连呼吸都能灼伤你五脏六腑。 这种闷热的环境，让我忘了自己几乎就是条咸鱼。 咸鱼就应该待在咸鱼该待的地方，于是我开了空调……
+6月，广州！ 白天大地在蒸腾，只需在太阳底下10秒，就能感受到阳光满满的恶意。 夜晚空气弥漫着热浪，连呼吸都能灼伤你五脏六腑。 这种闷热的环境，让我忘了自己几乎就是条咸鱼。 咸鱼就应该待在咸鱼该待的地方，于是我开了空调……
@@ -1,10 +1,12 @@
 ---
 title: 奇妙能力歌
-tags: []
 id: '8'
 categories:
-  - - 生活
+ - 生活
+tags:
+ - 音乐
+ - 奇妙能力歌
 date: 2016-05-24 22:59:20
 ---

-\[audio mp3="https://image.dengtongyu.com/blog/2016/05/奇妙能力歌.mp3"\]\[/audio\] 我想要更好更圆的月亮 想要未知的疯狂 想要声色的张扬 我想要你
+\[audio mp3="https://image.dengtongyu.com/blog/2016/05/奇妙能力歌.mp3"\]\[/audio\] 我想要更好更圆的月亮 想要未知的疯狂 想要声色的张扬 我想要你
@@ -1,10 +1,14 @@
 ---
 title: 如果有来生
-tags: []
 id: '24'
 categories:
-  - - 生活
+ - 生活
+tags:
+ - 蜡笔小新
+ - 被子
 date: 2016-06-01 09:31:05
 ---

-![小新](https://image.dengtongyu.com/blog/2016/05/u23298692062573679482fm21gp0.jpg) 如果有来生，我要当条被子，不是躺在床上就是在晒太阳！ ——野原新之助
+![小新](https://image.dengtongyu.com/blog/2016/05/u23298692062573679482fm21gp0.jpg)
+
+ 如果有来生，我要当条被子，不是躺在床上就是在晒太阳！ ——野原新之助
@@ -1,24 +1,26 @@
 ---
 title: 字符html创建DOM节点
-tags: []
 id: '76'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - JavaScript
+ - html
+ - 创建
+ - DOM节点
 date: 2016-08-25 09:58:05
 ---

 jQuery的创建节点的方式非常方便，$('<div></div>') 只要这样就可以创建一个div的节点。 我们也可以通过JavaScript简单实现一下这种方式。

-```js
-
+``` js
 function createDom(html) {
- var tempDom = document.createElement('div');
- tempDom.innerHTML = html;
- return tempDom.childNodes;
+    var tempDom = document.createElement('div');
+    tempDom.innerHTML = html;
+    return tempDom.childNodes;
 };
 var div = createDom('<div>新创建的div</div>')[0];
 document.getElementsByTagName('body').appendChild(div);
-
 ```

-不过值得注意的是，childNodes返回的是一个DOM节点的列表，记得处理一下
+不过值得注意的是，childNodes返回的是一个DOM节点的列表，记得处理一下
@@ -1,10 +1,12 @@
 ---
 title: 小悟
-tags: []
 id: '110'
 categories:
-  - - 生活
+ - 生活
+tags:
+ - 人生
+ - 生和死
 date: 2017-08-01 09:12:01
 ---

-人生除了生和死，其他都是小事。 世界上没有无缘无故的爱，也没有无缘无故的恨， 一切的偶然其实都是必然， 一切的必然看起来可以躲过，其实都避免不了， 把握好当下的每一次偶然， 你才有机会改变未来的每一次必然，珍惜眼前！
+人生除了生和死，其他都是小事。 世界上没有无缘无故的爱，也没有无缘无故的恨， 一切的偶然其实都是必然， 一切的必然看起来可以躲过，其实都避免不了， 把握好当下的每一次偶然， 你才有机会改变未来的每一次必然，珍惜眼前！
@@ -1,10 +1,9 @@
 ---
 title: 忙碌的工作日，潮流的朋友圈
-tags: []
 id: '14'
 categories:
-  - - 生活
+ - 生活
 date: 2016-05-25 23:17:50
 ---

-最近很忙，穷忙、瞎忙··· 朋友圈一如既往的热闹，今天是2016年5月25日，杨绛女士逝世。 朋友圈迎来了一场悼念杨绛女士的潮流。我相信那些人跟我一样不曾读过她的作品或者了解过她事迹，但不妨碍那些人加入这场悼念的盛会，纷纷在朋友圈表达了自己的悲痛和惋惜之情。 托朋友圈的福，我在今天终于认识了杨绛女士。惭愧，对于贡献如此之多的人，我现在才知道她。所以我辈有什么资格评价杨绛女士，多读点杨女士书吧。 至于朋友圈的蜡烛还是你们点吧，我继续生活的苟且···
+最近很忙，穷忙、瞎忙··· 朋友圈一如既往的热闹，今天是2016年5月25日，杨绛女士逝世。 朋友圈迎来了一场悼念杨绛女士的潮流。我相信那些人跟我一样不曾读过她的作品或者了解过她事迹，但不妨碍那些人加入这场悼念的盛会，纷纷在朋友圈表达了自己的悲痛和惋惜之情。 托朋友圈的福，我在今天终于认识了杨绛女士。惭愧，对于贡献如此之多的人，我现在才知道她。所以我辈有什么资格评价杨绛女士，多读点杨女士书吧。 至于朋友圈的蜡烛还是你们点吧，我继续生活的苟且···
@@ -1,10 +1,13 @@
 ---
 title: 我脑中的橡皮擦
-tags: []
 id: '34'
 categories:
-  - - 生活
+ - 生活
+tags:
+ - 橡皮擦
 date: 2016-06-12 21:52:59
 ---

-![无脸男](https://image.dengtongyu.com/blog/2016/06/20150121124317_k2JGJ.jpg) 最近感觉自己容易忘记一些东西，重要的、琐碎的、又或者无关紧要的。 它犹如一块橡皮擦，偷偷的抹掉你一个字，一个词，甚至一句话，而你却浑然不觉。 待你回顾这些篇章的时候，你才发现记忆的空白。 于是你努力回想，企图找回只字片语，但看到的只是一片模糊的掠影。
+![无脸男](https://image.dengtongyu.com/blog/2016/06/20150121124317_k2JGJ.jpg)
+
+ 最近感觉自己容易忘记一些东西，重要的、琐碎的、又或者无关紧要的。 它犹如一块橡皮擦，偷偷的抹掉你一个字，一个词，甚至一句话，而你却浑然不觉。 待你回顾这些篇章的时候，你才发现记忆的空白。 于是你努力回想，企图找回只字片语，但看到的只是一片模糊的掠影。
@@ -1,9 +1,11 @@
 ---
 title: 条件注释判断浏览器
-tags: []
 id: '38'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - 判断浏览器
+ - IE
 date: 2016-06-14 10:03:23
 ---

@@ -15,9 +17,9 @@ date: 2016-06-14 10:03:23

 !

-\[if !IE\]
+\[if ! IE\]

-_The NOT operator. This is placed immediately in front of the?feature,?operator, or?subexpression?to reverse the Boolean meaning of the expression._ **NOT运算符。这是摆立即在前面的_功能_，_操作员_，或_子表达式_扭转布尔表达式的意义。**
+_The NOT operator. This is placed immediately in front of the?feature, ?operator, or?subexpression?to reverse the Boolean meaning of the expression._ **NOT运算符。这是摆立即在前面的_功能_，_操作员_，或_子表达式_扭转布尔表达式的意义。**

 lt

@@ -61,9 +63,9 @@ _The OR operator. Returns true if any of the subexpressions evaluates to true._

   举个栗子

-```
+``` 

 <!-- [if IE 7]> 仅IE7可识别 <![endif]-->
 <!--[if lte IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
 <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
-```
+```
@@ -1,9 +1,12 @@
 ---
 title: 浅尝 HTML 5 input 新属性
-tags: []
 id: '276'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - HTML5
+ - input
+ - 属性
 date: 2018-02-07 18:16:11
 ---

@@ -13,7 +16,7 @@ date: 2018-02-07 18:16:11

 required属性规定必需在提交表单之前填写输入字段。

-```
+``` 

 <!-- 此输入框为必填-->
 <input type="text" required>
@@ -25,7 +28,7 @@ required属性规定必需在提交表单之前填写输入字段。

 属性引用 datalist 元素，其中包含 input 元素的预定义选项。

-```
+``` 

 <input list="city">
 <datalist id="city">
@@ -43,7 +46,7 @@ required属性规定必需在提交表单之前填写输入字段。

 属性规定 input 元素中允许的最大字符数。

-```
+``` 

 <!-- 只允许输入3个字符 -->
 <input type="text" name="usrname" maxlength="3">
@@ -53,7 +56,7 @@ required属性规定必需在提交表单之前填写输入字段。

 属性规定 input 元素的最大和最小值。

-```
+``` 

 <!-- 最大值为10 -->
 <input type="number" max="10" required>
@@ -67,7 +70,7 @@ required属性规定必需在提交表单之前填写输入字段。

 可接受多个值的文件上传字段

-```
+``` 

 <!-- 按住Ctrl，可选择上传多个文件 -->
 <input type="file" multiple required>
@@ -79,7 +82,7 @@ required属性规定必需在提交表单之前填写输入字段。

 pattern 属性规定用于验证 input 元素的值的正则表达式。

-```
+``` 

 <!-- 用pattern属性限制只能输入字母 -->
 <input type="text" pattern="^[a-zA-Z]+$" title="只能输入字母" required>
@@ -91,7 +94,7 @@ pattern 属性规定用于验证 input 元素的值的正则表达式。

 step 属性规定 input 元素的合法数字间隔。

-```
+``` 

 <!-- 只能输入能被5整除的数字 -->
 <input type="number" step="5" required>
@@ -103,7 +106,7 @@ step 属性规定 input 元素的合法数字间隔。

 input按钮用图片展示

-```
+``` 

 <!-- src的值可以是图片链接或者base64 -->
 <input type="image" src="data:image/png;base64">
@@ -113,7 +116,7 @@ input按钮用图片展示

 placeholder 属性规定可描述输入 input 字段预期值的简短的提示信息 。

-```
+``` 

 <!-- 带有 placeholder 文本的输入字段 -->
 <input type="text" placeholder="请输入你的文本">
@@ -141,7 +144,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示

 ### color 拾色器

-```
+``` 

 <!-- 拾色器 -->
 <input type="color">
@@ -149,7 +152,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示

 ### date 日期控件

-```
+``` 

 <!-- 日期控件 -->
 <input type="date">
@@ -157,7 +160,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示

 ### month 年月控件

-```
+``` 

 <!-- 定义 month 和 year 控件（不带时区） -->
 <input type="month">
@@ -165,7 +168,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示

 ### time 时间控件

-```
+``` 

 <!-- 定义用于输入时间的控件（不带时区） -->
 <input type="time">
@@ -173,7 +176,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示

 ### week 周控件

-```
+``` 

 <!-- 定义 week 和 year 控件（不带时区） -->
 <input type="week">
@@ -181,7 +184,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示

 ### datetime-local 带时间的日期控件

-```
+``` 

 <!-- date 和 time 控件（不带时区） -->
 <input type="datetime-local">
@@ -189,7 +192,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示

 ### email 定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）

-```
+``` 

 <!-- 输入的必须是邮箱格式 -->
 <input type="email" required>
@@ -199,7 +202,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示

 ### number 数字

-```
+``` 

 <!-- 输入的必须是数字 -->
 <input type="number">
@@ -207,7 +210,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示

 ### password 密码

-```
+``` 

 <!-- 输入密码控件 -->
 <input type="password">
@@ -215,7 +218,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示

 ### range 范围取值

-```
+``` 

 <!-- 选择1到10的范围 -->
 <input type="range" min="1" max="10">
@@ -223,7 +226,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示

 ### tel 电话

-```
+``` 

 <!-- 输入的值必须是电话号码 -->
 <input type="tel">
@@ -231,7 +234,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示

 ### url 链接

-```
+``` 

 <!-- 输入的值必须是链接 -->
 <input type="url" required>
@@ -239,4 +242,4 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示

 

-# [页面demo](https://demo.dengtongyu.com/pages/input/)
+# [页面demo](https://demo.dengtongyu.com/pages/input/)
@@ -1,9 +1,12 @@
 ---
 title: 演唱会随机选座解题思路
-tags: []
 id: '346'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - 随机选座
+ - 解题
+ - 思路
 date: 2018-12-16 14:07:46
 ---

@@ -17,7 +20,8 @@ date: 2018-12-16 14:07:46

 首先定义座位信息

-```
+``` 
+
 let item = {
   index: 0,       //下标（索引）
   group: 0,       //分组
@@ -30,7 +34,8 @@ let item = {

 把座位和排数用数组保存起来

-```
+``` 
+
 let front = 2;  //前排座位数
 let back = 10;  //后排座位数
 let .gap = 2;  //每行座位数差
@@ -61,7 +66,8 @@ for (let g = 0; g < this.group; g++) {

 把符合条件的座位排数筛选出来（即有足够连号的空位的排数）

-```
+``` 
+
 suitableRows(length) {//length为买票的张数
      let  haveSeatRows = [];
      this.rows.forEach((list) => {
@@ -86,7 +92,8 @@ suitableRows(length) {//length为买票的张数

 最后把从筛选出来的排数中选出座位

-```
+``` 
+
 let index =  Math.floor(Math.random() * haveSeats.length);
 let places = this.selectPlace(haveSeats[index], length);
   selectPlace(list, length) {
@@ -119,4 +126,4 @@ let places = this.selectPlace(haveSeats[index], length);

 总结起来，基本思路就是把符合条件的行数收集起来，再从所有行数中随机选出一行，顺序出票，从而在均衡分布与高利用率之间取一个平衡点。

-[demon实例，点击查看！](https://demo.dengtongyu.com/pages/20181112o4/)
+[demon实例，点击查看！](https://demo.dengtongyu.com/pages/20181112o4/)
@@ -1,39 +1,43 @@
 ---
 title: 用Node+express搭建本地https服务
-tags: []
 id: '90'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - Node
+ - express
+ - https
 date: 2017-01-24 15:21:05
 ---

-1.安装node环境（自行谷歌百度，不赘述） 2.安装express（自行谷歌百度，不赘述） 3.打开命令行，利用openssl生成证书文件
-
-```js
+1. 安装node环境（自行谷歌百度，不赘述） 2. 安装express（自行谷歌百度，不赘述） 3. 打开命令行，利用openssl生成证书文件

+``` js
 //生成私钥key文件
 openssl genrsa 1024 > /keys/private.pem

 //通过私钥文件生成CSR证书签名
-openssl req -new -key /keys/private.pem -out /keys/csr.pem
+openssl req - new - key / keys / private.pem - out / keys / csr.pem

 //通过私钥文件和CSR证书签名生成证书文件
-openssl x509 -req -days 365 -in /keys/csr.pem -signkey /keys/private.pem -out /keys/file.crt
+openssl x509 - req - days 365 - in /keys/csr.pem - signkey / keys / private.pem - out / keys / file.crt
 ```

-4.编写server文件
-
-```js
+4. 编写server文件

+``` js
 var app = require('express')();
 var fs = require('fs');
 var http = require('http');
 var https = require('https');

 //引入私钥、证书
-var privateKey  = fs.readFileSync('./keys/private.pem', 'utf8');
+var privateKey = fs.readFileSync('./keys/private.pem', 'utf8');
 var certificate = fs.readFileSync('./keys/file.crt', 'utf8');
-var credentials = {key: privateKey, cert: certificate};
+var credentials = {
+    key: privateKey,
+    cert: certificate
+};

 //创建服务，设置端口号
 var httpServer = http.createServer(app);
@@ -51,19 +55,16 @@ httpsServer.listen(SSLPORT, function() {

 //路由
 app.get('/', function(req, res) {
-    if(req.protocol === 'https') {
+    if (req.protocol === 'https') {
        res.status(200).send('这是一个经过加密的https请求！');
-    }
-    else {
+    } else {
        res.status(200).send('这是一个普通的http请求！');
    }
 });
-
 ```

-5.启动服务
-
-```js
+5. 启动服务

+``` js
 node server.js
-```
+```
@@ -1,10 +1,13 @@
 ---
 title: 第一条写些什么呢？
-tags: []
 id: '4'
 categories:
-  - - 生活
+ - 生活
+tags:
+ - 生活
 date: 2016-05-24 18:30:10
 ---

-![无脸男](https://image.dengtongyu.com/blog/2016/05/015986554b84ec000001bf7267e627.jpg) 以后的生活会更精彩吧···嗯嗯···
+![无脸男](https://image.dengtongyu.com/blog/2016/05/015986554b84ec000001bf7267e627.jpg)
+
+ 以后的生活会更精彩吧···嗯嗯···
@@ -1,9 +0,0 @@
---
-title: 首页
-tags: []
-id: '18'
-categories:
-  - - uncategorized
-comments: false
-date: 2016-05-26 16:57:35
---