wordpress 深度集成 markdown

wordpress 的编辑器没有 markdown 功能,曾今寻便所有的 plugin ,发现都不太理想,并且作为一个非插件控的我,即使找到了大而全的插件,也会想方设法来去插件化。于是今天早上拍了下脑门,决定自己集成 markdown。 集成后的功能如下:

  • 实时预览 即见即所得,甚至你可以作为一个专门的 markdown 编辑器来使用
  • 代码高亮 程序员最爱,需要在前台做代码高亮
  • 代码分离 markdown 的代码和 html 代码分离,互不影响,并且会将 markdown 代码保存下来,以便下次继续编辑。 先看下效果 markdown

原理

在 post 页面添加一个 textarea,监听 input 事件,事件中将文本框的内容取出,用 marked.js 进行转码,将转码后的 html 放在系统中的 tinyMCE 中。 在保存时将 textarea 中的文本存入 media data 中,下次可以继续编辑。 ## 开始集成

  1. 下载 marked.jsmakemarkdown.js

  2. marked.jsmakemarked.js 拷贝到 ~\wp-content\{你的主题目录}\js\ 目录下 > marked.js 是一套 js 库,用于将 markdown 代码转换成 html。makemarked.js 用于监听文本框事件,来实时调用 marked.js 来转换 markdown 代码。

  3. function.php中加入以下代码

    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
    <pre class="lang:php decode:true">// 增加 markdown 功能到后台编辑器
    add_action( 'admin_menu', 'create_markdown' );
    add_action( 'save_post', 'save_markdown', 10, 2 );

    function create_markdown() {
    add_meta_box( 'markdown_box', 'Markdown', 'markdown_html', 'post', 'normal', 'high' );
    }

    function markdown_html( $object, $box ) { ?>
    <textarea name="markdown" id="markdown" cols="60" oninput ="markdownEditorChanged()" rows="50" style="width: 100%; height:100%"><?php echo htmlspecialchars (get_post_meta( $object->ID, 'markdown', true )); ?></textarea>
    <?php }

    function save_markdown( $post_id, $post ) {
    if ( !current_user_can( 'edit_post', $post_id ) )
    return $post_id;

    $meta_value = get_post_meta( $post_id, 'markdown', true );
    $new_meta_value = $_POST['markdown'];

    if ( $new_meta_value && '' == $meta_value )
    add_post_meta( $post_id, 'markdown', $new_meta_value, true );

    elseif ( $new_meta_value != $meta_value )
    update_post_meta( $post_id, 'markdown', $new_meta_value );

    elseif ( '' == $new_meta_value && $meta_value )
    delete_post_meta( $post_id, 'markdown', $meta_value );
    }

    function markdown_script() {
    wp_enqueue_script('markdown', get_template_directory_uri() . '/js/marked.js' );
    wp_enqueue_script('makemarkdown', get_template_directory_uri() . '/js/makemarkdown.js');
    }

    add_action( 'admin_enqueue_scripts', 'markdown_script');</pre>

目前后台的工作已经 ok,代码高亮需要在前台设置,参见后续文章

解除 wordpress 上传文件大小限制的最新方法

环境

阿里云的虚拟主机

wordpress 4.4 在此环境上,上传文件的大小被限制在 6M 以下,

网上的方法基本上可分为三类
1. 修改 function.php

2. 修改 php.ini

3. 修改 .htaccess

插件方法

以上的方法不再适用,可能是 wordpress 版本比较新,最后找到一个名为 Upload Max File Size 的插件。 A1B9BC06-CAF9-4F29-A655-58B1D10BEA9C 数值单位为比特,需要自己转换单位。

去插件化

查看该插件源码发现,只要一行代码就可以解决问题 add_filter('upload_size_limit', 'ashu_increase_upload'); OK,将该行代码复制到当前主题下的 function.php 中,将 ashu_increase_upload 修改为 max_file_size,再新建 max_file_size 的方法,在该方法中返回新的大小值。

最后的代码如下。

1
2
3
4
5
6

function max_up_size() {
return 64*1024*1024; // 62 MB
}

add_filter('upload_size_limit', 'max_up_size');

使用 advanced installer 为 winform 做自动更新

advanced installer 是一款打包程序,基于 windows installer 并扩展了一些功能,比如安装统计,自动更新,授权验证等,本文将介绍你如果使用 advanced installer(以下简称 ai) 为 winform 做自动更新。

  1. 打开 ai,将你的项目文件拖到此处,再进行些基础的配置。直到能够生成基础的安装包。

  2. 开始配置更新,点击到 updater 选项卡,选中 ‘enable advanced installer updater’。

  3. 上一步配置好后,切换到项目文件选项页,发现列表中多了两个文件,一个是 updater.exe,一个是 updater.ini updater.exe 用于执行更新 updater.ini 是更新的配置文件

  4. 点击 build,生成安装包

  5. 接下来配置更新服务器,图样图森破。再开与一个 ai 实例,新建一个 updater config 的项目。

  6. 配置服务器相关内容。

  7. 配置完成后点击 build,仅仅会生成 updater.ini 。这个配置文件不同于第三步生成的配置文件,这是服务器需要的配置文件,需要分别清楚。

  8. 将 updater.ini 放到服务器上,在将第四步生成的安装包与 updater.ini 放在一起。

  9. 能成功到这一步的要恭喜,因为你马上就要成功了。

  10. 测试无更新。安装第四部生成的包,成功后,进入安装目录确认下 updater.exe 和 .ini 两个文件是否存在,点击 updater.exe 后应该会弹出 ai 的更新提示,此时因为两者版本一样,应该会提示没有更新的。

  11. 测试有更新。我们在回到第二步,将 version 改一下,在点击 build,记住,此时会弹出框让你选择是否更新 productcode,选择更改,因为咱们现在在做安装包形式的更新,需要更换 productcode,如果要做 patch 类型的更新,则不需要。

  12. 再打开 updater config 的项目,重新关联下上一步生成的安装包,此时版本会刷新,然后再手工修改下 target version,改到最新的版本,target version 是判断客户端是否更新的依据,如果客户端的版本不是 targer version,那么客户端就会更新。

《图话本》技术方案

《图话本》是什么?

图话本是一款好玩的网页轻手游,能够根据照片中人物的表情来显示语出惊人的台词。

点击在线玩 http://app.scaperow.com/facemotion/

自己玩了好多遍,都没有腻,随便放出来几张有意思的图片 o_1a5epn49ht781ik08p912aju4v

o_1a5epnoigtec1kem56ap478dq17

o_1a54m0oo81mpv1tsf1v1g1p913nvf

设计原则

  • 精简请求 减少不必要的资源请求,多个操作一次完成

    • 减轻前台 图像处理,逻辑全部在服务端实现,前台只显示结果

    • 快速入门 两个 step 即可开玩

    前台设计

  • zepto.js zepto为精简化的 jquery,大部分语法都相同,虽然没有 jquery 全面,在该应用上使用已经足够。

  • qiniu.js 七牛上传图片组件,使用该组件可直接将本地的图片上传至七牛后台,而不经过自己的后台。

  • underscore.js 工具库,简化数据处理的操作。

    后台设计

  • node+mysql+underscore 快速开发的选择,没有其他理由了

  • qiniu.js 七牛提供了 qiniu.js for node.js 组件,用于该组件来获取上传图片的 token ,供前台使用。

  • color+jimp 使用 jimp 来获取七牛服务器上图片的尺寸,用于计算水印文字的大小,使用 color 来获取图片的明暗色调,如果是亮色调,水印文字为黑色,如果是暗色调,水印文字为白色,动态生成。

  • request 简化 nodejs 的 http 请求的代码,使用 request 向微软的 face emotion sdk 获取图片的情绪值。

    流程图

企业总机组织架构

企业总机组织架构

业务流程

呼入:用户来电 -> 电信/移动/联通(硬件落地)-> 呼叫中心 -> 坐席 -> 终端

呼出:终端 -> 呼叫中心 -> 电信/移动/联通(硬件落地) -> 用户来电

概念

  • 硬件落地 呼出的出口,呼入的入口

  • 呼叫中心 为代码服务器,承载呼叫分流、转接、录音等全部的功能

  • 坐席 为非必要流程,因为可能外部呼入的电话直接到终端,在这里坐席只起到了转接的作用

  • 终端 可分为网络座机、手机端 APP、移动电话、电脑端客户端 ## 角色、模块

  • 用户后台 面向企业、客户,用于查询通话记录、查询录音、管理企业通讯录,IVR 设置等功能

  • 内部后台 面向公司内部用户,用于管理语音资源、IVR 管理、企业管理、用户管理、录音管理等功能

  • 呼叫中心 承载呼叫分流、转接、录音等全部的功能

  • 坐席客户端 面向坐席,用于转接、找人等功能

  • 电脑终端 面向所有角色,实现在电脑上通话功能

  • 手机 APP 面向所有角色,实现在手机上通话功能 ## 相关技术 斜体为技术难点 * sip 网络电话信令协议,用于发起、接受呼叫

  • sipsorcery 开源 sip 框架,需要基于此框架来向上开发

  • 网络座机 与一般座机类似,传统座机连接电话线,网络座机连接网线或无线网络,通过 sip 信令来实现通话, 通过 web 来配置账号,服务器地址等、配置好后便可以通话

  • 录音、混音、语音编解码 不同的终端所采用的语音编码不同,需要做到兼容

  • 硬件落地 需要从零开始了解如何与电信、联通、移动对接 ## 参与人员 * 开发 开发、处理问题

  • 售前/售后 销售业务、处理一般问题 * 坐席 转接、找人、7x24 小时工作

ionic 更新插件

介绍

本文只介绍如何为 ionic 项目做更新的功能,对于 ionic 很陌生的人可以先到官网上了解下。

对于 ionic 很了解的人也许知道,在ionic 1.1中包含的诸多新特性,包括 应用统计、推送集成、部署与更新、等。但是所有的功能都依赖于ionic的后端,国内的网络环境你懂得,可以说这些功能都不能用。本文将简单介绍,怎么改造属于自己的更新功能。 最终实现的效果是,通过前台的 js 来控制更新流程,通过原生代码来下载、应用更新,最重要的一点,不需要将更新包放在ionic后端,而是自己的服务器。

配置

ionic 的更新功能依赖于三者:

  1. 插件
    2.更新服务
    3.核心服务

三者已寄存在 git 上,建议将这三个仓库都 fork 到自己仓库中,以后好做维护。

插件地址:

https://github.com/driftyco/ionic-plugins-deploy 更新服务地址:

https://github.com/driftyco/ionic-service-deploy 核心服务地址:

https://github.com/driftyco/ionic-service-core

将 cli 定位到你的 ionic 工程下,使用以下命令来安装插件、更新服务、核心服务

ionic add ionic-service-core

ionic add ionic-service-deploy

ionic plugin add ionic-plugin-deploy

改造

由于要修改的地方较多,本文就不一一列举,我已将代码托管到 git 上,供读者参考,这里只说我改造逻辑。

  1. 打开 platforms 下的原生代码,找到向服务器发送更新请求的代码。

  2. 发现服务器的路径被硬编码,将路径指到一个变量上,并修改请求的路径结构。之前的路径太长了,不利于测试

  1. 修改 js 代码,扩展相应的方法,使其支持路径参数,并能够正常的传入到原生代码中。

  2. 更新端与服务器交互的数据如下

  • 检查更新的请求代码 update/check/{appid} > appid 是你的应用标示,可以在 www/app.js中指定。

  • 服务器返回数据结构

    1
    { 'compatible_binary': true, 'update_available': true, 'update: { 'uuid': "2.0.1" 'url': "/eoapp/www.zip" } } 

    compatible_binary 代表是否兼容

    update_available 是否有更新

    uuid 最新版本

    url 更新包的下载地址

    1. 准备一个更新包,将 ionic 项目下的 www 目录直接压缩,命名为 www.zip。这就是一个更新包。

    2. 搭建 nodejs 服务器环境,为检查更新的POST请求 update/check/:appid 定义路由器,请求参数,编写逻辑代码。上传更新包进行测试。

    为了方便读者参考,列出修改过的文件

platforms/ios/{你的ios项目名字}/Plugins/ionic-plugin-deploy/IonicDeploy.m
platforms/android/src/com/ionic/deploy/IonicDeploy.java
plugins/ionic-plugin-deploy/www/ionicdeploy.js
www/lib/ionic-service-deploy/ionic-deploy.js

代码地址

测试app
https://github.com/scaperow/ionic-deploy-starter

测试 server
https://github.com/scaperow/ionic-deploy-server

改造后的插件代码

https://github.com/scaperow/scaperow-plugins-deploy

改造后的更新服务代码 https://github.com/scaperow/scaperow-service-deploy

改造后的核心服务代码 https://github.com/scaperow/scaperow-service-core

android sdk manager 无法链接的解决方案

由于 gfw 的存在,使得国内开发人员苦不堪言,在此推荐一个映像服务器,可以解决大部分开源项目的下载问题,我的 android sdk 就是在这上面下载的,赞一个

http://mirrors.neusoft.edu.cn/

如果要下载 android sdk,可以进入到 android 类别中按需下载,也可以使用 android sdk manager 下载,方法如下

1. 启动 Android SDK Manager ,打开主界面,依次选择「Tools」「Options…」,弹出『Android SDK Manager - Settings』窗口;

2. 在『Android SDK Manager - Settings』窗口中,在「HTTP Proxy Server」「HTTP Proxy Port」输入框内填入mirrors.neusoft.edu.cn80,并且选中「Force https://… sources to be fetched using http://…」复选框。设置完成后单击「Close」按钮关闭『Android SDK Manager - Settings』窗口返回到主界面;

3. 依次选择「Packages」「Reload」

cnpm 是什么?可以加速 npm 吗?

cnpm 是用于企业建立私有的 npm 仓库的服务,同时与 npm 基本是实时同步的,目前的同步时间是10分钟一次。对于大企业或其他组织来说,非常有用。

-cnpm-npm-relation

同时,因为 cnpm 与 npm 的仓库是同步的,一些国内开发者也可以使用 cnpm 替换 npm 来加快包的安装。

安装 cnpm 及使用方法:

npm install cnpm -g

通过 npm 来安装 cnpm,如果因为网络问题无法安装的,可以使用下面的命令行 npm install -g cnpm --registry=http://registry.npm.taobao.org

解决安装 npm 包缓慢的方法

使用 –registry 参数即可,该参数将指示 NPM 包的下载路径,例如要安装 cordova,命令如下 npm install -g cordova --registry=http://registry.npm.taobao.org > 上命令将 cordova 的下载路径映射到了淘宝的 NPM 仓库中。这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次,以保证尽量与官方服务同步。 这只是一个基本的方法,使用起来也很麻烦,有没有更简单的方法?

请参考我的这篇文章 http://www.scaperow.com/115

如何将任意网页分享到朋友圈

对与有些人来说,有时候需要将网页直接分享到朋友圈,但是又不想为此做一个公众账号,怎么办? 我在此分享三个简单可靠的办法,可以将任何网页分享到朋友圈,甚至是不懂技术的人也可以操作。是的,任何网页,比如是你的主页、或者你的淘宝商品、你要营销的页面。。。随你发挥想象力,只要是网页都可以。

方法1 直接分享

在电脑上打开你要分享的网页,将地址想办法发送到手机微信上,或者直接在微信的对话框里键入地址。点开该链接,这时候微信内置的浏览器会打开这个页面,然后点击右上角菜单,选择分享到朋友圈。

S50828-163029

方法2 手动分享

在电脑上打开该页面 http://cli.im/ 这个网页的功能可以将网页地址生成二维码,将要分享的网页地址粘贴到此处,然后点击生成二维码。说到这里,大家都应该懂了吧。是的,将微信的扫一扫对准插件所生成的二维码,这时候微信就会打开该链接,剩下的操作同方法1,从右上角的菜单分享到朋友圈。

QQ截图20150828163319

方法3 自动分享

此方法最为简单,不过需要你使用 chrome 浏览器,同时你的网络能够访问谷歌应用商店,如果访问不了,请自行切换到文明上网模式。 打开浏览器上的 chrome 网上应用商店,搜索 the-qr-code-extension ,安装该插件。该插件的功能是将当前的网页地址自动生成一个二维码。记住,这个二维码和方法二生成出来的无异,所以接下来的操作完全参考方法2

8O0(MTMTR588