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

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

款式

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


我的首选方法是使用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 结构


												


											

cms 结构_构建CMS：结构和样式相关推荐
	

    
								
  1. 苹果cms模板_苹果cms爱看模板有哪些？
		
    苹果cms爱看模板有哪些?今天我的主题网给大家推荐几款苹果cms系统中比较爱看的苹果cms模板. 苹果cms爱看模板1,https://www.mytheme.cn/maccms/65.html 苹果 ...
    
		
    2. 
						
  2. 内是不是半包围结构_半包围结构的有哪些字
		
    展开全部 半包围结构的字有很多,比如:原.席.扇.包.近62616964757a686964616fe4b893e5b19e31333365653833.迈.匠.臣.匡等等. 半包围字的特点 1.连续 ...
    
		
    3. 
						
  3. 内是不是半包围结构_半包围结构有什么字?
		
    展开全部 半包围32313133353236313431303231363533e58685e5aeb931333365653833结构的字有很多,比如:原.席.扇.包.近.迈.匠.臣.匡等等. 半包 ...
    
		
    4. 
						
  4. chemdraw怎么连接两个结构_利用神经结构搜索构建快速准确轻量级的超分辨率网络...
		
    介绍 我们知道,把神经网络拆解,可以把它归结为几个元素的排列组合而成,例如,以卷积神经网络为例,其主要由卷积层,池化层,残差连接,注意力层,全连接层等组成,如果我们把它们抽象,就可抽象为一个个cell ...
    
		
    5. 
						
  5. 苹果cms模板_苹果cms是什么东西？
		
    苹果cms是什么东西? 苹果cms是什么东西? 在这里我的主题网要详细的解释下,苹果cms不是个东西.苹果CMS程序是一套采用PHP+MYSQL环境下运行的完善而强大的快速建站系统. 经过近多年的开发 ...
    
		
    6. 
						
  6. 苹果cms模板_苹果cms收录好的模板有哪些？
		
    苹果cms收录好的模板有哪些? 我的主题网[第二十套]苹果CMSv10自适应视频站模板图文丰富提升百度SEO 此款模板强化seo,是款收录不错的模板,但是不是有了模板就一定能收录好排名好, 还要看自己 ...
    
		
    7. 
						
  7. 苹果cms模板_苹果cms怎么更换模板？
		
    用苹果cms把网站搭建好以后,如果我们不喜欢默认模板或是用了一段时间后想给网站换个风格的话怎么更换网站模板呢?今天就把这个操作教给刚入行的小白们.这里的前提是确定你有一个已经搭建好的网站. 如果不知道 ...
    
		
    8. 
						
  8. 苹果cms模板_苹果cms什么模板好？
		
    苹果cms什么模板好?当然是功能多,好操作,好收录,又好看的模板了.今天我的主题网推荐的是几款带苹果cms后台的模板 苹果cms模板下载地址:https://www.mytheme.cn/maccms ...
    
		
    9. 
						
  9. 苹果cms模板_苹果cms怎么修改网站logo？
		
    安装好苹果cms模板后 需要把模板的logo替换成自己的 具体替换设置方法教程请往下看. 1,这个操作方式是针对苹果cms默认自带的模板设置流程.来到苹果cms的管理后台在默认LOGO处填写logo链 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 访问数据库_如何访问虚拟主机中的数据库
		
    2. 
						
  2. 《CCNP TSHOOT 300-135认证考试指南》——6.4节SVI故障检测与排除
		
    3. 
						
  3. Codeforces.809E.Surprise me!(莫比乌斯反演 虚树)
		
    4. 
						
  4. 2 时间格式化_U盘无法格式化怎么办 U盘无法格式化解决教程【详解】
		
    5. 
						
  5. 学习java的知识体系路线
		
    6. 
						
  6. 阿里云联合中国信通院发布《云计算开放应用架构》标准
		
    7. 
						
  7. Android：sqlite问题小结
		
    8. 
						
  8. 经典的 Fork 炸弹解析
		
    9. 
						
  9. python axis 0_Python之NumPy（axis=0/1/2...）的透彻理解
		
    10. 
						
  10. 【PDF】PDF文件分页拆分（免费方法）
		
    11. 
						
  11. 设计文档应该怎么写？
		
    12. 
						
  12. BZOJ1001狼抓兔子(网络流最小割）
		
    13. 
						
  13. 用户行为分析（Python）
		
    14. 
						
  14. python 爬取数据(CBA所有球队数据) -爬虫
		
    15. 
						
  15. php session fixation,聊聊session fixation attacks
		
    16. 
						
  16. 重庆拟与惠普成立共同基金 打造中国西部“硅谷”
		
    17. 
						
  17. 全景图像拼接（一）关于全景拼接论文推荐
		
    18. 
						
  18. oracle统计日均,oracle效率优化实战——计算3个月的平均值
		
    19. 
						
  19. pygame-KidsCanCode系列jumpy-part3-重力及碰撞检测
		
    20. 
						
  20. 淘晶驰串口屏入门（五）下拉框 选择文本 动画 视频 外部图片
		
    21. 
		

	


热门文章
	

    
									
  1. Synergy安装教程
			
    2. 
						
  2. python笔记：sklearn r2_score和explained_variance_score的本质区别是什么？
			
    3. 
						
  3. CentOS 7安装最新版本NMAP
			
    4. 
						
  4. winrar创建自解压exe和快捷方式图标
			
    5. 
						
  5. 数据库MySQL总结（一）SQL语句
			
    6. 
						
  6. 20BN-jester数据集以及标签获取
			
    7. 
						
  7. Jupyter增加和删除kernal
			
    8. 
						
  8. 基于炜煌单片机的lcd12864上下左右移动程序，芯片类型stc12c5a60s2
			
    9. 
						
  9. SwaggerHub 更快，标准化的API设计软件
			
    10. 
						
  10. 老船履带工具使用方法_船舶通导设备的日常维护要点归纳
			
    11.