cms 结构_构建CMS：结构和样式

最新推荐文章于 2021-01-16 16:11:18 发布

daique1908

最新推荐文章于 2021-01-16 16:11:18 发布

阅读量1k

点赞数

文章标签： css html java html5 js ViewUI

本文介绍了一种不依赖数据库的扁平化CMS设计，所有信息存储在纯文本文件中，以提高速度和安全性。教程展示了如何使用Web技术如HTML、CSS和JavaScript创建一个简单的CMS，重点放在文件组织、布局、样式和自动化工具Gulp的使用上。通过合理的目录结构和自动化流程，简化了网站内容管理和部署过程。

摘要由CSDN通过智能技术生成

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}}}
			
     
     
     
			
     
     
     
      
      
      
				{
      {
      {navbar}}}
			
     
     
     
		
    
    
    
		
    
    
    
     
     
     
			{
     {
     {sidebar}}}
		
    
    
    
		
    
    
    
     
     
     
			{
     {
     {content}}}
		
    
    
    
		
    
    
    
     
     
     
			{
     {
     {footer}}}

该模板为网站创建一个标准网页。每个页面都有一个带有导航栏的标题，一个侧边栏，一个内容区域和一个页脚区域。最后加载的是该站点所需的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的菜单系统。

所有这些样式都定义了网站的基本结构。这里没有任何内容可以使页面外观，只是页面的

最低0.47元/天解锁文章

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cms 结构_构建CMS：结构和样式

您将要创造的 “扁平化CMS设计” Web服务器已经成为一种趋势。这只是指不将其信息存储在数据库中的内容管理系统（CMS）。而是，所有信息都存储在纯文本文件中。由于当今许多虚拟专用服务器（VPS）都在使用基于RAM的硬盘驱动器，因此这种方法更快，更安全。在本系列教程中，我将向您展示如何使用一些标准的Web技术创建自己的平面文件系统CMS。这些系统的功能不如其他系统，但具有响应速...
复制链接

扫一扫