wp rest api 使用心得

偶看最近一直在使用AngularJS,通过RESTful API与后端交换数据。最近在制作Wordpress网站,也想试试RESTful API——WP REST API (WP API)插件(https://wordpress.org/plugins/json-rest-api/)。

WP REST API插件的使用还是非常简单的,在Wordpress后台下载安装好WP REST API插件后,启用插件,注意:要先开启Wordpress的固定链接才行。在网站地址添加/wp-json/即可访问。

WP REST API插件的文档地址 http://wp-api.org/,都是英文,其中基本的应用就是posts,用的比较多的就是filter功能。比如 /wp-json/posts?filter[s]=awesome,”s“代表参数包括:m、p、posts、w、cat、withcomments、withoutcomments、s、search、exact、sentence、calendar、page、paged、more、tb、pb、author、order、orderby、year、monthnum、day、hour、minute、second、name、category_name、tag、feed、author_name、static、pagename、page_id、error、comment、s_popup、attachment、attachment_id、subpost、subpost_id、preview、robots、taxonomy、term、cpage、post_type、posts_per_page。只要熟悉JSON数据的处理,就能够组合出任何想要的内容。

Angularjs ui-router使用心得

最新,团队们在使用Angularjs制作一个全新的网站。偶看负责制作的部分是网站管理后台的导航页面。

在路由方面,我们使用Angularjs ui-router,而没有使用Angularjs原生的ng-router,因为Angularjs ui-router功能更强大。

目前第一阶段使用了Angularjs ui-router的一些很基础的功能——state和sub state,例如:

.config(
  [          '$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('index', {
            url: '/',
            templateUrl: 'views/admin/index.html'
        })
            .state('index.welcome', {
                url: "/welcome",
                templateUrl: "views/admin/index/welcome.html",
                })

}]);

在views的html代码为

<div class="row wrap">
<div class="col-md-2 sidebar">
    <ul>
      <li><a ui-sref=".welcome">新手上路</a></li>
    </ul>
</div>
<div class="col-md-10 main">
    <div ui-view></div>
</div>
</div>

偶看是第一次使用Angularjs进行网站制作,还有很多需要学习的。

通过JS将整数拆分为多个整数之和

通过JavaScript将一个整数拆分为多个整数之和,如果是普通需求可以按照以下代码

		var num = 100; //定义整数
		var amount= 7;  //定义多个整数的数量
		var numArr = [];
		while(amount > 1){
		    var rnd = Math.floor(Math.random() * num); //通过JS的随机函数生成随机数
		    num -= rnd;
		    numArr.push(rnd);
		    amount --;
		}
		numArr.push(num);
		console.log(numArr);

可以生成随机数组,例如:[50, 16, 24, 2, 2, 0, 6] 、[66, 14, 4, 4, 8, 1, 3] 等。

通过修改num 和 amount 可以定义不同的整数和需要拆分的整数个数。

在Codecademy完成jQuery的学习

上个月,偶看完成《在Codecademy学习HTML+CSS》,最近在入门JavaScript和jQuery。今天,偶看终于在Codecademy把jQuery相关入门练习完成。包括:

Introducing jQuery, 14 练习

In this lesson, you’ll learn about the Document Object Model (DOM), how to manipulate HTML elements with jQuery, and create web page elements that change opacity when you hover over them.

2 jQuery Functions, 13 练习

Now that you know some jQuery basics, we’ll dive into some of the details relating to fundamental jQuery actions (called functions). We’ll even make a sliding panel for a website!

3 Dynamic HTML, 14 练习

In this course, we’ll cover how to create dynamic HTML (DHTML), including how to add and remove classes (and even entire elements!) to and from our site, ultimately creating an updatable list for our webpage.

4 jQuery Events, 12 练习

You already know a few jQuery events. In this lesson, we’ll learn additional events and use them to animate a video game character.

5 jQuery Effects, 14 练习

You already know several jQuery effects. In this lesson, we’ll learn additional effects (including jQuery UI effects) and use them to create an interactive menu for our website.

6 Code ‘n Tell

Use what you’ve learned to create your own custom web application!

jQuery_Codecademy

偶看下一步要完成的是JavaScript。

使用Emlog制作简单的文章发布系统

最近维护一个文章发布系统,使用的是 More & Original PHP Framwork,创建于2008年10月,运行于vertrigoserv 2.21(一个WAMP集成环境),这么多年来使用正常,但是最近由于需要迁移服务器,新服务器上安装vertrigoserv 2.21再配置网站会出现错误。由于这个框架年代久远,偶看没有打算检查框架来重新运行网站,偶看决定寻找一款文章发布系统来重新制作网站。

emlog

寻找的文章发布系统还是基于PHP,经过一番研究,偶看使用Emlog来制作。

Emlog最新版本是5.0.1,它可以配置用户角色来实现权限控制,这对于后期维护很有帮助。

参考原来的网站,基于Emlog默认模板,制作一个全新的Emlog模板,原来网站的模板是基于Table,现在制作的Emlog模板完全基于div+css,在IE6/7/8/9、谷歌和火狐等浏览器下测试正常,css文件总代码没有超过30行,使用的都是非常基本的css,没有产生浏览器兼容问题。

 

浏览器版本问题?

偶看在使用猎豹浏览器访问一个Joomla相关的网站时,发现网页的排版有点问题,部分链接无法点击,使用IE8、火狐Firefox 20.0.1和谷歌Chrome  26.0.1410.64 m,都处于正常状态。

偶看在浏览器地址栏中输入“chrome://”命令,查看猎豹浏览器的信息:

猎豹浏览器信息

猎豹安全浏览器 3.4.18.4292
Chromium 21.0.1180.92
WebKit 537.1

而谷歌浏览器最新版的内核信息是:

Google Chrome 26.0.1410.64 (正式版本 193017) m
WebKit 537.31 (@147513)

在360极速浏览器下,该网站同样存在问题,360极速浏览器的版本信息是:

360极速浏览器 7.0.0.810 (Branch of Chromium 24.0.1312.57)
WebKit 537.17
JavaScript V8 3.14.5.6

猎豹浏览器的版本内核和最新版的Chrome差距甚远,不知道什么时候会升级内核,浏览器版本不同对html5+css3的支持不太相同,导致网站的显示效果出现偏差。

在Codecademy学习HTML+CSS

Codecademy.com一个免费学习编程语言的网站,虽然界面的英文的,但是不妨碍使用。偶看花了三天时间学习了Web Fundamentals课程,一共12个单元,包括

  • HTML Basics — Introduction to HTML
  • Build Your Own Webpage — Introduction to HTML
  • HTML Basics II — HTML Structure: Using Lists
  • Social Networking Profile — HTML Structure: Using Lists
  • HTML Basics III — HTML Structure: Tables, Divs, and Spans
  • Clickable Photo Page — HTML Structure: Tables, Divs, and Spans
  • CSS: An Overview — Introduction to CSS
  • Design a Button for Your Website — Introduction to CSS
  • CSS Selectors — CSS Classes and IDs
  • Sorting Your Friends — CSS Classes and IDs
  • CSS Positioning — CSS Element Positioning
  • Build a Resume — CSS Element Positioning

codecademy-web-fundamentals

偶看在三天的学习中共获得21个勋章,160分。

勋章和分数

Codecademy中学习的知识应该算入门,让用户能够对一项编程语言有基本的了解,所见即所得的编程方式很给力,接下来偶看要学习Jquery。

Magento安装出现错误

偶看昨天在公司的电脑安装Magento商城程序,一切正常,公司使用的操作系统是Windows 7,php环境为Xampp1.8.1。

刚偶看在家中电脑安装Magento的时候,在第四步“Configuration”出现错误,提示:PHP extension “curl” must be loaded。通过搜索发现需要修改httpd.conf和php.ini,虽然不麻烦,但是偶看感觉非常奇怪,为什么会出现这样的情况呢,估计是偶看现在使用的Xampp版本的问题(因为偶看家中的电脑也是Windows 7操作系统),果断下载1.8.1版本,替换现在使用的1.7.7版。

magento错误信息

偶看将Xampp更新后,再次安装Magento,错误提示就自动消失了。

在在家中的电脑安装Magento明显感觉到速度比较慢,家中笔记本是联想的G450,有升级过一次内存,CPU是英特尔 Pentium(奔腾) 双核 T4300 @ 2.10GHz,内存为金士顿 DDR3 1333MHz 4GB。而公司的电脑是HP Compaq 8300 Elite MT,CPU为Intel 酷睿 i5 四核@3.2GHz,具体型号忘记了,内存是4GB DDR3 1600MHz X2条。这配置没得比啊!

以后还是要买台台式机,用起来比较流畅,这台用了快3年的笔记本真心快不行了。

Magento刚开始安装,还有很多需要摸索,偶看继续研究中。

偶看重新研究ASPCMS

偶看已经有很多年没有研究ASP类型的CMS,在大学的时候,偶看研究比较多的CMS是动易和创力。

偶看重新研究ASP类的CMS主要是用于企业建站,需要的功能并不复杂,经过多方了解,目前比较流行的ASP开源CMS当属ASPCMS。

aspcms

ASPCMS目前的最新版本是2.2.9,最近修改日期是2013年2月5日,对ASPCMS模板的研究,偶看成功模仿了一个网站的首页,内页的设计估计天才能完成。

其实偶看更想使用PHP来进行CMS的改进,只是现在还是先用ASP吧。

Dreamweaver CS6全站查找和替换源代码 视频

本视频基于版本Dreamweaver CS6 其他版本的Dreamweaver也是差不多的

一、打开Dreamweaver

二、点击菜单栏的“站点”–“新建站点”,输入站点名称,并指定本地站点文件夹(对于wordpress只需指定模版文件夹即可,其他文件均不需要修改)

三、导入站点

四、源代码的全站查找和替换。按Ctrl+F会弹出对话框,在查找范围选择:整个当前本地站点,搜索:源代码。

五、全站源代码替换完成后,需要进行本地测试,在所有有修改过的文件都必须点击一次进行测试,防止意外错误。

评论自动输入wordpress和zblog账号信息

偶看前几天在哼哼猪看到《你是否厌倦了WordPress 留言需要繁琐的输入账号信息?跟我来学自动输入吧!

这个方法偶看测试后,感觉非常好用,wordpress博客都能自动填入名字、邮箱和网址。偶看分析源代码发现,这个代码可以举一反三用于其他博客账号信息的自动输入。这里就给大家演示下zblog博客的添加过程。

一、获取wordpress评论自动输入账号信息的代码

javascript:(function(){document.getElementById('author').value='名字';document.getElementById('email').value='邮箱';document.getElementById('url').value='网址';})()

二、修改author(名字)、email(邮箱)、url(网址)这三个参数的名称,对应分别为inpName、inpEmail、inpHomePage。这是通过查看zblog博客的源代码获取的

三、生成适用于zblog留言自动输入账号信息的代码,请务必将“名字”、“邮箱”、“网址”修改成自己的信息。

javascript:(function(){document.getElementById('inpName').value='用户名';document.getElementById('inpEmail').value='邮箱';document.getElementById('inpHomePage').value='网址';})()

四、在浏览器中保存为书签,在使用时仅需点击书签即可自动填入。

因为是根据文本框的名字来输入信息的,有些独立博客所使用的程序既不是zblog,也不是wordpress,那么就需要手动输入个人信息。不过,偶看目前遇到的独立博客中十个有九个是它们俩的程序,所以做好wordpress和zblog留言自动输入账号信息的书签,基本上可以走遍大部分独立博客。

Dreamweaver8创建书签 锚点

用Dreamweaver8创建同一个页面内的书签就是锚点,在网上找了些都是说点击“插入”——“书签”,找了好久都没有找到这个选项,后来才研究出来,DW8中的翻译是“锚点”,是在“常用”工具栏中的。

步骤1  创建锚点/书签

1、为创建锚点,将光标移到需要加入锚点的地方,一般是将光标放置在一行或是一段文字的开头部分,例如选择同个页面的“PVC专用胶水 HR-260”字样。

2、单击插入栏【常规】类上的【命名锚点】按钮,

打开如左下图所示的对话框。

3、在【命名锚点】文本框输入锚点的名称“HR260”。

4、单击【确定】按钮则在光标处出现一个代表锚点的图标,如下图图所示。

步骤2  链接锚点/书签

1、选择最上行的“PVC专用胶水 HR-260”字样。

2、在“属性”中的“链接”框中填上“#HR260”

3、保存文件后按F12键预览,单击“PVC专用胶水 HR-260”,页面上立即显示将跳至目标。

提示:在链接锚点/书签时,应注意以下事项:

1、在#和锚点名之间不要留有空格,否则链接会失败。

2、在不同文件夹中为锚点创建链接时,其文件名后缀必定是“.htm”,而不能写成“.html”,否则链接也会失败。

3、符号 # 必须是半角符号,而不能为全角符号。

这样锚点/书签就做好了,当页面比较大的时候,直接点击标题即可到达锚点所在的位置,非常方便。