“扁平化CMS設計”網絡服務器已經成為一種趨勢。這僅指不將其信息存儲在數據庫中的內容管理系統（CMS）。相反，所有信息都存儲在純文本文件中。由于現在許多虛擬專用服務器 (VPS) 都使用基于 RAM 的硬盤驅動器，因此這種方法更快、更安全。
在本系列教程中，我將向您展示如何使用一些標準 Web 技術創建您自己的平面文件系統 CMS。這些系統的功能不像其他系統那么齊全，但具有良好的響應時間的基礎知識。
由于硬盤驅動器上有所有信息，文件組織成為一個大問題。考慮到這一點，站點信息將位于與樣式和布局信息不同的目錄中。此外，每種類型的頁面在站點文件夾下都有自己的目錄，其中包含 CMS 的小部分的部件目錄。這使得所有東西都在自己的位置上并形成一個靈活的系統。
主目錄結構
在要構建項目的目錄中，創建以下目錄：src、site 和 themes。 src 目錄將包含服務器代碼，site 目錄用于存儲所有站點信息，themes 目錄用于存儲布局和主題信息.
在themes目錄中，需要制作layouts和styling目錄。 layouts 目錄將包含不同的網頁布局。通過將布局信息與樣式信息分離，主題變得更加靈活。目前，將有一種名為 SingleCol 的布局。
對于所有樣式和布局創建，我使用 Sass、Compass 和 Susy。 Sass 是一種自定義樣式表處理語言。它提供了一種更強大的方法來為您的網站創建 CSS 樣式表。 Compass 是 Sass 的擴展。 Sassy-buttons 是一個 Sass 擴展，用于在網站上制作漂亮的按鈕。 Susy 也是為您的網站創建網格布局系統的擴展。
由于 Ruby 已預安裝在所有 Mac 上，因此您無需安裝它。要在 Windows 系統上安裝 Ruby，您需要下載 Ruby 的 Windows Installer。在 Linux 上，您需要使用系統的包管理器來安裝 Ruby。
一旦系統上安裝了 Ruby，您就可以使用以下命令行安裝 Sass、Compass、Sassy-buttons 和 Susy：
gem install sass gem install sassy-buttons gem install compass gem install susy
登錄后復制
在本教程中，我使用 Sass 3.4.16、Sassy-buttons 0.2.6、Compass 1.0.3 和 Susy 2.2.5。根據您的系統配置，您可能必須在運行這些命令之前加上 sudo。
布局
要開始創建布局，請在 SingleCol 目錄中運行以下命令：
compass init
登錄后復制登錄后復制
這將創建 sass 和 stylesheets 目錄，以及一個名為 config.rb 的文件。由于我喜歡使用 css 作為樣式表目錄，因此將 stylesheets 目錄重命名為 css。另外，為布局所需的任何 JavaScript 文件創建一個 js 目錄。打開 config.rb 文件并使其如下所示：
require 'susy' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "images" javascripts_dir = "js"
登錄后復制
現在，要創建網站的基本布局，請在 layout 目錄中創建一個名為 template.html 的文件。在此文件中，添加以下代碼：
{{{title}}}
{{{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代碼加載到羅盤重置樣式中以中和瀏覽器默認值。然后它加載并設置susy，以便為網頁的所有元素創建正確的網格布局。
css導航系統位于頁面定義之后。通過將鼠標懸停在定義上，隱藏的菜單下拉菜單將變得可見。這提供了一個僅 css 的菜單系統。
所有這些樣式都定義了網站的基本結構。這里沒有什么可以創建頁面的外觀，只是它的位置。所有樣式均由樣式內容處理。
樣式
對于styling目錄，創建一個名為Basic的目錄。初始化 sass 信息，就像對 layouts/SingleCol 目錄所做的那樣。在此目錄中，運行以下命令行：
compass init
登錄后復制登錄后復制
這將創建 sass 和 stylesheets 目錄，以及一個名為 config.rb 的文件。由于我喜歡使用 css 作為樣式表目錄，因此將 stylesheets 目錄重命名為 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:
//
//
@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;
}
登錄后復制
此代碼定義網站的外觀。它定義了構成典型網站樣式的背景、顏色、字體等。
styling/Basic 目錄包含網站 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 目錄中，并根據站點的需要進行更改。這些放在這里是為了讓服務器有一些帶有它們名稱的東西可以在服務器中使用，以防用戶忘記創建它們。
網站結構
定義了主題和布局后，就可以為實際網站創建基本內容和結構了。在網站目錄中，創建部分、頁面、帖子、圖像、 css、js 目錄。
零件
parts 目錄將包含 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 包含以下代碼：
登錄后復制
header.html 包含以下代碼：
Test Site Flat File System CMS
登錄后復制
navbar.html 使用以下代碼：
Pages
Flat CMS
Blog
News
About
登錄后復制
sidebar.html 包含以下代碼：
Side Bar
登錄后復制
socialmedia.html 使用以下代碼：
登錄后復制
服務器使用Handlebar模板中不帶擴展名的名稱來加載這些部件以進行擴展。例如，在需要放置 socialmedia.html 部分的任何位置，您可以將宏 {{{socialmedia}}} 放置在那里。此外，這些部分可以是 HTML、Markdown 或服務器可以處理的任何其他格式。在我將要制作的服務器中，支持的文件類型是 HTML、Jade/Amber 和 Markdown。我將在實際的服務器創建教程中詳細介紹這些細節。
頁面
網站的所有頁面都將放置在pages目錄中。現在，創建以下文件及其內容：
ma??in.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.
登錄后復制
這些是該網站的演示頁面。唯一需要的文件是 ma??in.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 的更多信息。
這里使用的擴展名是amber，因為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 文件中，以及 site/js/ JavaScript 的 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 操作”了解有關 Dropzone 3 的更多信息。
結論
這些基本文件將創建一個如下所示的網站：
這僅僅是開始！現在，網站結構已經布置完畢，是時候開始構建 Web 服務器了。請和我一起學習下一個教程，我將為此演示網站構建一個基于 Go 語言 的 Web 服務器。
以上就是創建內容管理系統：組織和設計的詳細內容，更多請關注www.92cms.cn其它相關文章！
