登录
当前位置： 首页 > 工具软件 > 50CMS > 使用案例 >

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

毕浩渺
2023-12-01

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}}}



	
   
   

		
    
    

			
     
     
			
     
     
		
    
    

		
    
    
		
    
    

     
     
			{{{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的菜单系统。

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

款式

对于样式目录，创建一个名为Basic的目录。 初始化sass信息，就像针对layouts / SingleCol目录一样。 在此目录中，运行以下命令行： 

compass init

这将创建sass和stylesheets目录，以及一个名为config.rb的文件。 因为我喜欢使用CSS样式表目录中，重命名样式表目录CSS。 另外，为任何用于创建主题JavaScript创建一个js目录。 打开config.rb文件，使其如下所示： 

require 'sassy-buttons'
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

对于网站上的样式按钮，我喜欢使用sassy-buttons 。 因此，首先需要它，然后是目录结构。

在Basic / sass目录中，使用以下信息创建Basic.scss文件： 

// Welcome to Compass.
// In this file you should write your main styles. (or centralize your imports)
// Import this file using the following HTML or equivalent:
// href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
//
@import 'compass/css3';
@import 'sassy-buttons';

$style-color1: rgb(247, 237, 222);
$style-color2: #ffedd1;
$style-color3: rgb(245, 213, 166);
$style-color4: #f0d5ad;

//
// Clear Fix
//
.clearfix:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

//
// Main Styling for Wood.
//
@mixin standardsize {
    padding-top: 10px;
    padding-left: 15px;
    font-size: 19px;
    line-height: 1.25em;
}

body {
    background-color: $style-color2;

    input[type='button'] {
        @include sassy-button('shiny', 10px, 16px, $style-color1, darken($style-color1, 20%), #000, bold);
    }

    .button {
        @include sassy-button('shiny', 10px, 16px, $style-color1, darken($style-color1, 20%), #000, bold);
        display: inherit;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
    }

    #wrap {
        background-color: $style-color1;
        @include border-radius(.6em, .6em);
        margin-top: 10px;
        margin-bottom: 10px;
        border: 4px solid $style-color4;

        #header {
            background-color: $style-color2;
            @include border-radius(15px);
            background-repeat: no-repeat;
            border: 2px solid $style-color3;
            height: 130px;
            text-align: left;
            margin-top: 20px;
            font-size: 3em;

            h1 {
                a:link, a:visited {
                    color: #000;
                    text-decoration: none;
                }
                padding-top: 40px;
                padding-left: 20px;
            }
            h6 {
                font-size: .4em;
                font-style: italic;
                padding-left: 20px;
            }
        }
        #sidebar {
            background-color: $style-color2;
            @include border-radius(.6em, .6em);
            padding: .6em;
            vertical-align: text-top;
            overflow: hidden;
            margin-right: .5em;
            border: 2px solid $style-color3;
            hr {
                color: $style-color2;
                background-color: $style-color2;
            }
            p, ul, li {
                @include standardsize;
            }
            ul li {
                list-style-type: disc;
                margin-left: 25px;
                padding: 0;
                border: 0;
                outline: 0;
                font-size: 100%;
                vertical-align: baseline;
                background: transparent;
            }
            li {
                margin-bottom: 10px;
            }
            h1, h2, h3, h4, h5, h6 {
                @include standardsize;
                font-weight: bold;
                margin-top: .25em;
                margin-bottom: .25em;
            }
            h1 {
                font-size: 2.5em;
            }
            h2 {
                font-size: 2em;
            }
            h3 {
                font-size: 1.5em;
            }
            h4 {
                font-size: 1em;
            }
            h5 {
                font-size: .8em;
            }
            h6 {
                font-size: .6em;
            }
            input[type='button'] {
                margin-left: 120px;
                clear: both;
            }
        }
        #content {
            input[type='button'] {
                margin-left: 200px;
                clear: both;
            }
            h1, h2, h3, h4, h5, h6 {
                @include standardsize;
                font-weight: bold;
                margin-top: .25em;
                margin-bottom: .25em;
            }
            h1 {
                font-size: 2.5em;
            }
            h2 {
                font-size: 2em;
            }
            h3 {
                font-size: 1.5em;
            }
            h4 {
                font-size: 1em;
            }
            h5 {
                font-size: .8em;
            }
            h6 {
                font-size: .6em;
            }
            hr {
                margin-top: 30px;
                margin-bottom: 30px;
            }
            p, ul, li, details, summary, pre {
                @include standardsize;
            }
            details {
                p, pre {
                    margin-left: 25px;
                }
            }
            ul li {
                list-style-type: disc;
                margin-left: 25px;
                padding: 0;
                border: 0;
                outline: 0;
                font-size: 100%;
                vertical-align: baseline;
                background: transparent;
            }
            li {
                margin-bottom: 10px;
            }
            .box {
                clear: both;
                background-color: $style-color4;
                float: none;
                margin-left: auto;
                margin-right: auto;
                margin-top: 1.0em;
                margin-bottom: 1em;
                @include border-radius(.6em, .6em);
                display: block;
                padding: .5em;
            }
            img {
                @include border-radius(10px);
                margin: 20px auto 20px auto;
            }
        }
        #footer {
            border-top: 5px;
            border-style: solid;
            border-color: $style-color3;
            @include border-radius(.6em, .6em);
            margin-top: 30px;
            p {
                margin-bottom: .6em;
                @include standardsize;
                margin-right: 15px;
            }
        }
    }
}

// CSS dropdown menu
#navigation {
    text-align: left;
    border: 2px solid $style-color3;
    background-color: $style-color2;
    @include border-radius(15px);
}

#menuh {
    font-size: 1.3em;
    font-family: arial, helvetica, sans-serif;
    background-color: $style-color1;
}

#menuh ul {
    background-color: $style-color2;
}

#menuh ul ul {
    background-color: $style-color2;
    @include border-radius(15px);
    border: 2px solid $style-color3;
}

#menuh a {
    background-color: $style-color2;
    color: #000;
}

#menuh a:link, #menuh a:visited, #menuh a:active {
    color: #000;
    background-color: $style-color2;
}

#menuh a:hover {
    color: #000;
    background-color: $style-color4;
    @include border-radius(5px);
}

// End CSS Drop Down Menu
// Misc classes
.picture {
    border: 3px solid $style-color3;
    @include border-radius(8px);
    float: left;
    margin: 5px 15px 15px 15px;
}

a:link, a:visited {
    color: darken($style-color1, 50);
    text-decoration: none;
}

strong {
    font-weight: bold;
}

table {
    margin: 20px;
    border: 3px solid;
    @include border-radius(10px);
    border-color: lighten($style-color2, 6);
    th {
        text-align: center;
        font-weight: bold;
        padding: 10px 0 10px 0;
    }
    tbody {
        td {
            padding: 10px;
        }
        tr:nth-child(2n+1) {
            background-color: darken($style-color2, 5);
        }
        tr:nth-child(even) {
            background-color: lighten($style-color2, 2.5);
        }
    }
}

#commentSpacer {
    width: 100%;
    margin-top: 20px;
    margin-left: 15px;
}

.tutorial_excerpt {
    margin-left: 20px;
}

.tutorial_thumbnail {
    float: left;
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
}

.tutorial_wrap {
    margin-bottom: 50px;
    float: left;
}

img.wp-post-image {
    -moz-border-radius: 15px;
    border-radius: 15px;
    box-shadow: 10px 10px 5px gray;
}

.showcode {
    margin: 20px auto 20px 30px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border: $style-color4 3px;
    border-style: solid;
    background: white;
}

#socialmedia {
    width: 700px;
    margin-top: 20px;
    margin-left: 15px;
}

#socialbuttons {
    margin: auto;
}

#socialbuttons a {
    opacity: 0.8;
    filter: alpha(opacity = 80);
    -webkit-transition: all ease-in-out 0.2s;
    -moz-transition: all ease-in-out 0.2s;
    -ms-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
}

#socialbuttons a:hover {
    opacity: 1;
    filter: alpha(opacity = 100);
}

#socialbuttons a {
    display: inline-block;
    height: 28px;
    width: 30px;
    background-image: url(/images/ico-subscribe-social.png);
    background-repeat: no-repeat;
}

#socialbuttons a.twitter {
    background-position: -30px 0;
}

#socialbuttons a.facebook {
    background-position: -60px 0;
}

#socialbuttons a.googleplus {
    background-position: -210px 0;
}

dl {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 19px;
    line-height: 1.25em;
}

dt {
    margin-left: 20px;
    margin-bottom: 20px;
    font-weight: bold;
}

dd {
    margin-left: 40px;
    margin-bottom: 20px;
}

此代码定义网站的外观。 它定义了构成典型网站样式的背景，颜色，字体等。

样式/基本目录包含网站的404页，页眉，页脚和侧栏部分的默认外观所需的文件。 因此，创建一个名为404.html的文件并放置以下代码： 

404 Page



Sorry, we could not find the page.

这是一个基本的404错误页面。 您必须注意此处提供的信息，因为您不想透露太多有关您网站工作方式的信息。 由于将其放置在页面的内容区域中，因此用户可以轻松地导航离开页面。

接下来，创建具有以下内容的header.html文件： 

 Test Site 


A New Approach

这只是一个非描述性的标头，但它使CMS有所显示。

接下来，创建具有以下内容的footer.html文件： 

<footer>
[Column1]
    <p>Copyrighted 2012 by <a href="{{{WebAddress}}}/">Your Company</a>
[/Column1]
[Column2]
	<p>Running on a flat CMS server!</p>
[/Column2]
</footer>

接下来，使用以下内容创建sidebar.html文件： 

A Sidebar


This is a basic sidebar that can have other times.

同样，这些是占位符。 所有这些文件都将复制到site / parts目录，并根据站点的需要进行更改。 这些是在这里，以便在用户忘记创建它们的情况下，服务器中可以使用一些带有其名称的名称。

网站结构

在定义了主题和布局之后，是时候为实际站点创建基本内容和结构了。 在site目录中，创建part ， pages ， posts ， images ， css ， js目录。

部分

部件目录将包含html / css / javascript小片段，这些片段将使单个单元放置在网站的多个位置。 这些部分将加载到服务器中，并根据需要与页面内容组合。 对于我们的演示站点，创建以下部分：

  • 使用以下代码的footer.html ： 
<footer>
    <p style="float: left;">Copyrighted 2012 by <a href="{{{WebAddress}}}/">Your Company</a>
	<p style="float: right;">Running on a flat CMS server!</p>
</footer>
<script type="text/javascript">
window.PageName = "{{{PageName}}}";
</script>
  • 带有以下代码的head.html ： 
 rel="shortcut icon" href="%7B%7B%7BWebAddress%7D%7D%7D/images/favicon.ico">
  • 具有以下代码的header.html ： 
 Test Site 


Flat File System CMS
  • 带有以下代码的navbar.html ：
  • 带有以下代码的sidebar.html ： 
Side Bar
  • 使用以下代码的socialmedia.html ：

服务器加载使用的名称，这些零件没有扩张车把模板的延伸。 例如，在需要放置socialmedia.html部件的任何地方，您都可以在其中放置宏{{{socialmedia}}} 。 同样，这些部分可以是HTML，Markdown或服务器可以处理的任何其他格式。 在我要制作的服务器中，支持的文件类型为HTML ， Jade / Amber和Markdown 。 我将在实际的服务器创建教程中了解这些细节。

页数

该网站的所有页面都将放置在pages目录中。 现在，创建以下文件及其内容：

  • 使用以下代码的main.html ： 
Flat CMS Test Site


This is the Main page of the test site.
  • 带有以下代码的flatcms.md ： 
### Flat CMS Server

This is a page about the flat CMS server.
  • about.md的代码如下： 
### About

This would be a standard about page.

这些是该站点的演示页面。 唯一需要的文件是main.html，因为服务器会将页面内容加载到内存中并从内存中提供服务。 这有助于加快网站首页的加载速度。 其他两个页面具有md扩展名，因为它们是Markdown格式。 服务器将在嵌入页面布局之前将内容转换为HTML。

通常，页面包含的信息不会随着时间而改变。 它们向查看者提供有关该站点，其目的和目标的信息。

通过使用页面创建目录和子目录，页面本质上可以是分层的。 这些目录名称创建这些页面目录的地址。

帖子

与页面不同，帖子是定期添加的项目，例如每天/每周/每月的博客帖子和新闻项目。 预计该领域会经常变化。 在posts目录中，创建两个新目录： blogs和news 。 在每个目录中，创建一个目录flatcms 。 这些将包含Flat CMS网站的博客文章和新闻项目。

在posts / blogs / flatcms目录中，创建以下文件：

  • 具有以下内容的index.amber ： 
h3 Flat CMS Blog

p This is a rambling blog about a flat CMS.

mixin article($title, $link, $excerpt, $date)
	div.entry
		div.tutorial_wrap
			div.tutorial_div
				a[href=$link]
					h3 #{$title}
				h5 #{$date}
				p.tutorial_excerpt #{$excerpt}
	div.clear

+article("Flat CMS Running", "/posts/blogs/flatcms/flatcms", "Flat CMS Test Server is Running!", "August 12, 2015")
  • flatcms.md具有以下内容： 
The New Server is Running
----

After much work and programming, the flat CMS server is running.  Stay tuned for more news!

{{{socialmedia}}}

index.amber是一个Jade模板，用于定义博客中的不同帖子。 Jade HTML模板系统使添加具有精确格式的新内容变得容易。 宏的参数组成不同的项目。 您可以在Tuts +上找到有关Jade的更多信息。

在这里，使用的扩展名是琥珀色，因为与Jade等效的Go语言是Amber 。 因为那是我开始的地方，所以我就是这样做的。 如果要更改扩展名，请记住也要在相应的服务器代码中进行更改。

在posts / news / flatcms目录中，创建以下文件：

  • 具有以下内容的index.amber ： 
h3 Flat CMS News

p Here is where all the news about what I am doing is found. Please come back often to check it out!

mixin article($title, $link, $excerpt, $date)
	div.entry
		div.tutorial_wrap
			div.tutorial_div
				a[href=$link]
					h3 #{$title}
				h5 #{$date}
				p.tutorial_excerpt #{$excerpt}
	div.clear

+article("Flat CMS is Running", "/posts/news/flatcms/flatcms", "The Flat CMS Test Server is Running!", "August 12, 2015")
  • flatcms.md具有以下内容： 
The New Server is Running
----

After much work and programming, I finally have everything moved over to a goPress server that I wrote myself. I will be making this available for you too. Stay tuned!

{{{socialmedia}}}

这将为演示站点创建新闻项。 在我的站点中，我对教程和代码演示页面使用相同的结构。

图片

所有网站都有图片。 在此设置中，所有图片都位于site / images目录中。 对于此演示站点，仅社交媒体图标将放置在此处。 您可以从下载文件中获取图像文件。

网站CSS

即使使用布局CSS和样式CSS ，有时您还是需要特殊的CSS规则。 site / css目录包含所有CSS文件，这些文件对网站进行了最后润饰。 所有layout ， styling和site / css文件都将一起编译成一个css文件。 因此，创建site / css / final目录以放置此编译文件。 现在，使用以下内容创建site / css / site.css文件： 

.clear {
  clear: both;
  height: 0px;
}

这里没有太多内容，只是一个clear类的定义。 您可以添加所需的内容，但是应该不属于布局或样式类别。

网站脚本

site / js目录包含该站点的所有特殊JavaScript文件。 这些将一起编译并最小化以加快站点加载速度。 现在，为编译后的脚本创建site / js / final目录，并创建具有以下内容的site / js / 01-site.js文件： 

;
//
// File:         Site.js
//
// Description:   The JavaScript file for the site.
//
jQuery(document).ready(function () {
	//
	// Code here will be ran once a page is loaded.
	//
});

现在这里没有很多。 但是，由于您的站点需要自定义JavaScript，因此可以将其放在此处。

由于脚本将一起编译，因此我按加载所需的顺序对其进行编号。 一起编译脚本的例程将按数字顺序加载它们。

用Gulp自动化

加快网页加载速度的最简单方法是拥有尽可能少的HTTP请求。 因此，最好将所有CSS和JavaScript文件分别合并为一个文件。 编译这些文件的最佳方法是使用构建脚本。 每次服务器收到请求时执行该操作都浪费了处理时间。

我选择的自动化脚本运行器是Gulp 。 Gulp在Node.js上运行。 因此，请访问Node.js网站并为您的系统下载程序。 一旦安装了Node.js，就可以使用以下命令安装Gulp ： 

npm install --global gulp
npm install --global gulp
npm install --global gulp-compass
npm install --global gulp-autoprefixer
npm install --global gulp-compressor
npm install --global gulp-concat

这将安装我在构建脚本中使用的所有Gulp和Gulp模块。 现在，在目录顶部，使用以下内容创建gulpfile.js文件： 

// Requirements
var gulp = require('gulp'),
	 compass = require('gulp-compass'),
	 prefix = require('gulp-autoprefixer'),
	 compressor = require('gulp-compressor'),
	 concat = require('gulp-concat');

// Defines path to sass
var Theme = "Basic";
var Layout = "SingleCol";
var themesassRoot = 'themes/styling/' + Theme;
var layoutsassRoot = 'themes/layouts/' + Layout;

// Gulp task
gulp.task('theme-compass-to-css', function(){
	return gulp.src(themesassRoot+'/sass/Basic.scss')
			 .pipe(compass({
                config_file: themesassRoot + '/config.rb',
                css: themesassRoot + '/css',
                sass: themesassRoot + '/sass',
                require: 'sassy-buttons'
                }))
			 .pipe(prefix("last 3 versions"))
			 .pipe(gulp.dest(themesassRoot + '/css'))
});

gulp.task('layout-compass-to-css', function(){
	return gulp.src(layoutsassRoot+'/sass/base.scss')
			 .pipe(compass({
                config_file: layoutsassRoot + '/config.rb',
                css: layoutsassRoot + '/css',
                sass: layoutsassRoot + '/sass',
                require: 'susy'
                }))
			 .pipe(prefix("last 3 versions"))
			 .pipe(gulp.dest(layoutsassRoot + '/css'))
});

gulp.task('watch-compass', function(){
	// What to watch
	gulp.watch(themesassRoot + '/sass/Basic.scss', function(){
		// What to run
		gulp.run('theme-compass-to-css');
	});
	gulp.watch(layoutsassRoot + '/sass/Basic.scss', function(){
		// What to run
		gulp.run('layout-compass-to-css');
	});
});

gulp.task('all-compass', ['theme-compass-to-css', 'layout-compass-to-css']);

// js compressor
gulp.task('js', function () {
    gulp.src([ layoutsassRoot +'/js/*.js', themesassRoot + '/js/*.js', 'site/js/*.js'])
        .pipe(compressor())
        .pipe(concat("final.js"))
        .pipe(gulp.dest('site/js/final'));
});

// css compressor
gulp.task('css', ['all-compass'], function () {
    gulp.src([layoutsassRoot +'/css/*.css', themesassRoot + '/css/*.css', 'site/css/*.css'])
        .pipe(compressor())
        .pipe(concat("final.css"))
        .pipe(gulp.dest('site/css/final'));
});

gulp.task('default', ['all-compass', 'js', 'css']);

这会将所有CSS和JavaScript编译到一个文件中：在CSS的site / css / final / final.css文件中，在JavaScript的site / js / final / final.js文件中。 它还将为CSS添加浏览器前缀规则。 只需在顶层目录中运行以下命令： 

gulp

Gulp将编译我们所有的文件，并将它们保留在正确的位置。 在gulpfile.js定义的每个任务可以单独通过后给予的任务名运行gulp命令。 您可以在Tuts +上了解有关Gulp的更多信息。

服务器配置文件

所有服务器都需要配置信息。 因此，在目录的根目录中，使用以下信息创建文件server.json ： 

{
    "CurrentLayout": "SingleCol",
    "CurrentStyling": "Basic",
    "ServerAddress": "localhost:8080",
    "SiteTitle": "Flat CMS Test Site",
    "Sitebase": "./site/",
    "TemplatBase": "./themes/",
    "Cache": false,
    "MainBase": ""
}

此json文件描述有关使用的布局，使用的样式，服务器应侦听的地址和端口，带字幕的站点的主要名称，用于调试目的打开和关闭缓存的缓存标志的信息。 ，以及该网站使用的不同目录的位置。 通过将此信息以json文件的形式提供给服务器，服务器可以变得灵活，而硬编码信息更少。

将站点上载到服务器

大多数人使用FTP客户端将文件复制到他们的服务器。 这很容易做到，但是在所使用的系统和程序方面差异很大。 但是，还有其他选择。

您可以设置一个Dropbox守护程序，以从您的Dropbox帐户加载网站。 Dropbox Wiki网站上有详细的设置说明。 唯一的问题是，进行任何更改后，文件会自动上传到服务器。 有时，您将需要进行更改而不将它们发送到服务器。 在这种情况下，请为该站点的所有文件提供一个非Dropbox位置，并同时具有一个Dropbox位置。 完成后，在Gulp文件中创建一个任务，以将新站点文件复制到Dropbox位置。

我的首选方法是使用Dropzone 3 。 您可以使用Ruby或Python对Dropzone 3进行编程，以对放置在其上的文件执行任何类型的操作。 它还具有许多内置功能。 内置了一个文件操作，可以上传到FTP / SFTP站点。 我为网站上的每个主目录创建了一个Dropzone 3目标。 然后，当我要更改或添加文件时，只需将其拖到适当的目录dropzone目标即可。 您可以通过我的写作Dropzone 3 Actions教程来了解有关Dropzone 3的更多信息。

结论

这些基本文件将创建一个如下所示的网站：

这仅仅是个开始！ 现在，随着站点结构的布局，现在该开始构建Web服务器了。 请加入我的下一个教程，在那里我将为该演示站点构建一个基于Go语言的Web服务器。

翻译自: https://code.tutsplus.com/tutorials/building-a-cms-structure-and-styling--cms-24547

cms 结构

 类似资料：

相关阅读

在Java中创建类似结构的数据结构为结构分配另一个结构从嵌入式结构访问结构字段LeNet-5结构Python包结构

相关文章

YAML集合和结构Solr架构（体系结构）目录结构Swift结构体XML 树结构

相关问答

C使用结构指针递归构建树数组重构为树结构Jasper报告和结构2PreferencesFragment和MVVM体系结构Extern“C”和C结构和typedef

相关文档

数据结构和算法Python 数据结构Python 数据结构Oracle 体系结构数据结构思维
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.