wordpress 全站静态化输出HTML文档

wordpress 全站静态化输出HTML文档

最近使用WP重新制作了公司官网,只有几个比较少的页面,实在是不想整的太臃肿,所以想着能不能直接把WORDPRESS 输出成静态页面呢.

Wordpress 纯 HTML
需要 PHP支持 不需要
需要数据库 MySQL 不需要
耗费资源多 耗费资源少
更新方便 更新不方便

安装wp插件

  1. 搜索并安装simply static
  2. 打开simply static设置: 在输出设置中 选择离线保存.
  3. 在额外目录中 添加额外的 CSS 或者 需要额外输出的文件夹地址.
  4. 点击 生成

HTML 调试

当然simply static并不能一劳永逸,有些地方还是不尽人意的,需要手动调整.打开浏览器的调试器,看看到底哪些地方报错,然后逐一调试.

  1. 比较常见的就是文件缺失.这个在simply static插件中添加目录地址即可.
  2. wprdpress自带的emoji脚本出错,这个直接注释掉HTML文档中的 JS脚本即可.
  3. 多余的外部链接 比如 Feed,wp-embed等等,这些都可以手动删除.

部署

HTML作为静态网页,而且还是相对目录生成的,所以可以在任何地方使用.比如OSS,比如FTP服务器上.

不足

由于官网并不是经常需要调整,所以更新这个还好说.
图片和JS脚本跟HTML文件深度耦合,不方便做CDN.目前还没有特别好的办法.也许可以研究一下Webpack打包,然后分离出来图片和JS,单独链接起来.

electron 项目打包

electron 项目打包

怎么将我们开发好的应用打包成.app.exe的执行文件,这就涉及到了重要的打包环节, 这里使用electron-quick-start项目进行打包

目前,主流的打包工具有两个electron-packagerelectron-builder

Mac打包window安装包需下载wine

brew install wine

如果有丢失组件,按照报错信息进行下载即可

electron-packager

electron-packager把你的electron打包成可运行文件(.app, .exe, etc)

执行npm i electron-packager -D进行安装

electron-packager . 快速打包

打包详解

1
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --out=out --icon=assets/app.ico --asar --overwrite --ignore=.git
  • sourcedir 项目入口 根据package.json的目录
  • appname 包名
  • platform 构建平台 包含 darwin, linux, mas, win32 all
  • arch 构建架构 包含ia32,x64,armv7l,arm64
  • out 打包后的地址
  • icon 打包图标
  • asar 是否生成app.asar, 不然就是自己的源码
  • overwrite 覆盖上次打包
  • ignore 不进行打包的文件

第一次打包需要下载二进制的包耗时会久一些,以后走缓存就快的多了。

命令比较长,每次要是都用这个命令来打包会很烦,可以使用第二种方法;

2、首先在项目根目录下面的 package.json 里添加代码,

1
2
3
"start": "electron .",
"packager": "electron-packager ./ SleeponWeb --mac --out ./OutApp --version-app 1.0.0 --overwrite --icon=./assets/app.icns"
},

PS:这里要注意,字段里的 项目名字,version,icon路径要改成自己的;
PS:注意,图标文件需要为 icns 格式的.

打包后目录为

其中electron-quick-start可以直接打开运行

缓存地址

  • Mac ~/Library/Caches/electron/
  • Windows $LOCALAPPDATA/electron/Cache or ~/AppData/Local/electron/Cache/
  • Linux $XDG_CACHE_HOME or ~/.cache/electron/

electron-builder

electron-builder是一个完整的解决方案,对于macos、windows、linux下的electron app,它可以提供打包及构建的相关功能。同时,它还提供开箱即用的“自动更新”功能支持

npm i electron-builder -D 下载

electron-builder打包

出现如下


同样是第一次打包时间会比较长,别着急,静候佳音。

会默认打包在dist目录,包含如下

mac文件里有运行时文件,默认使用asar方式进行打包

electron-builder --dir 只会生成包文件,对测试有用


本教程引用原文

Java Script 学习笔记

有关作用域

在JS的全局中,所有声明的变量都是 window的对象属性。

例如:

1
2
3
4
var a = 100;//声明变量a等于100
//这时候 a 会增加到 window 的属性中,所以:

window.a === a //true

在函数体中的变量,如果没声明,则依然会把变量赋予全局(window)例如:

1
2
3
4
5
6
7
function test() {
var r = y = 200;//只声明了变量r,没有声明变量y
};
test();
//这时候 如果
window.r ;//会报错找不到,而
window.y; //则不会报错。因为在函数体里面,y没有被声明,所以这个y直接被赋值给了全局对象 window

在全局范围内:
var nc = 100然后写一个方法

1
2
3
4
5
function tv (){
var nc = 456789
console.log(nc)
};
tv();

这时候输出的是 456789,因为函数体内部有nc变量,如果函数体内部没有,则输出全局对象 window中的nc属性.

另外,如果上面这段函数体中,没有进行函数声明 var (声明),就直接复制,那么运行函数后,则nc函数也被赋值给了全局对象,覆盖原来的nc值.

预编译的逻辑

预编译,是指在函数执行的前一刻

  1. 创建AO对象(Activation Object 作用域–执行期上下文)
  2. 先找形参和变量声明,将变量声明和形参作为AO对象的属性命名,值为 undefined
  3. 将实参和形参统一。
  4. 在函数体里面找函数声明,把赋予函数体赋予函数名。

实例:

1
2
3
4
5
6
7
8
9
10
11
12
function cc (){
console.log(a);
var a = 123;
console.log(a);
function a () {}; // 这个是函数声明,带有函数名的,是函数声明
console.log(a);
var b = function (){}; // 这是函数表达式,不能在预编译时被提升
console.log(b);
function d (){};
}

cc (1);
  1. 预编译开始,创建了一个OA{}对象.

    1
    2
    3
    AO {

    }
  2. 先找形参和变量声明,将变量声明和形参作为属性名.

    1
    2
    3
    4
    AO {
    a : undefined;
    b : undefined;
    }
  3. 将实参和形参统一.

1
2
3
4
5
//把 cc(1) 传入的 1 赋值给变量a.
AO {
a : 1;
b : undefined;
}
  1. 找到函数名,把函数体赋值给函数名
1
2
3
4
5
AO {
a : function a () {};
b : undefined;
d : function d (){};
}
  1. 这时候函数的AO对象创建完成,开始执行函数体了
1
2
3
4
5
6
7
8
9
10
11
// 执行函数体时,是按照顺序执行.
function cc (){
console.log(a); // 当第一次打印 a的时候,这时候,会在AO对象里面找函数名 a.而这时候函数名 a的值是: function a () {} 一个函数体.
var a = 123; // 执行到这里时,123又赋值给了 AO对象中的 a
console.log(a);//所以这时候这个 a 等于 123了.
function a () {}; // 这句在创建 AO对象时已经读取过了.所以略过.
console.log(a); // 所以这里打印的 a 依然还是 123
var b = function (){}; // 这时候 把一段函数体 赋值给了 b.
console.log(b); // 所以这时候打印的b 是函数体
function d (){}; //最后这条已在创建AO对象时候赋值过了,所以略过
}

所以最后打印的输出为:

1
2
3
4
ƒ a () {}
123
123
ƒ (){}

全局预编译的过程

跟函数体的预编译过程一样,全局预编译会生成一个GO对象.
同样的 执行上面 函数体 预编译的过程步骤,不过GO不会有实参了.所以省略了一步.

JS的对象

对象的创建方法:

  1. 对象字面量的方法,就是直接使用 var 变量名 = {}这样就可以.
  2. 还有两种,构造函数创建方法和自定义的方法.
1
2
3
4
5
6
var obj = new Object();//系统自带的构造函数
obj.name = 'abc'; //这样可以给对象添加属性了.(最好使用单引号,因为PHP默认是单引号,写双引号就需要转义了)

//另外一种自定义构造方法是
function presson (){};
var presson1 = new presson();//使用关键字new可以构造出presson1这个对象.

由于在js中构造函数跟正常的函数没有任何区别,所以为了区别对象和函数名,在使用构造函数的时候,构造函数名应该使用 大驼峰式命名规则. PressonKion

1
2
3
4
5
6
7
8
9
//构造工厂的方法.
function Car (){
this.name = 'BMW',
this.height = '1400',
this.lang = '4900',
this.weight = 1000
};

var car1 = new Car();//这样就构造出了一个 car 的对象.

如果需要在函数构造的时候自定义对象的属性值,怎么办?
直接传参尽量就行了.比如:

1
2
3
4
5
function Car (name,color){
this.name : name,
this.color : color
};
var car1 = new Car ('bmw','red') //传参给构造工厂,这样构造出来的car1对象的 name属性就是 bmw,而 color 属性就是 red 了.

构造函数的基本原理:

  1. 必须要在构造的时候加上关键字 new ,
  2. 当使用构造函数的时候会在函数内AO 对象先生成一个隐式加上一个 this{}的空对象.
  3. 当对象构造完成后,会隐式的进行一个返回对象的操作 return this.

JQ中的 AJAX请求

JQ中的 AJAX请求

$.ajax({
type: “post”,
url: ‘http://xxx.sss‘,
async: false, // 使用同步方式
// 1 需要使用JSON.stringify 否则格式为 a=2&b=3&now=14…
// 2 需要强制类型转换,否则格式为 {“a”:”2”,”b”:”3”}
data: JSON.stringify({
“post”:{
“loginname”: $(‘input[name=”uid”]’).val(),
“password”: $(‘input[name=”pass”]’).val(),
“fb_openid”: “”,
“username”: “”,
“age”: “”,
“headimgurl”: “”,
“sex”: “”
}
// a: parseInt($(‘input[name=”a”]’).val()),
// b: parseInt($(‘input[name=”b”]’).val()),
// now: new Date().getTime() // 注意不要在此行增加逗号
}),
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function(data){
console.log(“请求完成”,data)
}

JS中的时间格式化方法

JS中的时间格式化方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//本方法是得到了时间戳后把时间戳转换成可读时间的方法
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};
1
2
3
4
调用: 

var time1 = new Date().Format("yyyy-MM-dd");
var time2 = new Date().Format("yyyy-MM-dd HH:mm:ss");

通过JS来查询系统

通过JS来查询系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
var u = navigator.userAgent,
app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// alert('是否是Android:'+isAndroid);
// alert('是否是iOS:'+isiOS);
if(isAndroid){
document.getElementById('email').href = "javascript:android_email()";
alert("这是安卓系统");
} else if (isiOS) {
document.getElementById('email').href = "mailto:service@sleepon.us?subject=Hello &body=Hello Sleep"
alert("这是ios系统");
} else {
document.getElementById('email').href = "mailto:service@sleepon.us?subject=Hello &body=Hello Sleep"
alert("这是Win系统")
};

function android_email(){
//window.location.href="protocol://h5?event=android_email"
alert('安卓触发成功')
};
</script>

html的 a 标签点击触发js函数的3种方法

html的 a 标签点击触发js函数的3种方法

方法1<a href="" onclick="fun()">我是a标签</a>
方法2<a href="javascript:fun()">我是a标签</a>
方法3<a id='fun' >我是a标签</a>然后用js的都没选择器选择这个ID.
document.getElementById('fun').click(function(){ fun(); });

如果你想要用JS来实现点击a标签的跳转效果。

那么你不能直接对a标签执行click()函数

因为实际上,只有点击a标签中的文字,才能触发跳转。

知道了这一点,我们只需对a标签中的文字执行click函数就可以达到目的

1
2
3
<a id="tagA" href="http://www.hello.com"><span>hello</span></a>
……
$("#tagA span").click();//这样就可以达到跳转到的效果,仅仅$("#tagA").click();是不会跳转

NodeJs 学习笔记01

PM也需要学Nodejs么?

作为一名合格的PM,除了基本的需求管理,对于产品的开发的技术点也是非常重要的.至少知道产品开发的工作原理,什么是框架,什么是前后端分离,什么是数据库范式等等.
所以作为一名半路出家的PM,学习好后端的原理就意义非凡了.

Nodejs 是干什么的?

一句话概括就是:从基于Chrome V8引擎下的javascript运行环境,它从浏览器的环境中剖离开来,进入到后端开发的领域.

安装node

可以在官网安装

验证node安装效果:
node -v
验证npm安装:
npm -v

如果能成功打印出版本号,则表示安装成功.

vue+express 环境搭建

vue+express 环境搭建

该项目是在学习vue过程中,秉着前后端分离的态度,尝试着自己搭建vue+express环境

搭建vue项目
安装vue-cli脚手架
npm install -g vue-cli
1
创建基于webpack模版的项目
vue init webpack firstapp
1
安装包依赖并运行

firstapp
1
2
npm install
npm run dev

在浏览器上输入localhost:8080,这就是一个完整的基于vue-cli脚手架的项目。

那么怎么样集成进express呢?我们接着往下看。

集成express
修改文件结构

将src文件夹修改为client
将webpack.base.conf.js内的src地址修改为client
根目录下新建一个文件夹,命名为server

server目录下新建一个文件,命名为app.js

安装express

npm install express --save

server目录下新建一个文件夹,命名为routes

app.js中启动服务器,代码如下:

express
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
var fs = require('fs');
var path = require('path');
var bodyParser = require('body-parser');

var app = express();

// 注册users接口
var users = require('./routes/users');
app.use('/users', users);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));

// 访问静态资源
app.use(express.static(path.resolve(__dirname, '../dist')));

// 访问单页
app.get('*', function (req, res) {
var html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8');
res.send(html);
});

// 监听
app.listen(8081, function () {
console.log('success listen...8081');
});

打包
npm run build
node server/app.js

搭建过程参考文章:https://julytian.github.io/2017/04/06/vue%E4%B8%8Enode%E7%BB%93%E5%90%88%E5%BC%80%E5%8F%91%E9%83%A8%E7%BD%B2/

示例代码已经推到github上,地址:https://github.com/minteliuwm/FirstApp

© 2018 Ken的博客 All Rights Reserved. 本站访客数人次 本站总访问量