2025 独立开发者训练营:AI Agent!查看介绍 / 立即报名 →

博客

宁皓网界面的几处改进

在课程的视频页面,如果您还没登录,会显示一个登录的区块,还有一个视频的截图。登录以后,会把你重定向到当前访问的这个视频页面,如果您是会员,会在这个页面上显示出视频的播放器。

实现这个功能,我用的是 Drupal 的区块, 登录区块是 Drupal 自带的,只是调整了一下样式。右边的截图是由 Views 生成的一个区块,在这个区块上,会去判断当前的内容的 id 号来显示正确的视频截图。

ninghao-new-element_02

8月12日12点的时候要维护下网站

简单的改进一下。到时需要关掉网站,大伙早点休息吧 :)

2014.08.12 04:45 更新

刚整好,修改了几个页面的显示。现在我是把所有要做的修改写在一个笔记里面,对着笔记再去改网站,应该去找一下更好的维护网站的流程。drush + git ?

2014.08.12 09.38 更新

处理特定的内容列表

这次修改用到了一些小技巧,比如你想根据一个特定的条件,对一个内容列表进行处理,比如修改这个内容列表的字段的值,我们可以先去创建一个可以修改字段值的 Rules ,然后再去用 VBO 模块生成一个要处理的列表,接着对这个列表应用之前创建的 Rules 。

搜索并替换数据表

如果你想直接处理数据库里的东西,比如搜索某个表里的某个字段的值,把它替换成特定的值,可以使用下面的形式:

可以使用搜索了

宁皓网终于有了搜索功能,你可以搜索课程,视频,还有博客,搜索的结果会分组显示。没有添加复杂的搜索功能,比如实时搜索,切面搜索等等。因为咱们还是一个小网站,内容不多,一个简单的搜索结果页面完全可以让你找到你想要的东西。

这个搜索功能用到了 search api,一个用在 Drupal 上的非常灵活的搜索模块。搜索的后台用到了 elasticsearch,很多大牌也在用她作为搜索的后台,比如 github,xing,soundcloud,wordpress,mozilla ... 当然也有很多像宁皓网这样的小牌也在用。

刚刚添加的搜索功能,没有经过多少测试,所以,对她温柔一点 :)

360 浏览器的安全提示

已经申诉了,看看有没有结果,上帝保佑 :)

2014.07.17,20:35 更新

今天在群里有几个朋友反应说在访问宁皓网的时候,360 浏览器提示宁皓网是高危网站。我搜索了一下,webscan.360.cn 这个地址可以扫描网站的问题,的确提示被挂了木马,不过我检查了一下网站,没有发现什么异常,又搜索了一下可疑的文件,也没什么异常。那个提示是挺吓人的,会弹窗提示,建议关掉正在访问的网站,而且再访问其它的购物网站时,还会提示您之前访问的 ninghao.net ,xxx 小心注意。群里有人说,要给 360 交点保护费,不过我搜了半天,也没看到哪里可以交这个钱。现在我想,360 应该也不会看上这样的小网站。

现在问题解决了,在确定网站本身没有问题以后,可以向 360 提出申诉。

15:42 申诉
19:48 申诉处理完成

使用 Vagrant 搭建本地开发环境的教程

你在本地搭建了一个开发环境,可能是为 php 准备的,你在这个本地的开发环境上面做了一个项目,当你把它迁移到真正的服务器上的时候,你发现了一些问题。这很可能是因为你的本地开发环境与服务器的生产环境之间是有区别的。慢慢地,你又想试一下 node ,因为它跟 JavaScript 的关系不错。或者又对 ruby 产生了兴趣,只因为她有个好听的名字。尝试这些你都需要去安装一些软件,去配置它们的运行环境,你越来越发现,管理这些环境可能会是个问题。

Vagrant 可以让你为每个项目都创建一个虚拟机,你可以选择虚拟机运行的操作系统,去配置需要的环境,比如安装 Web 服务器,数据库管理系统等等。项目的目录可以放在你的电脑上,它会跟虚拟机上的一个目录同步。你的电脑与虚拟机之间可以相互访问,所以,你可以像往常一样,用自己喜欢的编辑器去开发 Web 应用,然后用虚拟机上配置好的环境去运行你的项目。使用 Vagrant,你可以在本地电脑上用虚拟机去配置一个跟 Web 应用的生产环境一样的环境,一样的操作系统,一样的软件,一样的配置。你还可以与团队里的其他成员分享你的开发环境,

《Bootstrap 3 基础教程》移动优先的前端框架

bootstrap3-book-cover

两年前,我们发布了第一个 Bootstrap 框架的课程,介绍了 Bootstrap 2 的基本用法。今天咱们再一起学一下 Bootstrap 3 ,相比第二个版本的 Bootstrap,做了很多改进,Bootstrap 3 是一套移动优先的前端框架。移动优先就是,设计的所有的样式默认都会应用到移动设备上,然后在设计里,利用媒体查询,一步一步的增加对于其它尺寸设备的设计。

JavaScript 应用开发 #7:删除任务

把鼠标放在任务项目的上面,会在任务标题的右边,出现一个删除的按钮,点击这个按钮,可以删除掉对应的任务。实现这个功能, 需要在任务模型的模板上面添加一个按钮元素,然后去监听这个按钮元素的点击事件,发生点击事件以后,去执行模型的 destroy 方法,把模型删除掉。

在任务项目上添加删除按钮

先打开应用的主页 index.html ,然后找到定义任务模板的地方(#item-template),添加下面这行代码:

<button class="destroy"></button>

一个 button 标签,上面加上了一个叫 .destroy 的 css 类,在应用的样式表里,已经为这个类定义好了一些样式,一会儿我们也要用到这个类来定义这个元素。现在,任务的模板看起来像这样:

一只毛毛狗

IMG_4870

前两天,我带小雪去办些手续,这些事,一般都是她跑,我只是扮演个司机角色,通常开的还是两个轮子的电动车。我在一旁等她,她来来回回要跑几个地方,一转眼,我看到她站在路边儿,手里拿着一只毛毛狗,站了一会儿,又钻进一间屋子里。

在吃晚饭的时候,小雪把我们的闺女放到婴儿车里,停在自己的身边儿,自己吃几口,再去摇摇车子。我转过头,看到她手里拿着一只毛毛狗,笑嘻嘻地,用毛毛狗左右撩过闺女的小脸蛋。晚饭以后, 我在桌子旁边的垃圾桶里,找到了这只毛毛狗,把它夹在一个笔记本里。

上面的这几个场景,会经常在我脑子里出现。今天我又看到了这只夹在笔记本里的毛毛狗。

JavaScript 应用开发 #6:编辑任务

QQ20140618-5

双击任务的标题,会显示一个用来编辑这个任务的文本框,在这个文本框里面,已经填写好了当前任务的标题的内容,用户可以编辑任务的标题,完成以后,按下回车键,或者点一下其它的地方,可以保存对任务标题的修改。实现这个编辑任务的功能,可以这样:

  1. 在任务模型的模板里面添加一个包含任务标题的文本框,默认把它隐藏起来。
  2. 双击任务标题后,隐藏任务标题,再把用来编辑任务的文本框显示出来。
  3. 按下回车键或点击其它的地方,都会触发相应的事件,去监听这些事件。
  4. 得到在编辑任务的文本框里面的内容,并且把它保存起来。

JavaScript 应用开发 #5:为完成的任务添加样式

判断一下任务的状态,如果是完成的任务,可以在任务项目的上面,添加一个额外的 css 类,在这个 css 类里,可以去定义完成的任务的样式。比如,把文字的颜色变成浅友色,并且在文字上面添加一条删除线。这些样式,已经在应用的样式表里定义好了,放在了一个叫 .completed 的 css 类里面。下面,我们要做的就是把这个类添加到是完成的状态的任务项目上去。

要解决的问题

  1. 怎么样得到模型的属性的值。
  2. 怎么样为模型添加合适的 css 类。
  3. 怎么样在任务模型的完成状态发生变化时,立即更新任务项目的显示。

得到模型的属性的值,用的就是模型的 get 方法。这里我们要得到的是模型的 completed 属性的值,如果它的值是 ture ,就在这个模型上面去添加一个 .completed 类,如果是 false ,如果在任务项目上有 .completed 类,就从任务项目上面去掉这个 .completed 的 css 类。

微信好友

用微信扫描二维码,
加我好友。

微信公众号

用微信扫描二维码,
订阅宁皓网公众号。

240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点