【基础篇】3、设计制作你的 HTML 主题文件

这已经好多天没有写文章了,最近我的 wlan 账号出了一点问题,所以这些天我没怎么上网。今天宿舍网线终于扯上了,又有网可以上了。

新学期的食堂饭菜又贵了,一般贵个五毛或者一块,没有涨价的,质量下降了。今天中午吃的面,4 块的,量只有去年 3 块 5 的,加的料子根本没有多少,去年直接加 1/4 多。坑爹啊,再也不在那吃了。没钱吃饭了,吃饭就吃穷了。无语。好了,牢骚发完了,看文章

================================================

制作主题之前,你必须使用 HTML 和 CSS 来制作出一个模板,确定博客主题的整体风格。这样,需要你有一定的 HTML 和 CSS 基础。

在这里,为了教程演示,潜行者 m 制作了一个比较简单的小模板,结构简单、CSS 样式也不多,方便新手学习,下面简单说一下模板的结构以及重要的 CSS 样式,仅供新手学习。如果你有一定的 HTML 和 CSS 基础,可以略过这一部分。如何制作模板网页,如果新手的话,可以稍微看一下我的这篇文章 网页设计的一般步骤

模板文件结构

新建一个文件夹,命名为 “myTheme” 。在里面要添加至少两个文件,一个是 index.html 另一个是 style.css 。此外,为了之后的制作,我们还应当添加两个文件夹,分别是 /images 和 /js ,分别用来存放主题需要的图片和 Javascript 文件。

模板文件内容

我做了一个比较简单的模板,具体演示效果如下图

现在还没有添加任何的数据,只是一个大体的框架,在下面我将会添加数据,然后整体效果就会出来了。

这个文件在文章后面可以下载到。

为模板添加模拟数据

从上图大家就可以看到各个部分的功能等。下面,我要在模板中添加模拟数据,之后使用 CSS 对其进行外观定义。之后,我们就可以对照数据,添加 WordPress 相应的调用数据的函数,完成主体制作。

添加模拟数据,并且定义了外观 CSS 之后的模板文件如下图

在下图中,我对添加的数据作了一个说明

这样,我们的模板文件就算是做好了,对应数据以及相应的 CSS 都已经编写好了。你现在已经看到了一个简单的博客页面。根据前面说的 WordPress 的大体制作步骤,我们现在只需要使用相应的函数调用相应的数据就可以了。

其他问题



我是新手,不会做这种模板怎么办?

1. 制作主题等,需要一定的 Html 和 CSS 基础,如果你没有基础,请寻找相应资料,先学习一下 Html 和 CSS ,否则后面的学习会比较吃力。
2. 你也可以在网上下载 Html 模板或者下载我做好的教程模板,先不管如何去设计制作模板,先使用现有资源进一步学习。

本节课相关资源下载

myTheme 模板文件下载地址 : >>点击这里

之前的系列文章

  1. 开始执行的 wordpress 主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
  3. 【基础篇】2、WordPress 的主题机制

【基础篇】2、WordPress 的主题机制

在制作 WordPress 主题之前,先要大体了解一下 WordPress 的主题机制,这样才能将自己设计的 HTML 模板等,转换成 WordPress 所能识别的主题文件。在这篇文章中,有一些概念会比较抽象,在随后的教程中,你会亲身感受到这些概念,就明白了。所以,你只需要记住下面三个大标题即可,如果不懂不用怕,在后面的基础教程中,你会理解的。

经过潜行者 m思考总结,WordPress 主要有以下三个显而易见的主题机制:函数调用数据机制缺失文件替换机制分离文件分块调用机制

一个 WordPress 主题默认的文件目录

这是来自官方的说明,一个主题中需要包含以下文件。当然对于新手和比较简单的模板,我们并不需要设计生成这么多的文件,如果做比较专业的主题,则需要设计生成更多的文件,这个将会在【中级篇】的文章中深入介绍。

  • 404 错误页 = 404.php
  • 存档页 = archive.php
  • 存档索引页 = archives.php
  • 评论页 = comments.php
  • 底部 = footer.php
  • 头部 = header.php
  • 链接 = links.php
  • 首页 = index.php
  • 静态页 = page.php
  • 弹出式评论页 = comments-popup.php
  • 单篇博文页 = single.php
  • 搜索表单 = searchform.php
  • 搜索 = search.php
  • 侧栏 = sidebar.php
  • 样式表 = style.css

函数调用数据机制

首先你要明白,一个主题,要展示输入的文章等数据,它会需要一种代码来从数据库中提取数据,然后结合你自己编写的 HTML 文件,生成供浏览者观看的页面。

在 WordPress 中,官方团队为你写好了一系列的数据调用函数,使用这些函数以及相应的参数,就可以调用相应的博客数据并且显示出来。这样,当我们设计好了我们的 HTML 模板之后,只需要在相应的地方,加上调用相应数据的函数,就可以显示出来了。

在随后的教程中,我们就会遇到那些常用的函数,以及函数的参数和使用方法、效果。

缺失文件替换机制

从上面的标准主题的文件列表里面,我们可以清晰的看到每个文件都有每个文件的功能,例如 sidebar.php 是边栏文件; single.php 是用来显示文章的文件。同时,潜行者 m还说了,如果是比较简单的主题,并不需要这么多的文件。这里,你会不会产生一种疑问:如果缺少了某个功能文件,WordPress 会怎样处理?

这就是 WordPress 的缺失文件替换机制要处理的。WordPress 主题里面,最重要的只有两个文件:index.php、style.css 这两个文件。一个是模板文件,另一个是 CSS 定义样式用的。而其他的 single.php 等文件,则是 index.php 的下级文件。WordPress 发现没有相对应的功能文件(例如显示文章的 single.php),它就会使用上级文件来代替显示缺失文件的内容(缺失 single.php,就使用 index.php 来显示文章内容)。

具体关系如下图:

分离文件分块调用机制

制作主题的时候,通常先制作 index.php 文件,来做出整体的效果。做完 index.php 文件之后,我们通常会把顶部的信息、边栏、底部的信息,分离出来,分别生成 header.php、sidebar.php、footer.php 这三个文件。之后,在 index.php 以及其他的主题文件中,使用相应的函数来调用这三个文件。

为什么?因为头部、边栏和底部的内容,通常是不变化的,变化最多的就是博客的主体。所以将这几块分离出来,提高代码的重用,同时也提高修改和二次开发的效率,这点是非常科学的,你将会慢慢体会到。

本节课的总结

通过本节课,我们了解到了 WordPress 主体的标准文件列表,同时我们了解了三种 WordPress 的主题机制。其中,缺失文件替换机制,让我们了解到,比较简单的模板,并不需要设计生成标准文件列表里面的文件,我们只需要设计主要的文件即可,因为缺失的其他功能文件,WordPress 系统会使用 index.php 的文件内容来显示。所以,在【基础篇】,我们要做的主题文件列表如下:

  • index.php = 主体文件
  • header.php = 头部文件
  • sidebar.php = 边栏文件
  • footer.php = 底部文件
  • single.php = 文章显示文件
  • page.php = 页面显示文件
    同时,我们还确定了我们制作主题的大体流程:
  1. 制作 index.html 和 style.css 文件,确定主题的整体风格。
  2. 放入 WordPress 主题目录中,修改成 index.php。
  3. 对 index.php 进行文件分割,分离出内容不变的 header.php、footer.php、sidebar.php 文件。
  4. 由 index.php 文件,生成 single.php 文章页面,并进行简单改造。
  5. 由 single.php 文件生成 page.php 文件,因为文章和页面的布局比较像。
  6. 在各种主题文件中,插入 WordPress 数据调用函数,然后显示博客数据。
    随后的【基础篇】教程,潜行者 m将围绕这几个大体流程来依次讲解,直到最后做出一个比较简单的主题。

之前的系列文章

  1. 开始执行的 wordpress 主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
     

【基础篇】1、学习制作主题之前的准备

我学习主题制作的过程

最初学习 WordPress 主题制作的时候,需要一整套比较完整,比较全面的教程。经过搜索找到了由水煮鱼博客翻译的国外wordpress主题制作教程。第一遍看的时候,比较枯燥难懂,也是因为当时的 CSS、PHP 水平比较底下,导致没有耐心看下去。过了一段时间,决定彻底攻克下来,于是下定决心花了一天时间看完了。随后根据教程中讲解的,一遍实践下来,就了解的差不多了。过了几天,就按照自己的思路做出了自己第一个主题。

所以总结一下,学习主题制作教程需要两点

  1. 一点点 CSS、PHP、HTML 基础。没有基础比较吃力
  2. 找一套完整的教程,彻底学完,并且动手实践。
    水煮鱼博客的 WordPress 主题制作教程非常不错,很多人都是靠它入门的,但是也有一些缺点

  3. 老外写的,思想的差异,你懂的。

  4. 07年的,已经过时了,有些函数貌似被抛弃了。
  5. 翻译的,部分晦涩难懂,源代码的注释是英文。
    所以我打算根据自己这几个月来的主题制作得到的经验,重新补充升级一下。

搭建本地环境

在这里,我默认你的电脑系统为 Windows 系列,我们需要在本地搭建 PHP 环境。你可以选择一些整合的傻瓜安装包,但是如果你想多研究一下 PHP 的话,我还是建议分别安装 PHP、Apache、Mysql 然后配置一下。傻瓜化的安装步骤请移步本人这篇文章:本地搭建配置apache+php+mysql环境

搭建好本地系统之后,需要安装 WordPress ,这是废话,你懂的。

我有服务器,为什么还要自己本地安装?

  1. 在本地读取文件、加载速度快,不受网络限制。
  2. 直接修改文件刷新即可,不需要一遍遍的上传文件、覆盖、访问。
    当然,你不怕麻烦,也可以上传远程服务器。

文本编辑类工具

  • 记事本:小巧默认,但是编码、代码高亮功能不行,不推荐新手使用。
  • EmEditor:编码比较好,但是对代码段的处理不太好,而且是收费的,不过在中国免费,你懂。
  • NotePad++:推荐,本人目前就在用这个,无论从代码高亮、代码段等的处理,都比较好,免费开源。
  • Dreamweaver:推荐新手使用,可以帮你自动完成很多代码,不过有种受限的感觉。
    其他的开发环境,用也行,不过制作主题来说,有点大材小用。

浏览器类

  • Firefox & FireBug :推荐,做 Web 相关的东西,必不可少。
  • IEtest : 做IE兼容测试,如果你需要的话。
  • Chrome:做兼容测试。
  • Opera:做兼容测试。

制作主题的大体流程

  1. 思考并设计好你的主题样式。
  2. 制作出 HTML 页面,即大体的风格。
  3. 根据 WordPress 的主题机制等,进行改造。
    完成。

学习重点

  1. WordPress 的主题机制,以及相关技巧。

对于新手来说

你只需要准备一下两个东西就可以了

  1. Dreamweaver (推荐使用 8)
  2. xampp (一键搭建环境,搜索一下非常多)
  3. FireFox (浏览器,用来查看效果)

本人用到的工具

  1. NotePad++
  2. FireFox

之前的系列文章

  1. 开始执行的wordpress主题教程计划
     

 

台风过后的人生思考

最近的台风也过去了很久了,这篇文章当然不是介绍台风这个事件,而是我昨天返校中,见到的台风过后的场景,然后得到的感悟,与大家分享一下。

本人家在县城,周围的树比较小,楼房比较多。当时台风过后,也没有出去看,听妈说路上很乱很多被吹到的树,正在清理。几天之后,我出去,发现跟以前没有什么变化,所以对于台风的破坏了解的并不是那么的充分,只是知道有一些树被吹倒压倒房子砸死了人。直到昨天坐车返校看到了郊区的尚未清理的情况,我这才亲身感受到了台风的破坏力。

具体的体现就是树的形态。

大部分的树,都被吹弯了,很平滑的吹弯了,而且直不起来了。郊区有种树的,一整片树林,都成平的了,倒下的树木东倒西倒成为一片。也有不少压在房子上。

当然还有很多树并没有被风吹到,这时候,我就开始观看这些树的特点,这些树为什么仍然屹立不倒?!经过观察,有以下三个特点的树没有被吹到。

树木的外观

1,高大强壮的树。

这类树强壮,能够抵御狂风的侵袭,这点不用多说了。

2,柔弱的小树。

这种小树比较柔软,而且树叶比较小,风吹起来,受力较少,韧性也不错,所以虽然被风吹弯了,但是还可以直起来。

3,被高大强壮的树包围的中等高度的树林

有的树林周围被种上了高大强壮的树,而这片树林整体就免遭狂风侵害了。

而被吹弯的树,特点就是正在成长中的中等树,比较细、比较高、树叶比较多,生长比较旺盛。

那我们可以收获什么感悟呢?

收获的感悟

放在技术的角度上,在技术的狂风中

  1. 你可以努力学习,变成一位强壮的大树,成为某一个领域的专家,技术大牛。
  2. 如果你无法做到第一条,也可以放下姿态,虚心求教,不懂就问,表现出你的柔弱,也是可以不断成长。
  3. 当然,你也可以接受技术大牛的庇护,跟着他们混、跟着他们学习,让他们带着你打怪升级,也是不错的。
  4. 不太好的就是那种无法看清楚自己的实力,却在装大师,这种只会被耻笑。
    放在职场上,在职场的狂风中

  5. 强势到极端,强大到无法被别人摧毁,别人就只好俯首称臣。

  6. 无法十分强势,就表现出你的柔弱,告诉强势的人,你是一个柔弱的人,你对他没有威胁性。
  7. 不太好的就是那种不软不硬,强硬却无法很强硬,又不是很柔软,结果就被狂风吹倒。
    你觉得呢?

开始执行的wordpress主题教程计划

在几个月前,我制作出属于自己的模板的时候,就开始打算编写一系列的wordpress主题教程。写过几篇教程,结果感觉系列文章的结构比较混乱,而且当时的技术并不是很成熟,最终只写了几篇文章,就决定停下来,等技术比较成熟之后,再写。

目前来说,技术要比几个月之前成熟了很多,看到wordpress论坛对这个教程的需求比较大,准备在这段时间内,完成这个系列的文章的写作。目前已经列出了如下的大纲:

基础篇

基础知识,初步了解wordpress主题的机制,学会使用函数调用数据

学习制作主题之前的准备(各种工具 开发环境 编写工具)
 wordpress的主题机制 > (函数机制 文件替换机制 头边栏底部分离调用机制 )
 制作主题的大体流程 > (先index.php 做出整体效果,然后分解成其他页面添加函数)
 制作头部header > (如果添加js css链接,以及相关函数,wordpress常用的文件头等)
 使用主循环制作日志列表和日志信息 > (主循环的原理,以及使用相关调用数据的函数)
 编写搜索模块的代码 > (标准的引入搜索框等)
 制作边栏sidebar > (添加weight 具体模块留到中级篇)
 制作底部footer  > (添加版权信息等等)
 制作文章显示页面  >(在文章显示页面调用文章信息的函数 文章版权显示)
 制作文章底部评论模块  >(如何去制作文章底部评论模块)
 由现有文件生成其他文件  >(生成其他文件page.php等)

中级篇

在基础篇的基础之上,讲解wordpress正规主题的制作方法,已经需要注意的地方,常见的博客元素 可以借鉴官方文档

回顾制作主题的大体流程
 思考并确认你的设计方案(主色调 结构 功能 版面)
 制作一个符合标准的头部header (设计 等
 设计你的导航链接nav (添加自定义菜单等
 展示文章摘要及其信息 (调用特色图片
 显示文章列表页面页码信息(那个分页函数
 自己定义边栏的输出文章(各种边栏调用函数
 在主循环中输出文章相关信息
 对各种文章中用到的标签进行合理的排版
 添加自定义字段功能
 添加管理员菜单功能
 添加边栏工具条方便浏览者操作
 制作更加复杂高级的评论模块
 再由现有文件生成其他文件

高级篇

收集各个有关wordpress主题制作的高级技术文章,高级技巧等

各种wordpress使用技巧
各种wordpress功能添加技巧
各种可以使用的资源
各种小功能

平均每天一篇,大约写作1-2个月,到时候会制作成chm格式的电子书。希望大家关注和支持,让我坚持努力写出来。

设计中默认样式的强大威力

默认样式,就是最原生态的样式。就像大家经常用的按钮或者蓝色有下划线的超链接。本文,潜行者 m 将从两个元素来讨论默认样式在设计中的应用。

超链接的默认样式

超链接的默认样式 超链接是网页中最常用最基础的元素,可以说是必不可少的。我们设置超链接,也是希望人们去点击,去使用它。那么我们拿什么让人们知道,这是一个超链接呢?你可以在旁边说,这里有个超链接,快来点击我。但是,当人们看到这几个字的时候,是需要思考的,实际情况下,人们是不想思考的。所以,我们设计的目的,就是让人们一看上去,就觉得这是一个可以点击的超链接。这里几个超链接,我分别为他们加上了样式,请看下图:

请你告诉我,这里面究竟哪一个才是可以点击的超链接?很显然,第一个超链接是默认样式,这种蓝色下划线的样式,已经深入人心,任何一个经常上网的朋友,看到这个就知道它是一个可以点击的超链接。但是有个非常明显的问题,这种蓝色下划线的样式实在是太丑了。而且和我的设计风格不相似。那么,我们就可能会考虑后面三种。

现在,我们的任务就变成了,如何让后面的这三个超链接,变得让人以为这是一个可以点击的超链接。这时,我们需要结合具体的文境来说。请看下面这张图,我已经把上面这三个超链接加入了文章中:

这是比较常见的文章环境,当超链接在文章中时,我们就会发现一些东西。现在请你告诉我,这四个链接的位置以及究竟哪一个链接可以点击?很显然,第一个下划线的可以点击。然后红色、蓝色链接也可以轻易找到,但是黑色的却不见了。因为它的样式和文章的一样。

当我们抛开第一个,请你再告诉我,究竟哪个是可以点击的超链接?很显然,是红色后面的蓝色超链接,因为蓝色是超链接的默认颜色,是标志性的颜色,所以我们会认为蓝色是可以点击超链接。如果排除蓝色链接,你还会点击什么?这时候,你会发现文中突然黑字里面出现了一个红色超链接。这是你的大脑会进行短暂的思考,这个红色超链接是什么,为什么别的都是黑色的,它是红色的?它是不是有特殊的功能,是不是可以点击?要不我把鼠标移动上去,看看吧。

当我们把鼠标移动上去之后,发现鼠标变成了小手状,红色还变了色,而且还加了下划线。OK,这个就是可以点击的超链接了。

至于黑色超链接,潜行者 m 就直接找不到了,碰巧鼠标移动到什么,可能会变成小手。但是一般人是无法注意到了。

通过这个案例,我们可以分析出,超链接应当如何定义:

  1. 尽可能的使用默认的蓝色,甚至加上下划线。如果与风格不符,请使用与其他文字差别较大的色彩来表示,这是一段与众不同的文字,它有特殊的含义。
  2. 当鼠标移动上去的时候,请定义:hover,让其进行变色,并且加上下划线,因为这是一个超链接默认的样式,经过这样处理之后,能够让人深信不疑的认为这是一个超链接。
  3. 如果你无法合理的配色或者你的作品无法使用多种色彩,请尝试让字体变大或者变小或者倾斜,让超链接变得与众不同,这样就会让人产生疑问。
  4. 如果你无法比较合理的完成上面三条,请不要使用默认样式。

按钮的默认样式

按钮也是使用比较广泛的网页元素,通常用于表单提交,或者其他需要点击的地方。通常有以下三种形式的定义

第一种就是默认情况下的,而第二种只是简单的个边框,使其去掉默认样式平面化,第三中则可以代表使用图片背景的自定义按钮。

当你第一眼看到这三个按钮的时候,很显然,第一个是最想按钮,并且可以让人产生点击欲望的按钮。除了第一个之外的后面两个呢?这里需要注意一下,第三个是有一个变色处理的,当鼠标移动到上面,会变成这样:

默认的按钮样式以及满足不了我们网站的风格,所以我们目前的任务,就是让后面两个按钮,变得像可以点击的按钮。我们主要来分析一下,为什么后面两个按钮不像前面那个可以点击的按钮,有什么特点和区别。

1,外观要像一个按钮,其中第三个要比第二个更像按钮,因为它是圆角、椭圆形的,它要比直来直去的方框更容易给人以按钮的感觉。

2,要有 3d 突出感,按钮是一个突出的东西,给人一种 3d 突出的感觉更让人容易相信这是一个可以点击的按钮,例如淘宝购买按钮

可以通过添加阴影或者渐变等,制造这种突出的效果。

3,要有变换特效,及时的和浏览者沟通,告诉他们,这是一个可以点击的按钮。

4,如果你的设计,无法很好的完成上面说的三点,请使用默认样式。

ThinkSAAS 常用数据表结构

本文仅列出开发ThinkSAAS app比较常用的数据表结构,这样,可以方便构造sql语句,对数据库的信息进行操作。

ts_article =>文章列表

+—————+————+——+—–+———————+—————-+
| Field | Type | Null | Key | Default | Extra |
+—————+————+——+—–+———————+—————-+
| articleid | int(11) | NO | PRI | NULL | auto_increment |
| userid | int(11) | NO | | 0 | |
| cateid | int(11) | NO | | 0 | |
| title | char(64) | NO | | | |
| content | text | NO | | NULL ||
| path | char(32) | NO | | | |
| photo | char(32) | NO | | | |
| isaudit | tinyint(1) | NO | | 0 | |
| isrecommend | tinyint(1) | NO | | 0 | |
| count_comment | int(11) | NO | | 0 | |
| addtime | datetime | NO | | 0000-00-00 00:00:00 | |
| isrecommend | tinyint(1) | NO | | 0 ||
| count_comment | int(11) | NO | | 0 ||
|addtime | datetime | NO | | 0000-00-00 00:00:00 |
+—————+————+——+—–+———————+—————-+

ts_article_cate =>文章目录

+———-+———-+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+———-+———-+——+—–+———+—————-+
| cateid | int(11) | NO | PRI | NULL | auto_increment |
| catename | char(16) | NO | | | |
| orderid | int(11) | NO | | 0 | |
+———-+———-+——+—–+———+—————-+

ts_article_comment =>文章评论

+———–+———+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+———–+———+——+—–+———+—————-+
| commentid | int(11) | NO | PRI | NULL | auto_increment |
| articleid | int(11) | NO | | 0 | |
| userid | int(11) | NO | | 0 | |
| content | text | NO | | NULL | |
| addtime | int(11) | NO | | 0 | |
+———–+———+——+—–+———+—————-+

ts_group =>小组列表

+——————-+————+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+——————-+————+——+—–+———+—————-+
| groupid | int(11) | NO | PRI | NULL | auto_increment |
| userid | int(11) | NO | MUL | 0 | |
| cateid | int(11) | NO | MUL | 0 | |
| cateid2 | int(11) | NO | | 0 | |
| cateid3 | int(11) | NO | | 0 | |
| groupname | char(32) | NO | MUL | | |
| groupname_en | char(32) | NO | | | |
| groupdesc | text | NO | | NULL | |
| path | char(32) | NO | | | |
| groupicon | char(32) | NO | | | |
| count_topic | int(11) | NO | | 0 | |
| count_topic_today | int(11) | NO | | 0 | |
| count_user | int(11) | NO | | 0 | |
| count_topic_audit | int(11) | NO | | 0 | |
| joinway | tinyint(1) | NO | | 0 | |
| role_leader | char(32) | NO | | ?? | |
| role_admin | char(32) | NO | | ??? | |
| role_user | char(32) | NO | | ?? | |
| addtime | int(11) | YES | | 0 | |
| isrecommend | tinyint(1) | NO | | 0 | |
| isopen | tinyint(1) | NO | | 0 | |
| isaudit | tinyint(1) | NO | | 0 | |
| ispost | tinyint(1) | NO | | 0 | |
| isshow | tinyint(1) | NO | MUL | 0 | |
| ispostaudit | tinyint(1) | NO | | 0 | |
| uptime | int(11) | NO | | 0 | |
+——————-+————+——+—–+———+—————-+

ts_group_cates =>小组分类

+————-+———-+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+————-+———-+——+—–+———+—————-+
| cateid | int(11) | NO | PRI | NULL | auto_increment |
| catename | char(32) | NO | | | |
| referid | int(11) | NO | MUL | 0 | |
| count_group | int(11) | NO | | 0 | |
| uptime | int(11) | NO | | 0 | |
+————-+———-+——+—–+———+—————-+

ts_group_options =>小组配置

+————-+———–+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+————-+———–+——+—–+———+——-+
| optionname | char(12) | NO | PRI | | |
| optionvalue | char(255) | NO | | | |
+————-+———–+——+—–+———+——-+

ts_group_topics =>小组帖子

+—————+————–+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+—————+————–+——+—–+———+—————-+
| topicid | int(11) | NO | PRI | NULL | auto_increment |
| typeid | int(11) | NO | MUL | 0 | |
| groupid | int(11) | NO | MUL | 0 | |
| userid | int(11) | NO | MUL | 0 | |
| appkey | char(32) | NO | | group | |
| appname | char(32) | NO | | ?? | |
| appaction | char(32) | NO | | topic | |
| appid | int(11) | NO | | 0 | |
| title | char(64) | NO | MUL | | |
| content | text | NO | | NULL | |
| thread_type | char(16) | NO | | | |
| path | char(32) | NO | | | |
| photo | char(32) | NO | | | |
| photoshow | tinyint(1) | NO | | 0 | |
| attach | char(32) | NO | | | |
| attachname | char(64) | NO | | | |
| attachshow | tinyint(1) | NO | | 0 | |
| attachscore | int(11) | NO | | 0 | |
| music | varchar(512) | NO | | | |
| video | varchar(512) | NO | | | |
| count_comment | int(11) | NO | | 0 | |
| count_view | int(11) | NO | | 0 | |
| count_love | int(11) | NO | | 0 | |
| istop | tinyint(1) | NO | | 0 | |
| isshow | tinyint(1) | NO | | 0 | |
| isclose | int(4) | NO | | 0 | |
| color | int(4) | NO | | 0 | |
| iscomment | tinyint(1) | NO | | 0 | |
| isposts | tinyint(1) | NO | | 0 | |
| isaudit | tinyint(1) | NO | | 0 | |
| addtime | int(11) | YES | | 0 | |
| uptime | int(11) | NO | | 0 | |
+—————+————–+——+—–+———+—————-+

ts_group_topics_comments =>小组主题评论

+————+———-+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+————+———-+——+—–+———+—————-+
| commentid | int(11) | NO | PRI | NULL | auto_increment |
| referid | int(11) | NO | MUL | 0 | |
| topicid | int(11) | NO | MUL | 0 | |
| userid | int(11) | NO | MUL | 0 | |
| content | text | NO | | NULL | |
| path | char(32) | NO | | | |
| photo | char(32) | NO | | | |
| attach | char(32) | NO | | | |
| attachname | char(64) | NO | | | |
| addtime | int(11) | YES | | 0 | |
+————+———-+——+—–+———+—————-+

ts_group_users =>小组成员

+———–+————+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+———–+————+——+—–+———+——-+
| userid | int(11) | NO | PRI | 0 | |
| groupid | int(11) | NO | PRI | 0 | |
| isadmin | int(11) | NO | | 0 | |
| isfounder | tinyint(1) | NO | | 0 | |
| addtime | int(11) | NO | | 0 | |
+———–+————+——+—–+———+——-+

ts_photo =>照片列表

+————-+————+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+————-+————+——+—–+———+—————-+
| photoid | int(11) | NO | PRI | NULL | auto_increment |
| albumid | int(11) | NO | | 0 | |
| userid | int(11) | NO | | 0 | |
| photoname | char(64) | NO | | | |
| phototype | char(32) | NO | | | |
| path | char(32) | NO | | | |
| photourl | char(120) | NO | | | |
| photosize | char(32) | NO | | | |
| photodesc | char(120) | NO | | | |
| count_view | int(11) | NO | | 0 | |
| isrecommend | tinyint(1) | NO | | 0 | |
| addtime | int(11) | NO | | 0 | |
+————-+————+——+—–+———+—————-+

ts_photo_album =>相册列表

+————-+————–+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+————-+————–+——+—–+———+—————-+
| albumid | int(11) | NO | PRI | NULL | auto_increment |
| userid | int(11) | NO | MUL | 0 | |
| path | char(32) | NO | | | |
| albumface | char(64) | NO | | | |
| albumname | char(64) | NO | | | |
| albumdesc | varchar(400) | NO | | | |
| count_photo | int(11) | NO | | 0 | |
| count_view | int(11) | NO | | 0 | |
| isrecommend | tinyint(1) | NO | MUL | 0 | |
| addtime | int(11) | NO | | 0 | |
| uptime | int(11) | NO | | 0 | |
+————-+————–+——+—–+———+—————-+

ts_photo_comment =>照片评论

+———–+———–+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+———–+———–+——+—–+———+—————-+
| commentid | int(11) | NO | PRI | NULL | auto_increment |
| referid | int(11) | NO | MUL | 0 | |
| photoid | int(11) | NO | MUL | 0 | |
| userid | int(11) | NO | MUL | 0 | |
| content | char(255) | NO | | | |
| addtime | int(11) | YES | | 0 | |
+———–+———–+——+—–+———+—————-+

ts_tag =>标签列表

+—————+————+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+—————+————+——+—–+———+—————-+
| tagid | int(11) | NO | PRI | NULL | auto_increment |
| tagname | char(16) | NO | UNI | | |
| count_user | int(11) | NO | | 0 | |
| count_group | int(11) | NO | | 0 | |
| count_topic | int(11) | NO | | 0 | |
| count_bang | int(11) | NO | | 0 | |
| count_article | int(11) | NO | | 0 | |
| count_photo | int(11) | NO | | 0 | |
| isenable | tinyint(1) | NO | | 0 | |
| uptime | int(11) | NO | | 0 | |
+—————+————+——+—–+———+—————-+

ts_system_options =>系统配置

+————-+———–+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+————-+———–+——+—–+———+——-+
| optionname | char(32) | NO | PRI | | |
| optionvalue | char(255) | NO | | | |
+————-+———–+——+—–+———+——-+

ts_user =>用户列表

+———-+———-+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+———-+———-+——+—–+———+—————-+
| userid | int(11) | NO | PRI | NULL | auto_increment |
| pwd | char(32) | NO | MUL | | |
| salt | char(32) | NO | | | |
| email | char(32) | NO | UNI | | |
| resetpwd | char(32) | NO | | | |
+———-+———-+——+—–+———+—————-+

ts_user_gb =>用户留言

+———-+—————+——+—–+———————+—————-+
| Field | Type | Null | Key | Default | Extra |
+———-+—————+——+—–+———————+—————-+
| id | int(11) | NO | PRI | NULL | auto_increment |
| reid | int(11) | NO | | 0 | |
| userid | int(11) | NO | MUL | 0 | |
| touserid | int(11) | NO | MUL | 0 | |
| content | varchar(2000) | NO | | | |
| addtime | datetime | NO | | 0000-00-00 00:00:00 | |
+———-+—————+——+—–+———————+—————-+

ts_user_info =>用户信息

+—————–+————-+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+—————–+————-+——+—–+———+——-+
| userid | int(11) | NO | UNI | 0 | |
| ucid | int(11) | NO | MUL | 0 | |
| fuserid | int(11) | NO | MUL | 0 | |
| username | char(32) | NO | UNI | | |
| email | char(32) | NO | PRI | | |
| sex | tinyint(1) | NO | | 0 | |
| phone | char(16) | NO | | | |
| roleid | int(11) | NO | | 1 | |
| province | int(11) | NO | | 0 | |
| city | int(11) | NO | | 0 | |
| area | int(11) | NO | | 0 | |
| areaid | int(11) | NO | | 0 | |
| path | char(32) | NO | | | |
| face | char(64) | NO | | | |
| signed | char(64) | NO | | | |
| blog | char(32) | NO | | | |
| about | char(255) | NO | | | |
| ip | varchar(16) | NO | | | |
| address | char(64) | NO | | | |
| qq_openid | char(32) | NO | MUL | | |
| qq_access_token | char(32) | NO | | | |
| count_score | int(11) | NO | | 0 | |
| count_follow | int(11) | NO | | 0 | |
| count_followed | int(11) | NO | | 0 | |
| isadmin | tinyint(1) | NO | | 0 | |
| isenable | tinyint(1) | NO | | 0 | |
| isverify | tinyint(1) | NO | | 0 | |
| verifycode | char(11) | NO | | | |
| thems_other | tinyint(1) | NO | | 0 | |
| addtime | int(11) | NO | | 0 | |
| uptime | int(11) | YES | | 0 | |
+—————–+————-+——+—–+———+——-+

ts_user_options =>用户选项

+————-+———–+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+————-+———–+——+—–+———+——-+
| optionname | char(12) | NO | PRI | | |
| optionvalue | char(255) | NO | | | |
+————-+———–+——+—–+———+——-+

这里只包含常用的数据表结构,至于其他的数据表请看这里ThinkSAAS 数据库结构 -> 数据表结构

至于本文中未列出的数据表,请在mysql命令行,使用describe命令查看。

Style.css文件生成工具

此工具正在升级,暂时无法使用看到,待升级完毕,会新发一篇文章!

工具地址:http://labs.qianxingzhem.com/app/csscreater

开发时间:2012-8-10

作者:潜行者m

在制作wordpress主题的时候,我们需要css文件,在标准的wordpress主题中,官方推荐将css文件命名为style.css

在使用主题的时候,我们可以上传安装主题,也可以在线安装。当我们安装好主题的时候,我们会发现会有作者、作者地址、模板介绍等等信息。这些信息是写在style.css文件里面的。只有按照正确的格式,写进style.css文件,我们才能把主题压缩成zip直接上传安装。

本工具的功能就是为了简化这个流程。你只需要填写一个表单,就可以自动生成带有正确格式信息的style.css文件。

当然,不仅仅是输出你输入的wordpress主题版权信息,在style.css文件里面,还附带了一段非常成熟的CSS reset 代码,将元素在不同浏览器中的不同表现一律抹平。如果你不知道为什么使用CSS reset,可以看一下潜行者m的这篇文章:网页设计为什么要使用css reset

同时,还附带了本人常用的css原子类,使用原子类,可以非常容易的进行布局等。关于为什么要使用原子类,可以看一下潜行者m的这篇文章:网页设计中构建并使用原子类

当然,还帮你整理好了结构,因为本人患有代码整理强迫症 ^_^

此外,这个工具也不仅仅可以用于wordpress,你在设计网页的时候,也需要在css文件里面,声明你的作品版权,这个工具就是为了帮助你省略这些工序。

全代码打造简洁美观回到顶部按钮

这次,潜行者m带来一个jquery的比较实用的教程,就是为你的网站添加一个纯代码画出来的、简洁美观的回到顶部按钮。这个按钮的效果就是,当页面滑动一段距离之后,就会浮现出来这个按钮,点击这个按钮之后,就自动滚动到顶部。具体效果如下:

点击之后就会跳转到顶部,然后这个按钮平滑消失。与网上的相比,潜行者m版的是纯代码,加载速度更快,效果色彩控制好;代码精简,只有数条而已,拒绝大坨大坨的代码。废话不多说,下面就开始制作。

html结构

我使用了a标签作为这个结构,可能不太标准,但是比较方便。在a标签中,内置了一个span标签,用来显示三角号。具体代码如下:

<a id=”gotop” href=”#”>
<span class=”gotop-shang”>▲</span>
</a>

对,你没看错,就这么简单的一句代码,直接在a标签中,填写一个三角号。剩下的就是使用css进行样式控制。

css代码

a[id=”gotop”]{
display:block;
width:60px;
height:60px;
position:fixed;
bottom:50px;
right:40px;
border-radius:10px 10px 10px 10px;
text-decoration:none;
display:none;
background-color:#999999;
}

上面这段代码,定义了a标签的外观样式,定义display为block,这样,我们才能指定它的width和height。定义position为fixed,让它固定在右下角。同时为它指定圆角,就是使用border-radius属性,定于半径为10px的圆角。

span{
display:block;
width:60px;
color:#dddddd;
}
span:hover{
color:#cccccc;
}
span[class=”gotop-shang”]{
font-size:40px;
text-align:center;
margin-top:4px;
}

上面这一段,就是定义了span标签里面的三角号,如果你不会打三角号,可以看本人的这篇文章:亲自打造属于自己网站风格的工具边栏,里面有提到这个。这几句代码意思很简单,就是定义了三角号的外观样式,同时制定了颜色变化,这是为了用户体验。最下面的margin-top:4px,则是用来准确定位三角号,让它居中显示。

jquery代码

具体的javascript代码如下,解析已经写在注释里面了:

$(function(){

$(window).scroll(function(){  //只要窗口滚动,就触发下面代码
    var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
    if( scrollt &gt;200 ){  //判断滚动后高度超过200px,就显示
        $("#gotop").fadeIn(400); //淡出
    }else{
            $("#gotop").stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动
    }
});</pre>


$(“#gotop”).click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
$(“html,body”).animate({scrollTop:”0px”},200);
});
});

怎么样,简单吧?就用这几句代码而已,就可以出现这个功能,而且可以方便的修改颜色、形状、大小等。当然缺点也是有的,就是在IE6等过时的浏览器中,可能不会兼容,无法实现。

 

人们究竟怎么去看你博客里的文章

这篇文章是我建博一年多以来一个观察和总结。阅读本文章,你也可以根据你博客的实际情况,对你博客的内容排版等做出调整,更有利于发挥你博客的能力。

首先要说明一点,这里说的博客,并不是生活记录类的博客。因为那类的博客,看的大多是朋友或者家人。这里说的是像潜行者m博客那样的,具有一定方向的博客,写的文章具有一定的应用价值的博客。因为这种博客,才能吸引大量网络上的有这方面需求的人来看。

从网址直接进入

浏览者的想法分析

从网址直接进入的朋友,可以能是记住了,或者是添加到了收藏夹里,也有可能是通过评论,回访进来的。但是就本人的博客而言,首页仅仅显示八篇文章,剩下的就需要继续翻页或者点击标签、目录分类才可以看到。通过这种方式进来的人,通常只会看第一页,仅仅是看到首页里面的八篇文章,而懒的继续点击看其他文章。也有个特例,如果访问者看到你首页的文章质量非常不错,可能就会收藏网站以便下次继续访问,也有可能会点击自己感兴趣的分类,查看更多文章。

解决方法:

  1. 设置醒目的目录链接等,吸引有兴趣的用户点击,这样可以看到更多的相关文章。
  2. 提高文章质量是重中之重,浏览者来看了,但只有文章质量提升上去了,浏览者才会留下来,之后继续观看。
  3. 在文章中增加相关性较强的文章链接,当浏览者观看文章的时候,可以继续看自己感兴趣的文章。

通过搜索引擎进入

浏览者的想法分析

这种方法得到的浏览者质量最好,但是要求博客文章的质量也要好。这一点比较适用于技术类博客,大家在搜索某个函数或者某个插件的时候,前面几个往往是独立博客,针对这个插件的介绍和使用方法等。一般不会有人去搜索某某心情,然后看到你博客上面,写你最近的心情如何。但是,浏览者往往看完文章,学到知识就走人了,而不会去看其他文章。

解决方法:

  1. 在文章的底部等,添加相关文章显示,浏览者可能会发现有很多他喜欢的文章,而继续看下去或者收藏一下。
  2. 提高文章质量,让浏览者明白,你的博客是一个质量非常高的博客,在你博客里,可以学到很多有用的知识。

从外链进入

浏览者的想法分析

这种外链进入,并非是上面说的第一条,这里的外链,主要是指在其他地方发表文章留下的版权链接、他人转载文章留下的原文链接、他人在文章中引用文章留下的链接等。这中方式进入的和第二条,通过搜索引擎进入的有异曲同工之妙。浏览者往往是为了好奇或者是扩充知识等,来到你的文章,但是一旦看完,就觉得没有什么必要继续看下去。

解决方法:

  1. 同第二条的解决方法。

实际应用

理论永远只是理论,能实践的理论才是好理论。现在就说一下本人的实际应用方案。

  1. 首先要提高整体的博客文章质量和素质,文章要是给别人看的,如果写的没有质量和水平,谁去看。
  2. 由于那次robots文件事件,导致百度收录全清,结果完全没有搜索引擎的流量。加强一了下SEO,现在百度每天一收。
  3. 在之前的文章中,仍然有很多精品文章,但由于百度收录没有,如果想要别人看到,则要在新写的文章中,不时地提一下之前写的文章,给出一个连接,让浏览者可以点击查看之前的精品文章。
  4. 为了增加对以前文章的收录,潜行者m还整理了一下以前的精品文章,加上原文链接,将其转载到其他博客或者网站上,这样,百度可以收录较早的文章,而其他博客平台或者网站上的用户,也可以看到之前的精品文章。
    计划就是这些,希望本文能给你一些启示和帮助。