分类目录归档:计算机与编程

翻相册(fanxiangce.com)

搭积木

本来说要好好学习一下前端技术,可没过几天,又开始了堆积木式的创造:把各种JS库,CSS库搭配起来,最终用Python做胶水实现了一个网页相册生成器。顺便用Bootstrap的模板做了一个介绍页:翻相册(fanxiangce.com)

 

翻相册

故事还要从我上次做幻灯片讲起。用impress.js做了幻灯片不久,就想着用Python搭配impress.js做一个幻灯片生成器,最终实现的效果是:可以从一个文本文档里读取文本,每一行创建一张幻灯片,坐标可以固定(通过在每一行的结尾传入坐标参数),也可以随机(没解决遮盖问题)。做着做着,发现这并不实用。估计没人愿意用这种死板无聊的幻灯片。没过几天,又想用impress.js搭配csshke做一个记单词的网页程序,几天后因为能力不够被暂时搁置了。

接着,又有了新的想法,在原来的幻灯片生成器的基础上改了改,做成了一个照片墙生成器。原理很简单。就是通过获取图片的数量和文件名,生成足量的坐标,然后用Python生成相应的div,最后连接头尾组成一个完整的HTML文件。做成这样一个照片墙:

图片墙示例

点击任一张图片可以拉近,点击相邻图片可以移动位置。

又过了几天,照片墙实现了tooltip功能,可以自动把文件名(没有格式后缀)设为tooltip内容。我想到的一个理想的应用场景是:集体制作照片墙,每个人上传自己的照片给某个人,以自己的名字作为文件名,收集照片的人只需要上传照片,设置标题,然后点击生成。打开后每张照片在鼠标掠过时都会用tooltip显示姓名。像这样:

tooltip

tooltip的颜色可以自定义。

故事还没完。又过了几天,我买了fanxiangce.com,做了一个粗糙的介绍页。发现功能还太单调,和其他的在线相册相比没有什么吸引力。又实现了立体相册,像这样:

3d

点击任意一张照片可以拉近

随机散落(仍然没有解决遮盖问题),像这样:

随机散落的照片,点击任一张可以拉近

随机散落的照片,点击任一张可以拉近

标签云(使用svg3dtagcloud.js):

基于文本的标签云

基于文本的标签云

点击标签就会打开相应的图片:

使用remodal.js实现的弹窗

使用remodal.js实现的弹窗

现在只是一个简单的demo,未来还会实现很多功能,比如把标签换成图片缩略图。可以参见TagCanvas

 

总结

上面的相册都有相应的demo,欢迎到翻相册上体验。也欢迎申请试用。虽然已经花了很多时间在上面,但是要做的事情还有很多。比如实现模拟翻页的相册,让图片更美观的排列,不是单一的对齐。等我暑假学习一下Flask和JS,把网站做出来,顺便把电脑端程序和在线程序做出来,就可以开放注册和在线自动生成相册了。

 

WordPress美化方案:插入代码

准备工作

1、安装“Easy Code Placement”插件。

安装好这个插件并启用后,你可以在任何位置插入代码(HTML、CSS、PHP、JavaScript),比如在侧边栏自定义文本区域或是文章里,或是在插件的自定义文本中。

注:在文章中插入代码时需要切换到”文本“模式下加入,而不是“可视化模式”。

2、使用外部JS或CSS库。

在这里我建议使用官方推荐的方法加载,也就是通过wp_register_script()函数注册,然后使用wp_enqueue_script()函数调用。这样的好处是只在需要调用的地方调用,不会影响性能。

文件放置位置:wp-content——themes——twentytwlve(你正在使用的主题)。

注册

注册JS文件需要在functions.php中加入下面这行(在末尾的?>之前):

wp_register_script('bootstrap', get_template_directory_uri() . '/bootstrap/bootstrap.js', 'jquery', '3.0.1', true);

六个参数含义:

  1. 注册的名称:和引用时名称相同。
  2. 文件位置:使用 get_template_directory_uri()函数可以获取当前主题的根目录,后面加上文件具体位置。
  3. 需要预加载的外部库。
  4. 版本号。
  5. 是否在文件结尾(</body>之前)调用。

而注册CSS文件类似(以引入csshake为例):

wp_register_style('csshake', get_template_directory_uri() . '/css/csshake.css', "", "");

调用

调用的时候,在你想要调用的位置插入。
JS文件:

wp_enqueue_script('bootstrap');

CSS文件:

wp_enqueue_style('csshake');

注:

  1. 注册外部文件时,如果使用get_template_directory_uri()函数,记得后面的地址第一个字符应该是斜线。
  2. 调用时可能需要加上php标签,比如:<?php wp_enqueue_style(‘csshake’); ?>
  3. CSShake是一个让元素产生摇晃效果的CSS库,具体见我之前写的介绍《CSShake——元素摇晃特效》

这个系列的另外两篇:
WordPress美化方案系列:插件篇
WordPress美化方案系列:修改主题文件

 

一、文章内跳转(锚跳转)

HTML用<a href=”url”>文字或其他元素</a>来创建链接。

常用属性:

  • href:链接的目标地址
  • target:定义打开目标连接的位置,可选的方式有
    • _self:(默认值):在本窗口打开。
    • _blank:在新窗口打开。
  • name:规定锚(anchor)的名称,通过name属性可以创建页面内的书签,通过在其他位置创建链接指向这个锚(href=“#name”指向这个name的名称),可以实现页内跳转。(name可以用id属性来代替。)
  • title:定义当光标停留在链接文字上会显示的内容。

除了用name属性创建页内书签,指定其他元素的id也可以实现跳转。比如下面这行跳转页尾的总结(id为”end“)。

<a href="#end">跳转到总结</a>

所以,在比较长的文章的开头,就可以加入一个章节目录(参考百科词条的章节跳转),比如这样:

代码:

<ul>
<li><a href="#">页首</a>    
<li><a href="#ready">准备工作</a>
<li><a href="#site">站点统计数据</a>
<li><a href="#end">总结</a>
</ul>

然后分别给这几个标题,添加锚。切换到文本编辑模式,以第一小节准备工作为例:

<h2><a name="ready">准备工作</a></h2>

注:

  1. 当一个链接没找到锚名称或是不写锚名称(href=”#”),可跳转到页首。比如我页脚的“返回顶部”按钮就是这样做的。
  2. 为了避免服务器产生两次HTTP请求,始终将正斜杠添加到子文件夹。用http://greyli.com/demo/,而不是http://greyli.com/demo。

 

二、弹出层

弹出层是指在当前页面内弹出一个小窗口,参考页尾的版权声明,或是点击图片的效果。我这次用引用外部文件的方法来实现这个功能。使用的JS库是Remodal,效果见页尾的版权声明。步骤如下:

  1. 下载文件,放到主题根目录下。
  2. 在functions.php注册JS和CSS文件。
  3. 在footer.php里调用这些文件。
  4. 在footer.php里按照Remodal的文档写HTML,保存。

 

三、站点统计数据

有时需要显示站点数据,比如文章评论的数量等,这时可以通过相应的PHP代码实现。下面是相关数据对应的PHP代码,把代码放到你要显示的位置即可:

//日志总数:
<?php $count_posts = wp_count_posts(); echo $published_post
s = $count_posts->publish;?>

//评论总数:
<?php echo $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments");?>

//建站时间:
<?php echo floor((time()-strtotime("2013-6-25"))/86400); ?>

//标签总数:
<?php echo $count_tags = wp_count_terms('post_tag'); ?>

//链接总数:
<?php $link = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->li
nks WHERE link_visible = 'Y'"); echo $link; ?>

//最后更新:
<?php $last = $wpdb->get_results("SELECT MAX(post_modifie
d) AS MAX_m FROM $wpdb->posts WHERE (post_type = 'post' OR p
ost_type = 'page') AND (post_status = 'publish' OR post_st
atus = 'private')");$last = date('Y-n-j', strtotime($las
t[0]->MAX_m));echo $last; ?>

//运行天数:
<?php echo floor((time()-strtotime(get_optio
n('swt_buildda
te')))/86400); ?> 天

//建站日期:
<?php echo get_option('swt_builddate'); ?>

 

总结

通过插入代码,你可以自由的扩展WordPress的功能。WordPress美化系列就先说到这,有机会再总结一下SEO和速度优化。这三篇文章算是对我这段时间折腾WordPress的总结。但现在,我得去深入学习一下HTML、CSS和JavaScript了。

WordPress美化方案:修改主题文件

 

基础知识

通过修改主题文件来实现一些外观和功能效果,这样避免了使用大量插件,不会影响加载速度,也没有兼容性的问题。

这个系列的另外两篇:
WordPress美化方案系列:插件篇
WordPress美化方案系列:插入代码

主题文件编辑入口:仪表盘——外观——编辑
主题文件的构成

主题文件主要构成

主题文件主要构成(点击查看大图)

下面一些应用示例。

 

一、修改页脚的文字

编辑主题文件:footer.php
找到相关的文字(一般是“自豪地采用WordPress”或是”Proudly by WordPress“),可以删除或修改。然后点击更新文件。

 

二、在每一页加入版权声明

编辑主题文件:single.php
在图中位置插入代码,会在文章下方生成一个文本,效果见第二张图。

版权声明代码

版权声明代码(single.php)

版权声明效果图

版权声明效果图

 

三、文章字数统计

编辑主题文件:functions.php,single.php
在functions.php末尾插入下面这段代码(一个统计文章字数的函数):

//字数统计
function count_words ($text) {
global $post;
if ( '' == $text ) {
 $text = $post->post_content;
 if (mb_strlen($output, 'UTF-8') < mb_strlen($text, 'UTF-8')) $output .= '文章字数:' . mb_strlen(preg_replace('/\s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8') . '字';
 return $output;
}
}

然后在single.php需要显示字数的地方插入:

<?php echo count_words ($text); ?>

 

四、个性化评论框

编辑主题文件:comments.php
这里可以实现的功能主要有:

  1. 自定义评论区的各个字段
  2. 增加或删除输入框,修改字段,增加提示字符
  3. 更改样式

首先在comments.php里加入一个评论框函数(comment_form()):

<?php comment_form($args); ?>

$args是你想要修改的字段或输入框,用来覆盖原有的内容。

比如你想修改评论框的标题(一般为“留下评论”)。通过增加下面这段代码即可实现:

<?php $args = array('title_reply'=>'说说你的想法吧!')?>
<?php comment_form($args); ?>

其中‘title_reply’是代表评论框标题的参数,后面是你要设置的内容。
类似的,可以在数组(array)加入更多参数,比如评论框上面的文字(’comment_notes_before)、评论框下面的文字(’comment_notes_after’)。更多的参数见官方文档

评论输入框通过传入$fields参数实现,但直接放到$args里更方便些:

<?php $args = array(
'fields' => array(
 'author' => '<p class="comment-form-author"><label for="author">昵称</label><input type="text" placeholder="姓名或昵称" aria-required="true" size="30" value="' . esc_attr( $commenter['comment_author'] ) . '" name="author" id="author"><span class="required">*</span></p>',
 'email' => '<p class="comment-form-email"><label for="email">邮箱</label><input type="text" placeholder="不想填的话可以用null@null.com" aria-required="true" size="30" value="' . esc_attr( $commenter['comment_author_email'] ) . '" name="email" id="email"><span class="required">*</span></p>',
 'url' => '<p class="comment-form-url"><label for="url">站点</label><input type="text" placeholder="个人主页网址,可留空" size="30" value="'.$comment_author_url.'" name="url" id="url"></p>' 
)?>

下面是我博客上的评论框代码(效果见下方评论区):

<?php $args = array(
  'title_reply'       => __( '说说你的想法吧!' ),

  'comment_notes_before' => '<p>邮箱不会被公开,必填项已用<span class="required">*</span>标出。',

  'fields' => array(
 'author' => '<p class="comment-form-author"><label for="author">昵称</label><input type="text" placeholder="姓名或昵称" aria-required="true" size="30" value="' . esc_attr( $commenter['comment_author'] ) . '" name="author" id="author"><span class="required">*</span></p>',
 'email' => '<p class="comment-form-email"><label for="email">邮箱</label><input type="text" placeholder="不想填的话可以用null@null.com" aria-required="true" size="30" value="' . esc_attr( $commenter['comment_author_email'] ) . '" name="email" id="email"><span class="required">*</span></p>',
 'url' => '<p class="comment-form-url"><label for="url">站点</label><input type="text" placeholder="个人主页网址,可留空" size="30" value="'.$comment_author_url.'" name="url" id="url"></p>' 
),

 'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">' . '</textarea></p>',

);?>

<?php comment_form($args); ?>

你可以只更改你想要设置的内容,删掉其他的内容。不要忘记把参数放进函数里(最后一行)。

具体内容见官方文档:Function Reference/comment form

 

五、修改边栏小工具

文件位置:wp-includes/widgets
样式文件:style.css

举两个小例子:

  1. 删除功能里的WordPress.org字段
    找到wp-includes/widgets文件夹下找到class-wp-widget-meta.php,打开后找到无序列表<ul></ul>里的四个<li>标签,删除最后一个即可。
  2. 修改日历中有活动日期的显示样式
    默认的日历样式太朴素,看不出今天的日期,有活动的日期也不够明显。在style.css中加入下面这段,即可使有发表文章的日期数字显示为粗体,绿色。
#wp-calendar tbody a { /*当天发表文章的*/
        font-weight:bold;
        color:green;
}

      其他的比如设置今天的日期数字为斜体加粗体:

#wp-calendar #today { /*今天*/
        font-weight:bold;
        font-style:italic;
}

 

总结

以上只是给出了几个修改主题文件的示例,具体还有很多内容可以探索,从官方文档开始新旅途吧!

 

WordPress美化方案:插件篇

使用WordPress一年了,逐渐形成一套格式外观美化的方法。在这里做个总结,也给新手做个参考。

基础知识

整个美化方案由三种方法组成,一个是安装插件,这个就不用多说了。另一个是修改主题文件。最后一种是插入代码

另外两篇请见:
WordPress美化方案系列:修改主题文件
WordPress美化方案系列:插入代码

 

一、文章显示概要

插件:Easy Custom Auto Excerpt
插件限制了字号,但是可以通过插入代码的方法避开。安装“Easy Code Placement”插件后,就可以在插件设置里readmore字段设置的地方插入HTML代码,比如下图中是我插入了按钮标签后的效果。

readmore按钮

readmore按钮

 

二、文章固定链接

插件:WP Slug Translate
这个之前说过,首先在设置-固定链接里把格式设为文章名,然后见这里。另外要注意的是作者提供的翻译API有数量限制,建议自己按照作者的说明注册一个。

 

三、图片显示

插件:Easy FancyBox
点击这篇文章的任意图片查看效果。
需要在插入图片的时候将图片链接到媒体文件。

图片设置

图片设置

四、代码显示

插件:Crayon Syntax Highlighter
一些必要的设置:在插件设置里勾选“在代码中进行HTML转义”。

插入代码设置

插入代码设置

然后编辑代码的时候,选中代码,然后选择“预格式化(即pre)”

插入代码

插入代码

五、手机站点

插件:Wptouch
大部分主题在手机上阅读不方便,使用wptouch可以优化排版。默认的免费主题就挺好,注意关联一下菜单。

本站的手机页面

本站的手机页面

六、评论区添加表情

插件:silver_smilies(作者的博客
没有找到好用的表情插件(多说?),发现了这个,觉得还算简单好用。支持自定义表情包。目前还没解决的问题是如何把它放到评论输入框的下面。
用法:点击这里下载压缩包,如果上传安装失败那么把文件解压缩后放到wp-content—plugins下,然后在插件管理界面启用。另外,我还在压缩包里放了找到的三套表情包:)使用时用表情包里的图片替换face文件夹里的全部图片(感谢原作者)。

表情包1

表情包2

表情包3

三套表情包

 

 七、其他插件

其他几个插件使用都没什么难度,就不一一介绍了。
相关文章:Yet Another Related Posts Plugin
文章访问量: WP-PostViews
返回顶部:Dynamic To Top

 

总结

插件开启的过多会影响网页的加载速度,所以尽可能的通过修改主题文件来实现简单的功能。有时间再总结一下如何优化wordpress速度。

impress.js——用HTML“写”幻灯片

一、我做的幻灯片

先看一下我用impress.js做的幻灯片吧!
加载可能会有些慢。如果打不开那就看一下作者的demo吧。
注:文字摇晃的特效使用的是CSSHake,视频用Chomp(ios)制作。

 

二、概述

impress.js是一个免费开源的JavaScript库,可以用来制作非常酷的幻灯片。如果你之前接触过Prezi,肯定还记得那让人赞叹的特效吧。而impress.js就是受Prezi启发做成的。

常见的幻灯片工具有微软的PowerPoint【1】,苹果的Keyword等。不常见的有Prezi等。除此之外,还有一些通过HTML,CSS,JavaScript等前端语言制作的工具,主要有impress.jsreveal.js(这个有时间探索一下),deck.jshtml5slides。其中impress.js最让人印象深刻(impress!),使用它可以你可以制作出许多特效:三维空间的无限延伸,3D效果,任意角度的旋转,任意大小的缩放,把一页幻灯片放在三维空间的任一位置。算了,语言是苍白的,看看作者的demo吧。

虽然效果很好,但impress.js也有一些缺点:比如编辑方式太繁琐(其实是需要学的东西很多……),尤其是想要获得一些特殊效果时。总的来说,impress.js比较适合以演讲内容为主的展示(参考高桥流简报法),单页只放一个名词或句子,或是一张图片,这样会带来比较出众的效果。可以用它来做一个词云图,前提是演讲水平够好。

先泼一盆冷水,工具是为内容服务的,如果你没有什么好的内容——要么是有质量,要么有意思,那么幻灯片做的再炫也没什么用。当然,如果你只求酷炫,那当我没说。

 

三、前提要求

需要一些HTML和CSS的基础知识(会JavaScript更好),没有的话花几个小时到w3school中文)或MDN上了解一下。

按照作者在代码注释里说的,你不光得有HTML和CSS的基础知识,还得有设计的眼光。因为impress.js没有默认的风格或样式,一切都得你自己来。而且作者不希望所有的impress.js展示都像demo一样,所以,明白了方法就自己从头做起,你会体会到很大的乐趣的!

英文好的还是去看源代码吧。作者的注释很详细,也很有趣。

 

四、文件的使用

新手可能会对文件有些疑问,所以在这里说明一下。不需要可直接跳至下一节。

下载

你可以到项目的Github页面下载文件,或者直接点击这儿下载。解压后会得到一个文件夹,双击打开根目录下的index.html就可以看到作者的demo了。

 

主要文件组成

impress:

  • js
    • impress.js(JavaScript文件,提供特效支持)
  • css
    • impress_demo.css(CSS文件,提供样式支持)
  • index.html(HTML文件,幻灯片的入口,也是你写入幻灯片的地方)

 

如何“制作”幻灯片

你要做的就是创建一个HTML文件(使用文本编辑器比如Notepad++),demo对应的HTML文件就是根目录下的index.html。然后把CSS文件和JS文件引入你的HTML文件里(见“初始化”),接着把你的幻灯片按照一定的属性设置写进HTML文件里(见“创建幻灯片”)。最后用浏览器把这个HTML文件打开就可以了。

 

五、初始化

头部(head

先把文件下载下来,然后创建一个HTML文件,把下面的head放上去:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />    
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>impress.js</title>
    <link href="css/impress-demo.css" rel="stylesheet" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>

头部信息经过删改。

 

错误反馈

接下来是一个错误反馈的class,当浏览器不支持时会显示,可以改写错误信息的内容。也可以不加。

<body class="impress-not-supported">
<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or<b>Firefox</b> browser.</p>
</div>

 

编辑幻灯片区域

创建一个id为impress的div,待会所有的演示文稿都要放在这个div里:

<div id="impress">
</div>

 

操作提示

下面这两段分别用于在电脑和移动设备上提示用户怎么控制幻灯片:

<div class="hint">
    <p>Use a spacebar or arrow keys to navigate</p>
</div>
<script>
    if ("ontouchstart" in document.documentElement) {
        document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
}
</script>

 

调用JS文件声明

这两行放在文件的最后。声明对impress.js的引用,并且初始化impress.js。

<script src="js/impress.js"></script>
<script>impress().init();</script>

别忘了关闭上面的几个标签:

</body>
</html>

点击这儿看完整的模板文件。

 

六、创建幻灯片

impress.js创建了一个三维空间,所有的幻灯片都有各自的位置坐标(x,y,z)。整个空间的中心是原点(0,0,0)。其他的幻灯片或文字都是相对于这个原点来设置位置的。(中心不一定是第一张幻灯片)

像之前提到的,所有的幻灯片都要放在一个id=impress的div里。而且所有幻灯片都使用一个div。设置幻灯片的各个参数如下:

id(可选)——可以用来表示幻灯片的顺序,格式是id=“step-N”,(比如id=”step-2″,序号为2)。如果不指定id的话,幻灯片按照代码从上往下的顺序出现
class(必须)——通常有两个值,“step”表示一个步骤,元素透明显示,“step slide”有幻灯片白色方框。

其他的调整选项都以data开头。

位置属性

data-x——表示x轴坐标
data-y——表示y轴坐标
data-z——表示z轴坐标

坐标的设置,如图所示。需要注意的是Y轴向上是负值。简单的理解就是:往右(x),往下(y),往上(z)是正值;相应为负值。

坐标

坐标方向

常用效果

data-rotate——表示旋转,分别有data-rotate-x,data-rotate-y和data-rotate-z(同data-rotate),值表示旋转的度数。正值表示按照相应的轴顺时针旋转,负值则是逆时针。
data-scale——表示幻灯片的大小,如data-scale=”4″表示比其他幻灯片大四倍

 

不常用属性

data-transition-duration——幻灯片切换的时间,默认为1000,单位为ms(1000ms=1s)

data-perspective——表示视角,设为0则取消3D效果。默认为1000。更改前最好知道你在干什么,详情见:https://developer.mozilla.org/en/CSS/perspective

 

示例

第一个div创建了一个有白色底框的幻灯片,位置在第四象限,沿x轴顺时针旋转90度。文本是100px大小的“Hello, world!”。

    <div class="step slide" style="font-size:100px" data-x="0" data-y="0">
        <q>Hello, World!</q>
    </div>

 

第二个div创建了一个透明的幻灯片,位置在第一张幻灯片的右上方,绕z轴旋转90度。

    <div class="step" data-x="2000" data-y="-2000" data-rotate-z="90">
        <q>Hello, You!</q>
    </div>

第三个div创建了一个透明的幻灯片,位置在第二张下方。

    <div class="step" data-x="2000" data-y="-2000" data-z="-5000" >
        <q>Hello, Boy!</q>
    </div>

第四个div创建了一个透明的幻灯片,位置在第三张绕y轴旋转90度的地方,2倍大小。

    <div class="step" data-x="-2000" data-y="-2000" data-z="-5000" data-rotate-x="180" data-scale="2">
        <q>Hello, Girl!</q>
    </div>

点击这里查看这四张幻灯片的效果。

 

全景图

最后一个div是一个全景图:

    <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
    </div>

以上这些属性可根据需要调节,只有xy坐标是必须的

 

七、插入媒体问题

使视频和音乐在进入幻灯片时自动播放

html5可以使用<video>和 <audio>标签插入音视频,控制方式有三种:

controls

显示视频控制条

loop

自动播放,循环播放

autoplay

 自动播放

代码如下:

<video width="320" height="460" autoplay>
    <source src="video/test.webm" type=video/webm>
</video>

音频的代码类似,只要去掉宽高设置,更改文件的type就可以了。

在impress.js中,把视频标签放入DOM限制了媒体的autoplay。这时我们可以在impress.js中插入这段代码:

var videoStep = document.getElementById("video-step");
var video = document.getElementById("video");
videoStep.addEventListener("impress:stepenter", function(){
    video.play();
}, false);
videoStep.addEventListener("impress:stepleave", function(){
    video.pause();
}, false);

代码解释:

1~2行:设置了两个变量,分别代表幻灯片和视频文件,后面分别填上相应的id。
3~5行:监听当前幻灯片上的事件,如果进入幻灯片就执行相应的函数(即播放视频文件)
6~8行:同3~5行,这次是设置离开幻灯片时执行的函数(即暂停视频文件)。

然后把有视频的那张幻灯片的id设为video-step,视频的id设为video。

<div id="video-step" class="step" data-x="-50000" data-y="2000" data-z="-60000" data-scale="6">
    <video id="video" width="420" height="340" autoplay>
        <source src="video/IMG_1254.webm" type="video/webm">
    </video>
</div>

这样视频就可以在进入到那张幻灯片时开始播放,进入下一张幻灯片时就自动暂停了。

 

一张幻灯片里放入多个视频或音频

以放两个视频为例:

第一步:
在上面那段JS代码里定义两个视频文件的变量(比如video1,video2):

var video1 = document.getElementById("video-1");
var video2 = document.getElementById("video-2");

第二步:
进入幻灯片时执行的函数变更为:

videoStep.addEventListener("impress:stepenter", function(){
    video1.play();
    video2.play();
}, false);

离开幻灯片时执行的函数相应修改;

第三步:
HTML文件设置相应的id。

 

在不同幻灯片里分别放入视频

以在三个幻灯片中放置视频为例:

  1. 在impress.js重复插入三个上面那段代码;
  2. 改掉变量名称(videoStep和video);
  3. 相应地更改其他位置的变量名;
  4. 修改相应的id名称(video-step和video);
  5. html文件设置相应的id。

插入音频的方法,以此类推。

 

背景音乐

上面的方法只适合在某一页幻灯片上放置媒体,而如果想要全程播放背景音乐的话,就可以把audio标签放在整个编辑幻灯片(id为“impress”)的div之外。同时,你还可以在任一页控制背景音乐的暂停与播放。方法相同,也是插入上面那段JS代码,更改相应的变量和id,然后设置相应的操作,具体见上面那段代码的解释。

 

编辑JavaScript

我还没开始学JavaScript,能给的建议就这几点:

  1. 保持相同的缩进;
  2. 语句后加上分号;
  3. 变量名不能重复;
  4. 另外,HTML里的ID也不能重复

 

八、头脑风暴

把impress.js和其他的前端工具搭配使用,你会获得更加有趣的效果,比如reveal.js的作者推荐的许多有趣的前端项目。再比如CSShake(可以让文字或图片实现各种摇晃效果),参考我之前写过的介绍示例页面。或者是做出一个词云图来,都是很好的创意。当然,你得会演讲。

impress+word cloud

impress+word cloud

像demo里说的,唯一的限制就是你的想象力,快去探索吧!

 

九、Last but not least

把作者的最后一大段注释翻译过来吧:

“现在,完成你第一个impress.js幻灯片的所有知识,你差不多都有了。但是在你开始之前……
啊,你已经从Github复制了代码?
你已经打开编辑器粘贴了上去?
快停下!
幻灯片不是这样做的。这些只是代码。实现这些创意之前你得在心里完成它们。

如果你想做出好的幻灯片,就拿出铅笔和纸。关掉电脑。打个草稿,写写画画,通过头脑风暴把你的创意在纸上展现出来。试着把你想展示的东西做出个思维导图。这会让你离待会你要用impress.js实现的排版越来越近。只有当你把你的展示在纸上做好了,再回到代码前。太早写代码没什么用,因为那样你只会把你的时间浪费在和没用的点坐标搏斗上。

如果你觉得我疯了,那么请你把你的手放在一本叫做《展示的哲学》(”Presentation Zen”)的书上。这本书完全是关于如何创建让人赞叹和着迷的幻灯片的。

好好想想,如果你没有什么有趣的东西要表达,impress.js可能帮不了你什么。”

 

十、附录

作者的Twitter:@bartaz
项目Github地址【https://github.com/impress/impress.js

 

注释

1】因为大部分人都会用“PPT”代称幻灯片,可是“PPT”本身指的是用微软的演示文稿工具PowerPoint做出来的幻灯片(其生成的文件格式默认为ppt),而英文里这个在做展示/报告(Presentation/Slide Show)时用的东西一般称作Slide,翻译过来是幻灯片或是演示文稿。本文统一称为幻灯片。

浏览器使用技巧

很多人觉得浏览器没有什么技巧,不就是个上网的工具嘛。但事实不是这样,拿用电脑来说,会开关机,上网,玩游戏是第一层;懂得各种技巧,熟悉各种操作是第二层,理解操作系统原理和硬件运行机制,进而运用原理更好的使用电脑是第三层……我今天要谈的就是对浏览器的第三层应用。当然,上面还有很多层:)

其实这篇文章的重点不在技巧,而是对网页和浏览器原理的实践。这些技巧都是建立在对这些原理的理解上。文章分三部分。分别是对构成网页文件的介绍、在浏览器中访问这些文件的方法、技巧示例。同时,这篇文章也形成了一个完整的学习过程。也就是:理解基础知识——尝试和实践——探索和应用

提前剧透一下这篇文章能教会你什么

  • 不使用客户端在大多数音乐网站上下载音乐(比如豆瓣电台,百度音乐盒,酷我等等)
  • 破除网络课离开页面自动暂停视频的限制
  • 破除网页弹窗强制登记手机号的限制
  • 破除网页的文本复制和图片保存限制
  • 修改网页内容

事实上,知道了原理,你能做的事情远不止这些。

 

一、网页

假设你有一台电脑,安装了某个浏览器。你打开浏览器,在地址栏里输入了google.com,按下Enter,显示访问不了。好吧,这不好笑。换个例子,你又重新输了个网址:withlihui.com,也就是我的博客。按下Enter后屏幕上显示出了我的博客的主页。这中间发生了什么?(域名服务器之类的内容就先跳过,跟这篇文章没有太大关系,有机会再写一篇介绍一下。)

总的来说,你输入的地址其实可以看作是一个文件地址(脑海中浮现资源管理器地址栏),只是这个文件存放在我租用的服务器上面。你告诉浏览器要访问的文件地址,然后它读取了这些文件并显示出来。

一般的网页是由HTML文件、CSS文件以及JavaScript文件组成的,这三个文件共同合作,分别负责实现网页的基本内容(content)、页面样式(style)、功能效果(function。按照知乎用户胖胖小的说法,如果把网页看作一个句子的话,HTML是名词,CSS是形容词,JavaScript是动词。好了,知道这么多就可以了,想知道的更深入一点可以去看w3school中文)或MDN的文档。

 

二、浏览器

浏览器其实可以看作是一个文件查看器,事实上,它确实也可以读取本地文件,支持mp3mp4txtpdf等文件。只不过一般用它来它读取构成网页的文件(HTMLCSSJavaScript等),你在地址栏输入了一个文件地址(网站地址),浏览器找到那个地址上的HTML文件,然后读取相应的CSSJavaScript文件,把网页显示出来。更重要的是,你还可以通过浏览器查看这些文件,也就是源代码。我下面讲到的技巧都是基于这一点上的。

本文以Chrome为例,其他浏览器方法大致相同。在浏览器界面按下F12,或是右键点击检查( Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)),这时就会打开开发者工具(DevTools),如下图所示:

devtool

Chrome开发者工具(devtool)

几个下面示例会用到的标签含义:
ElementsHTML代码(上半部分)和CSS代码(下面的Styles
Resources:网页文件所用到的资源,包括文件、数据库等。
Network:网页的加载情况,包括加载网页的各项请求和下载的资源,以及相应的时间。

标签左边的两个图标:
箭头:按下这个图标后,再在网页上点击一个元素,会查询到相应的HTML代码。(上图红色圈出)
移动设备:按下这个图标进入移动设备显示模式。

 

三、技巧示例

保存图片

大多数时候下,我们使用右键另存为来保存图片。可是有的时候,网站为了保护版权或是其他原因而“遮蔽”了这个功能,比如500px上的照片。

500px

500px上的图片

这时我们可以在开发者工具里用小箭头选择这个图片,找到相应的代码位置,在图片代码上点右键选择“Open link in new tab”,然后就可以下载了。

 

pic code

图片对应的html代码

另外,在ResourcesImages项里,还可以找到网页上加载的所有图片(大部分不是全尺寸原图)。

所有图片

网站用到的所有图片

去除文字复制限制

有些网站限制了右键和选择文字的功能,这主要是通过JS代码来实现的。使用开发者工具,可以很容易的破除这种限制。比如在这个网页上,相关的功能都被屏蔽了。打开开发者工具,选择下方Styles标签旁边的Event listener。可以看到下面有很多被监听的事件,其中contentmenu代表右键菜单,selectstart代表选择文字。

event listener

event listener

把这两个事件下面的document去掉(点击remove),这时页面就恢复正常了。

 

保存网页为pdf

有时候我们想把网页存成pdf打印,但电脑又没有连接打印机,刚好也没有安装相应的插件,这时开发者工具就派上用场了。

打印示例

打印我的博客主页示例

在想打印的页面按下Crtl+P,在预览页面上右键打开检查,找到图中的src属性,复制src的值(比如图中的chrome://print/4/0/print.pdf),然后粘贴在地址栏里打开就可以下载了。

 

保存音频

有时我们想下载某个音频,网站却没有提供下载选项,除了下载插件,也可以使用开发者工具来完成。在播放音乐之前,打开开发者工具中的Network标签,然后刷新一下页面(F5),开始播放音乐,这时可以看到加载的资源里有一条时间线很长的记录,那个一般就是你要找的音频文件。照旧,在那条记录上点击右键,选择“Open link in new tab”,会开始自动下载和播放。

 

音乐下载示例

下载豆瓣FM音乐

对有些使用特殊方法来引用资源的网站无效,目前测试成功的有豆瓣FM、百度音乐、酷我音乐、谷歌翻译录音。

 

修改网页信息

我们可以在本地修改网页上的信息。打开开发者工具,使用查询箭头点击页面上你要修改的字段,比如说百度首页的“百度一下”,定位到右边HTML代码中相应的位置。

修改百度首页的字段

修改百度首页的字段

双击“百度一下”字段,修改它,然后按下Enter键,就变成了下面这样:

效果展示

修改后

再比如,定位到搜索框上面的图片,然后修改图片的src属性,将后面的值修改成google首页的图片地址(如果想要修改为本地图片的话,可以把网页下载下来,不细说了)。按下Enter就成这样了。

效果2

当然,除了和别人开玩笑外太大用处。一刷新就没了。

 

破除网络课离开页面暂停视频限制

一定有人很期待这个功能吧。如果课很好还是认真听一听(比如周海宏的音乐鉴赏)比较好,很烂的话就往下看吧。方法同样很简单,打开开发者工具后,依然是通过小箭头选择工具选择视频元素,定位到代码。然后清除id的内容,再按下回车就成功了。

video example

双击红圈中的id值,删除后回车

原理就是,通过清除id,切断了页面元素(视频)和控制它的代码的联系(JavaScript),具体下一小节。另外要说明一下的是,刷新后网页代码会还原,所以需要再重新清除一下

 

去除叠加窗口

这条还是很有用的,有了前面的基础知识,我们已经知道了网页的基本构成,也学会了如何查看网页的源代码。那么有一天我们想在某网站上下载一个文件,越过层层的障碍,注册了账户,添加了各种信息,结果回到下载页面又让我注册手机号……而且还没有关闭窗口的按钮,太流氓了。不仅如此,还定期显示这个窗口。

窗口示例

某网站上跳出的窗口

我是不会让流氓得逞的。定位到相应的HTML源代码,这些窗口在HTML是一个块(div),通过相应的classid连接到对应的JSCSS代码,我用小箭头工具选择填手机号的小窗口,然后发现整个窗口对应(最外层)的class是PhoneCertificationModal,清除掉,按下enter就会发现窗口不见了(如果无效可以再把id的值也清除掉)。

去掉窗口

去除窗口

其实窗口并没有去除,只是因为没有了JSCSS代码的支持,它就失去了页面效果,变成一堆字扭在一起,跑到页脚去了。

去除样式的效果

失去了css和js支持的孤单的html代码

可是网页这时是一片灰色,遮住了想要点击的内容。这时再用同样的办法,点击小箭头选择这个叠加的窗口,把相应的class清除清空。这时页面就恢复正常了。

和上面的更改网页信息一样,修改了之后只要点击刷新,网页就会恢复到原来的状态,所以不要害怕会玩坏:)

 

去除WordPress插件限制

比如说显示文章概要的插件会限制你readmore字段的字号,假如你想要设置的话就得花钱升级。这时可以在字段里插入HTML代码,自己设置字号大小。

去除插件限制

去除文章概要插件的字号限制

很多论坛的评论就支持少量HTML代码,再早一些,有些网站没有限制评论支持的HTML代码,导致很多搞笑的事情出现,比如说占满整个屏幕的大字……

 

后记

以上这些内容建立在我现有的知识水平上,所以讲得还不够完善,欢迎指正。希望这篇文章能给感兴趣的人作一把小小的梯子(如果帮到了你,请告诉我)。你可以从下面的链接开始新的学习路程。

 

进阶

这些地方会给你提供更多帮助:
Chrome DevTools 文档【https://developers.google.com/web/tools/chrome-devtools/
MDN(Mozilla 开发者网络)【https://developer.mozilla.org/zh-CN/w3school【http://www.w3school.com.cn/index.html

 

Python入门书评价与总结

从开始学习Python以来,读了几本入门书,在这里做一些总结,给需要的人做个参考。

几个个人观点

视频/书?

一开始看了UdacityPython入门课程,虽然也了解了一些基本概念,但最终还是没有什么具体的收获(但认识到了Python的神奇……)。因为视频不会仔细的讲语法,也没有具体的指导。视频更偏向于实现项目,而不是语言的细节。所以,一开始建议还是从书开始。

 

电子书/纸质书?

iPad上看了《ThinkPython》前十章,最后却把书打印出来重看了一遍。电子书虽然有好处,便携啦,方便查词啦,但弊端太大。比如摘录不方便查看,做笔记也不方便。所以,一开始建议从纸质书开始。

 

译本/原版?

一开始可以暂时阅读译本,了解的差不多后就该看原版书了。一来译本的质量常常很差,二来平时查google都是英文内容,一些关键的词汇中英文混淆会导致概念理解不清。所以,一开始建议从译本开始,但要尽早脱离译本。

 

评价与总结

(按阅读顺序排列)

A Byte of Python》(《Python简明教程》)

评价:概念初认识

网站:http://python.swaroopch.com/

第一本Python书(中文译本),写的很简单,没有过多涉及细节。也许是因为这是接触Python的第一本书,所以读起来不是很顺畅。很多东西看得云里雾里。

 

Learn Python the Hard Way》(《“笨”方法学Python》)

评价:入门的练习册

网站:http://learnpythonthehardway.org/book/

看这本书时,已经看完了《Python简明教程》,但对Python还是没有什么具体的了解。这本书是在网站上读的。对于新手来说还不错,它借由大量的誊写代码而实现对Python语法的记忆和掌握,作者给的一些建议也都很中肯。虽然最后几课的作业我没有完成,但是命令行游戏倒是完成了,收获了不少乐趣。

 

Core Python Programming》(《Python核心编程》)

评价:大而全的参考书和习题集

网站:http://corepython.com/cpp2e (不提供在线阅读)

我做的习题答案:https://github.com/lihuii/CorePythonProgrammingExercise-

亚马逊买的第二版中文译本。书中错误比较多,大部分不影响阅读,少数几个课后题目让人无法理解。开始看这本书,才有了一些豁然开朗的感觉。也许是因为看了前两本书的缘故,书里的内容大部分都可以看懂。而且一些之前的困惑的都在这里找到了答案,比如说sort方法不返回整理后的列表,“if __name__ == ‘__main__:’”的意思等等。这本书目前还没有看完,一边做题一边看,目前看到了第十三章。

 

Think python

评价:进阶必备的思考书

网站:http://greenteapress.com/wp/think-python/

这本书是和《Python核心编程》一起看的,当时坐在回家的车上,半天就看完了前几章。英文原版读起来很顺畅,作者有时很幽默,有时也会有思考。本书的副标题是“How to think like a computer scientist”,书中普及了很多通用的编程思想,而且每一章节后面都有debugger和术语解释。很多容易被忽略的或是关键的细节作者都会提到,要是早些看这本书,我会省下不少力气。

待读:

Dive into Python
invent with python

 

推荐阅读顺序

  1. Learn Python the Hard Way(肌肉记忆)
  2. Think Python(思考课)
  3. Core Python Programming(思考+实践+延伸)

 

另外,编辑器推荐使用PyCharm,超好用!

pycharm

pycharm

CSShake——元素摇晃特效

效果演示

所谓的摇晃特效,就是当你把光标移到文字上的时候……我可以轻微的晃慢慢的晃猛烈晃疯狂晃,甚至左右晃上下晃旋转着闪烁着 ……

摇晃的驴子

光标移到驴子身上就可以摇晃它

 

前段时间在家没事做,突然想到之前看到的CSS特效,觉得文字摇晃很好玩。google了一下,原来是一个开源的css包。心血来潮,便想做个网页试一下。

下面是css shake的用法介绍,整理翻译自github页面的介绍:
首先在html里声明包含css文件,最简单的方法是通过CDN加载(你也可以将https://csshake.surge.sh/csshake.min.css下载到本地然后加载):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/csshake/1.5.3/csshake.min.css" />

然后通过添加class来使用不同的效果:

<div class="shake">Foo</div> 
<div class="shake shake-hard">Bar</div> 
<div class="shake shake-slow">Baz</div> 
<div class="shake shake-little">Qux</div> 
<div class="shake shake-horizontal">Egg</div> 
<div class="shake shake-vertical">Ham</div> 
<div class="shake shake-rotate">Snake</div> 
<div class="shake shake-opacity">Apple</div> 
<div class="shake shake-crazy">Orange</div>

还可以通过增加class来控制动画的状态(比如一直摇晃,还是光标放上去摇晃)

<!-- Freeze the animation at that point when :hover --> 
<div class="shake shake-freeze">Hello</div> 
<!-- Continuous animation instead on :hover --> 
<div class="shake shake-constant">Hola</div> 
<!-- and stop when :hover --> 
<div class="shake shake-constant shake-constant-hover">Halo</div>

另外,还可以自定义摇晃类型,具体的用法请参考https://elrumordelaluz.github.io/csshake/

 

在 VPS 上使用 WordPress 建站流程记录

这次域名和主机转移花掉了大约四天的时间。第一次使用VPS(Linux系统),遇到了很多问题,查google查得头疼>_<。在这里记下大致的过程和与遇到的问题,也许可以帮到别人,或是未来的自己。

 

买域名和VPS

花钱的事情总是容易的,所以买vps和域名的过程就不谈了。最终选了bandwagon上一个130元的套餐,10G硬盘,512内存,1000G月流量。域名仍然在Godaddy上,换了一个.com域名(有优惠码可以用)。

 

域名解析

更新:最近Godaddy的域名服务器不稳定,或者是被GFW屏蔽?建议直接使用DNSpod来解析域名。打开网址,注册然后按照提示添加记录。

有两步,分别在域名提供商和vps内设置。简单来说,就是把域名(注册的网址)指向你vps的那个IP地址,然后再在vps里把你的域名指向网站文件的目录(见下面“在VPS上建多个网站的方法”)。

1 2 3

修改或添加A记录,host代表你的域名,而points to 那一栏是你vps的IP地址。如果不需要设置子域名,那么只需要添加@那一条记录就可以了,@代表你的域名的完整地址。接着保存设置,等待生效就可以了。

4

顺便说一下,我在这里使用的是godaddy的域名服务器(nameserver),如果想要使用其他的域名服务器(比如说DNSpod,生效更快),那么需要在DNS管理界面SETTINGS页面修改nameserver为dnspod的dns地址        

f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

然后前往Dnspod解析域名。

详情参见:Godaddy注册商域名修改DNS地址

 

安装LAMP

接下来是VPS上LAMP的配置,也就是Linux,Apache,MySQL,PHP。关于LAMP,援引一下维基百科上的说明:

LAMP是指一组通常一起使用来运行动态网站或者服务器的自由软件名称首字母缩写:Linux,操作系统
Apache,网页服务器
MariaDB或MySQL,数据库管理系统(或者数据库服务器)
PHP、Perl或Python,脚本语言

关于LAMP

关于LAMP

由Shmuel Csaba Otto Traian,CC BY-SA 3.0,https://commons.wikimedia.org/w/index.php?curid=28224098

linux在vps上已经装好了,初始linux版本是centos 6。试了一下一键安装包,没有成功。各种尝试之后找到了digitalocean上的许多文章,帮了大忙。

首先是服务器的初始化设置:Initial Server Setup with CentOS 6
然后是LAMP的安装:How To Install Linux, Apache, MySQL, PHP (LAMP) stack On CentOS 6
还有SSL设置:How To Create a SSL Certificate on Apache for CentOS 6
防火墙的安装(可选):How To Set Up a Basic Iptables Firewall on Centos 6

 

wordpress转移

方法一:重新安装wordpress

  1. 方法见官网文档 Installing WordPress
  2. 在原站的仪表盘—工具—导出—导出所有内容(会生成一个xml文件 )
  3. 安装好(这中间可能会有很多问题,参见下面的问题及处理)新站后,选择工具—导入—wordpress,安装相关插件后导入之前生成的xml文件。

方法二:整站打包

  1. 这个方法太麻烦,而且很容易出错,不推荐使用。
  2. 大致的思路是:打包整站文件—导出数据库—修改数据库中的链接—上传文件—创建新表,导入数据库—修改wp-config文件。

 

安装设置Shadowsocks服务器

Shadowsocks(中文名称:影梭)是使用Python等语言开发的、基于Apache许可证开源的代理软件。Shadowsocks使用socks5代理,用于保护网络流量。在中国大陆被广泛用于突破防火长城(GFW),以浏览被封锁的内容。

Shadowsocks分为服务器端和客户端。在使用之前,需要先将服务器端部署在支持Python的服务器上面,然后通过客户端连接并创建本地代理。此外用户也可以选择购买基于Shadowsocks的商业服务,以获得更加稳定可靠的服务,或者免去自行部署的麻烦。

目前开发者已宣布停止维护。但仍有更新陆续推送[2]

——以上引用自维基百科页面https://zh.wikipedia.org/wiki/Shadowsocks

在bandwagon上有一键设置ss服务器功能,所以只需要将相关的密码等数据填入下载的客户端就可以了。客户端在官网可以下载到:https://shadowsocks.org/en/index.html

 

问题解决

思考方式

整个过程中收获了一些思考方式,比如我执行nano /xxx/xxx/xxx时,报错没有找到这个命令。这时我会知道,这个报错的意思是没有nano这个程序,所以我会去执行安装命令 yum install nano 而不是再去google。

 

命令

学习了一些linux下(包括mysql)基本的命令。

 

vps上建多个网站的实现方法

linux下默认的http服务器的目录为var/www/html/,网站可以理解成一个文件,访问一个网址其实是在访问存放在服务器上对应的文件。如果只放一个网站,那么可以把文件放在这个目录下,并且在/etc/httpd/conf下的httpd.conf末尾加入下面这段,这段可以理解成是对特定的网址对应的文件位置的声明。

#######################################################

<VirtualHost 23.83.239.241>
ServerName www.greyli.com
DocumentRoot "/var/www/html/myblog"

</VirtualHost>

#######################################################

<VirtualHost 23.83.239.241>
ServerName withlihui.com
DocumentRoot "/var/www/html/myblog"
</VirtualHost>

这两段的意思是,所有对www.greyli.com 和 withlihui.com 的访问都将指向目录/var/www/html/myblog。同样的,假如想要放多个网站,那就需要为不同的网站在/var/www/html/下建立一个文件夹,然后在httpd.conf加入相应的字段来为各自的域名指定相应的文件夹位置。具体操作就是在httpd.conf末尾加入上面两段,只需更改相应的域名和对应的文见路径。

顺便说一下,如果在域名服务商那里设置了子域,那么就可以添加任意个子站在服务器上,当然前提是内存足够大。设置子域的方法是在域名管理中添加A记录,地址填写*.xxx.xxx(比如*.withlihui.com),并且指向你的服务器IP。*号代表任意。设置好之后,把上述地址中的*号改为任意字段都可以作为一个子域名使用(比如talk.withlihui.com)。

另外,还可以IP地址作为网址访问,只需在末尾加上这段:

#########################################################

ServerName 23.83.239.241
NameVirtualHost 23.83.239.241

<VirtualHost 23.83.239.241>
ServerName 23.83.239.241
DocumentRoot "/var/www/html/main"
</VirtualHost>

当然,你得修改相应的IP和文件目录。

 

远程文件管理

远程文件连接推荐使用SFTP来连接,SFTP 为 SSH的一部分,是一种安全的文件传输协议。它不用在VPS中安装组件,事实上,从你付钱拿到VPS后,就可以使用了。支持SFTP连接的工具包括Core FTP,FileZilla, WinSCP,Xftp等等,我使用的是WinSCP,免费简单。连接时新建一个连接,输入IP,用户名和密码就可以连接了。

 

wordpress安装可能遇到的问题

简单说明一下具体几个重要步骤:

  1. 下载wordpress到网站目录
  2. 创建数据库表(此时创建的用户名和密码是mysql用户,用来读写相应的表)
  3. 重命名wp-config-sample.php为wp-config.php并修改相关内容(此处修改的用户名和密码是创建表时的用户密码
  4. 执行安装,创建帐户(此处的用户名和密码用来登录wordpress后台

 

The requested URL /cgi-sys/defaultwebpage.cgi was not found

遇到这个问题,我的解决方法是清除chrome的缓存。

 

无法连接数据库

这个问题查了很多资料,还是没解决。最后重启了一下vps,done!

 

安装插件需要连接ftp,输入密码后无法连接.

这时可以在wp-config.php中加入下面这行

define('FS_METHOD', 'direct');

 

安装插件或主题显示无法创建目录

这个是由于linux下文件的权限问题,解决方法见更改文件权限

 

Briefly unavailable for scheduled maintenance

这个是因为wordpress的自动更新。只要把根目录中的.maintenance文件删除就可以了。

新手使用WordPress最常见的三个问题

 

一、链接或页面找不到

一般这个问题都是由中文的分类名或是标题造成。

解决方法:下载一个WP Slug Translate插件。在仪表盘—插件中搜索,安装并启用;而分类或菜单需要将别名设置成英文才可以被正确的访问,如图所示:

 url

 

二、不能输入空格

因为wordpress默认自动清除掉文章里的空格,所以编辑好文章发布之后就会发现格式全都乱了。

解决办法:下载TinyMCE Advanced插件。然后在仪表盘-设置-TinyMCE Advanced –高级选项里勾选上

Stop removing the <p> and <br /> tags when saving and show them in the Text editor

 space

 

三、访问速度慢

通常是因为wordpress默认采用google字体,而谷歌多数服务被墙,自然不会好用。另外,如果是在Godaddy注册的域名,最好使用DNSpod解析域名(详见这里)。

解决方法:安装Disable Google Fonts 插件。

我的第一个GUI程序

100Words

每天一篇英语日记

这是一个英语日记写作程序,可以作为英语学习辅助使用。假如你正在学习英语,每天都有一定量的输入,比如说阅读或是听播客,那么你可以使用它来进行复习和回顾。每天一百个单词也许很少,但是通过长久的积累,同时搭配语法的学习和大量语料的输入,写作水平就会得到指数级的提高。

100Words v1,1

100Words v1,1

功能说明

1.自动创建 ‘C:UsersAdministratorMyDiary年月’ 目录树及文件。
2.以日为文件名创建txt文件,txt文件开头写入日期与时间。
3.每篇日记要求字数100。
4.查看以往日记点击File-Reflect。
5.查看以往日记不支持再编辑,点击保存会添加到当天内容。
6.数据统计。

使用说明

1.点击这儿下载文件。
2.双击安装字体文件(Purisa.ttf)。
3.然后就可以打开程序(100 Words.exe)了。

Rules

Rule 1: You must write no less than 100 words. Rule 2: You can only use one emoji in one day. Rule 3: You can not change the previous diary.

打包说明

1.根目录下的exe文件是用pyinstaller打包。
2.Diary.spec为打包后生成的配置文件。
3.代码中的音频调用使用了一个resource_path(relative_path)函数,在调用文件的地方使用这个函数包裹。 然后在.spec文件中指向具体的文件地址,打包后即可正常调用。 4.详情见注释。

待实现功能

1.图形界面;————√
2.拼写检查;
3.年底自动总结完成情况,包括每月完成量,生成折线图;
4.添加表情;
5.activity calendar。
6.图标问题。
7.反馈。————√

Python打包总结(pyinstaller)

 

在学《Leanrn Python the Hard Way》时做了一个文字游戏,想要分享给朋友玩。于是便想把程序打包成 .exe 文件,尝试了py2exe,出了很多问题,花了很多时间查来查去最后还是没有成功。然后试了pyinstaller,虽然也遇到了一些问题,但终于完成了。

(英文好的建议直接去看官方文档

 

、安装及基本操作

 

Pyinstaller可以使用pip安装,在命令行下输入下面这行就可以了。

 

pip install pyinstaller

 

如果下载安装包,那么要注意下载相应的win32/64版本,建议所有的程序都统一成32位或是64位版本,这样会减少很多问题。

 

安装完毕之后,就可以通过以下命令打包了

先转到主脚本所在的地址,例如:

 

cd C:UsersAdministratorprojectstomato

 

然后执行如下命令:

pyinstaller start.py -F

 

其中start.py为主脚本,主脚本中调用的模块文件会被自动打包。第三个参数是操作命令,常用的命令有

-F 打包成单个文件
-D 打包成单个文件夹形式
 
-c 控制台模式,执行程序会跳出控制台,
-w 窗口模式,不会跳出控制台 

 

基础的命令就这些,程序名和图标等建议在spec文件中设置。

 

二、文件调用(音频,图片等)

 

一开始打包时便不清楚文件调用问题,因此文件一旦移动到别处就没法正常调用。后来看到别人的教程,但这部分也是模棱两可,让人理解不了。后来结合官方文档和别人的教程,终于弄清楚了。

 

首先在脚本定义一个读取相对路径的函数:

Import os
Import sys 

def resource_path(relative_path):
    """
    定义一个读取相对路径的函数
   """
    if hasattr(sys, "_MEIPASS"):
       base_path = sys._MEIPASS
    else:
       base_path = os.path.abspath(".")
    return os.path.join(base_path, relative_path)

 

然后在需要调用文件的地方用如下格式包裹:

resource_path('resources/complete.wav')

 

然后在生成的.spec文件exe = EXE()中加入下面这行:

[('resources/complete.wav',r'C:UsersAdministratorresourcescomplete.wav','music'),],

 

元组内的三个项:

第一个为代码中resource_path包裹的地址;

第二个是文件的实际地址;

第三个是打包进程序的文件名字。

 

这样打包后文件会被正确引用。

如下所示:

exe = EXE(pyz,
      a.scripts,
      a.binaries,
      a.zipfiles,
         a.datas,               
         [('resources/complete.wav',r'C:UsersAdministratorprojectsDiaryresourcescomplete.wav','music'),],
      name='Diary',  # 这里可以设置可执行文件的名字
      icon='diary.ico',# 设置图标
      debug=False,
      strip=None,
      upx=True,
      console=True ) # 是否开启控制台模式

注意加地址前的r以及行尾的逗号,更新过spec文件后,再重新打包只需要执行pyinstaller start.spec 就可以了。

 

三、添加图标

 

图标的设置有两种方式,一种是在执行打包命令时加入下面这句:

--icon=xxx.ico

 

第二种(推荐)是用文本编辑器或记事本打开执行打包后文件夹内新生成的xxx.spec文件,然后在exe =()中加入一行:

icon = ’xxx.ico‘

(见上面的代码第八行)

xxx.ico 为你要设置的图标文件,其他格式需要转换成ico格式,可在这里在线转换。

(图标文件要放在程序根目录下)

 

四、其他

 

  1. 64windows上打包的程序不能在32位上运行,反之却可以。
  2. 每次更改完代码或是spec文件,只需要再重新执行一下pyinsyaller start.spec -F就可以了

 

五、替代品

 

如果pyinstaller没有解决你的问题,那么你可以尝试一下下面这两个替代品:

py2exe

cx_Freeze