cms 结构
“扁平化CMS设计” Web服务器已经成为一种趋势。 这只是指不将其信息存储在数据库中的内容管理系统(CMS)。 而是,所有信息都存储在纯文本文件中。 由于如今许多虚拟专用服务器(VPS)都在使用基于RAM的硬盘驱动器,因此这种方法更快,更安全。
在本系列教程中,我将向您展示如何使用一些标准的Web技术创建自己的平面文件系统CMS。 这些系统不具有其他系统的全部功能,但是具有响应时间很好的基础知识。
有了硬盘上的所有信息,文件组织就成为一个大问题。 考虑到这一点,站点信息将与样式和布局信息位于不同的目录中。 同样,每种类型的页面在站点文件夹下都有其自己的目录,其中一部分目录用于CMS的较小部分。 这样可以将所有内容保留在自己的位置,并形成一个灵活的系统。
主目录结构
在将要用于构建项目的目录中,创建以下目录: src , site和themes 。 src目录将包含服务器代码, 站点目录用于所有站点信息, 主题目录用于布局和主题信息。
在主题目录中,您需要制作一个布局和一个样式目录。 布局目录将包含不同的网页布局。 通过将布局信息与样式信息分开,主题变得更加灵活。 现在,将有一种布局称为SingleCol 。
对于所有样式和布局创建,我都使用Sass , Compass和Susy 。 Sass是一种自定义样式表处理语言。 它提供了一种更强大的方法来为您的网站创建CSS样式表。 指南针是Sass的扩展。 Sassy-buttons是Sass的扩展,用于在网站上制作漂亮的按钮。 Susy还是用于为您的站点创建网格布局系统的扩展。
由于Ruby已预装在所有Mac上,因此您无需安装它。 要在Windows系统上使用Ruby,您需要下载Ruby的Windows Installer 。 在Linux上,您需要使用系统的软件包管理器来安装Ruby。
将Ruby放入系统后,您可以使用以下命令行安装Sass,Compass,Sassy-button和Susy:
gem install sass
gem install sassy-buttons
gem install compass
gem install susy
对于本教程,我使用的是Sass 3.4.16,Sassy按钮0.2.6,Compass 1.0.3和Susy 2.2.5。 根据系统的配置,您可能必须先使用sudo
运行这些命令。
版面
要开始创建布局,请在SingleCol
目录中运行以下命令:
compass init
这将创建sass和stylesheets目录,以及一个名为config.rb的文件。 因为我喜欢使用CSS样式表目录中,重命名样式表目录CSS。 另外,为布局所需的任何JavaScript文件创建一个js目录。 打开config.rb文件,使其如下所示:
require 'susy'
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
现在,要创建网站的基本布局,请在布局目录中创建一个名为template.html的文件。 在此文件中,添加以下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
{{{title}}}
rel="stylesheet" type="text/css" href="%7B%7B%7BWebAddress%7D%7D%7D/stylesheets.css">
{{{head}}}
{
{
{header}}}
{
{
{content}}}
该模板为网站创建一个标准网页。 每个页面都有一个带有导航栏的标题,一个侧边栏,一个内容区域和一个页脚区域。 最后加载的是该站点所需的javascript。
每个部分都由一个Handlebar宏表示。 服务器在将宏提供给用户之前先对其进行扩展。
在sass目录中,创建一个名为base.scss的文件并放置以下代码:
@import 'compass/reset';
@import 'susy';
$susy: (
flow: ltr,
math: fluid,
output: float,
gutter-position: after,
container: auto,
container-position: center,
columns: 16,
gutters: .25,
column-width: false,
global-box-sizing: content-box,
last-flow: to,
debug: (
image: hide,
color: rgba(#66f, .25),
output: background,
toggle: top right,
),
use-custom: (
background-image: true,
background-options: false,
box-sizing: true,
clearfix: false,
rem: true,
)
);
body {
}
#wrap {
@include container(16);
width: 1024px;
display: block;
}
#headerwrap {
@include span(16 of 16);
margin-bottom: 20px;
}
#header {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 95%;
}
#content {
@include span(11 of 16);
}
.col1 {
@include span(5 of 10);
}
.col2 {
@include span(last 5 of 10);
}
#footer .col2 {
width: auto;
}
.box {
@include span(4 of 10);
}
#sidebar {
@include span(last 4 of 16);
}
#footer {
@include span(16 of 16);
}
/** CSS dropdown menu **/
#navigation {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 95%;
}
#menuh-container {
top: 1em;
left: 1em;
display: inline;
width: 100%;
}
#menuh {
margin-top: 1em;
display: inline;
width: 100%;
}
#menuh ul li {
display: inline-block;
width: fit-content;
}
#menuh a
{
text-align: center;
display:block;
white-space:nowrap;
margin:0;
padding: 5px;
text-decoration: none;
}
#menuh ul
{
list-style:none;
margin: 0px 20px 0px 20px;
padding: 0px;
}
#menuh li
{
position:relative;
min-height: 1px;
vertical-align: bottom;
width: fit-content;
}
#menuh ul ul
{
position: absolute;
z-index: 500;
top: 50px;
left: 20px;
display: none;
padding: 0.5em;
margin: -1em 0 0 -1em;
}
#menuh ul ul li {
width: 100%;
}
#menuh ul ul li a {
text-align: left;
}
#menuh ul ul ul
{
left: 90px;
}
div#menuh li:hover
{
cursor:pointer;
z-index:100;
}
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}
/* End CSS Drop Down Menu */
此sass代码以指南针重置样式加载,以抵消浏览器的默认设置。 然后,它加载和建立超对称针对网页的所有元素创造适当的网格布局。
页面定义之后是css导航系统。 菜单的隐藏下拉菜单通过鼠标悬停定义可见。 这提供了一个仅CSS的菜单系统。
所有这些样式都定义了网站的基本结构。 这里没有任何内容可以使页面外观,只是页面的