您将要创造的

“扁平化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按钮和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的菜单系统。

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

款式

对于样式目录，创建一个名为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 ：




  • Pages
    

    • Flat CMS
    • 

  • Blog
    • 

  • News
    • 

  • About




  • 带有以下代码的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 ServerThis is a page about the flat CMS server.


  • about.md的代码如下：


### AboutThis 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 Blogp This is a rambling blog about a flat CMS.mixin article($title, $link, $excerpt, $date)div.entrydiv.tutorial_wrapdiv.tutorial_diva[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 Newsp 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.entrydiv.tutorial_wrapdiv.tutorial_diva[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 watchgulp.watch(themesassRoot + '/sass/Basic.scss', function(){// What to rungulp.run('theme-compass-to-css');});gulp.watch(layoutsassRoot + '/sass/Basic.scss', function(){// What to rungulp.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位置。



        



            用于CMS上传的Dropzone 3设置

        




我的首选方法是使用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：结构和样式相关推荐
	

    
						
  1. cms 结构_构建CMS：结构和样式
		
    cms 结构 "扁平化CMS设计" Web服务器已经成为一种趋势. 这只是指不将其信息存储在数据库中的内容管理系统(CMS). 而是,所有信息都存储在纯文本文件中. 由于如今许多虚 ...
    
		
    2. 
						
  2. html图标页面横向居中,结构-行为-样式-csshtml横纵居中最佳实践
		
    最近在做手机端的H5项目,有个标题是在一根横线中的,就是水平居中加垂直居中(如图一).这应该是前端开发中经常遇到的一个场景了,做的次数多了就有一些体会,我今天就总结了下这种结构的实现思路:首先,用元素 ...
    
		
    3. 
						
  3. 编写高质量的代码--基础：结构和样式，行为的分离
		
    实现高质量的代码需要我们在结构和样式,行为的分离的基础上做到:精简,重用,有序. 精简:尽量减小文件的大小,提高页面加载速度. 重用:提高代码的重用性,减少冗余代码,提高开发速度. 有序:提高代码的结 ...
    
		
    4. 
						
  4. SAP-ABAP性能优化之构建嵌套结构的哈希表
		
    编者按:      本文的内容是程序性能优化的一种方式. 使用READ TABLE <哈希表> 取代READ TABLE <标准内表>或LOOP AT WHERE <标准 ...
    
		
    5. 
						
  5. Java后端递归构建树形结构
		
    记录:在Java后台利用递归思路进行构建树形结构数据,返回给前端,能以下拉菜单等形式进行展示. 简明:为了简化代码,引入Lombok的Jar包,可省略实体类set().get()方法. <dep ...
    
		
    6. 
						
  6. java构建树形结构
		
    目录 前言 实现树形结构 一.树节点数据类(反回参数类) 二.给树形结构添加数据 三.测试类 四.测试结果 前言 在我们实际开发中会接触到树形结构,根节点子节点, 然后添加数据构成了我们的树形结构,  ...
    
		
    7. 
								
  7. 帝国CMS列表分页样式(三)[!--show.listpage--]
		
    帝国CMS,列表,模版,分页,样式,[!--show.listpage--] 我们在自己设计网站列表页面或者仿别人的列表页面的时候可能会感觉帝国cms默认的列表页分页样式不是很好看,不过经过我最记得使 ...
    
		
    8. 
						
  8. Swiper学习之一---入门：swiper相关文件、swiper代码结构和样式、初始化Swiper
		
    呼呼,连着更新了好长时间的jQuery的博客了,呃呃~打个广告的,有需要的小伙伴可以点击这个链接jQuery专栏去看一下,不需要的可以自动忽略的哦,哈哈. 然后就是从今天开始我们一起来看看Swiper ...
    
		
    9. 
						
  9. C++ Qt 构建树形结构 树形结构生成XML
		
    树形数据结构是一类重要的非线性数据结构.树形数据结构可以表示数据表素之间一对多的关系.其中以树与二叉树最为常用,直观看来,树是以分支关系定义的层次结构.树形数据结构在客观世界中广泛存在,如人类社会的族 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 吴恩达老师深度学习视频课笔记：自然语言处理与词嵌入
		
    2. 
						
  2. 工业机器人pallet指令_工业机器人编程指令详解
		
    3. 
						
  3. canal 全量数据
		
    4. 
						
  4. Android中的保活机制
		
    5. 
						
  5. matlabrobert锐化_Matlab图像处理系列3———空间域锐化滤波器
		
    6. 
						
  6. Word/WPS 文本转换成表格
		
    7. 
						
  7. 解决Xcode couldn‘t find any iOS App Development provisioning profiles matching ‘com.facebook.WebDriver
		
    8. 
						
  8. 物联网-物联网网络安全
		
    9. 
						
  9. 2022年全球市场工业访问控制解决方案总体规模、主要企业、主要地区、产品和应用细分研究报告
		
    10. 
						
  10. vue 传参获取数据
		
    11. 
						
  11. 2022温州经开区沙城街道办事处招聘编外人员综合试题及答案
		
    12. 
						
  12. 编制可行性研究报告的依据和要求有哪些？
		
    13. 
						
  13. idea报错 ：org.codehaus.plexus.component.repository.exception.ComponentLookupException:
		
    14. 
						
  14. 20172303 20172322 2017-2018-2 暑假作业 结对编程项目-舒尔特方格（及获小黄衫感想）...
		
    15. 
						
  15. uiautomator2 启动atx
		
    16. 
						
  16. 如何按照一定的概率随机删除数据
		
    17. 
						
  17. 【GIT】源仓库新建分支如何同步到fork的自有仓库
		
    18. 
						
  18. 墨尔本python培训班_墨尔本大学商业专业
		
    19. 
						
  19. 芯片后端开发基础知识（一）
		
    20. 
						
  20. F5浏览器请求html资源超时,F5刷新网页时，出现了“如要再次显示该网页，web浏览器需要重新发送你以前提交的信息...要点击重试，如何不让出现这个对话框的解决方案...
		
    21. 
		

	


热门文章
	

    
									
  1. 基于JUPYTER的python主流库新手教程(上)
			
    2. 
						
  2. 电流检测放大器替代仪表放大器实现在电路中的应用
			
    3. 
						
  3. ccc坑-不出现智能代码提示了
			
    4. 
						
  4. keil查找函数引用的方法
			
    5. 
						
  5. config命令(config命令汇总)
			
    6. 
						
  6. 可用的直播流地址（持续更新）
			
    7. 
						
  7. 微群宝贝里的淘宝客的实现和代码实现 duilib+大淘客API+PC微信逆向
			
    8. 
						
  8. SAP ABAP 对话框编程教程：中的模块池-09
			
    9. 
						
  9. mysql8.0.17下载教程_Mysql8.0.17安装教程【推荐】
			
    10. 
						
  10. 1.基于深度学习的知识追踪研究进展_刘铁园
			
    11.