() translation by (you can also view the original English article)
Наметилась тенденция (* сравнительно устойчивое направление развития определенного явления, процесса или идеи. Здесь и далее примеч. пер.) использования CMS (* content management system – система управления содержимым; ПО для организации совместных работ по созданию документов и другого контента), на серверной части которых используется база данных в виде плоского файла (* файл, состоящий из однородных записей, не связанных между собой какими-л. отношениями). Это понятие описывает CMS, информация которой не хранится в базе данных. Вместо этого вся информация хранится в чисто текстовых файлах. Поскольку множество VPS (* virtual private server – виртуальный выделенный сервер; виртуальный сервер, который пользователь воспринимает как выделенный сервер, однако который в действительности установлен на компьютере, на котором работают несколько веб-сайтов. На одном компьютере может быть несколько виртуальных выделенных серверов, у каждого из которых имеется собственная операционная система, на которой запущено серверное программное обеспечение для отдельного пользователя) сегодня используют жесткий диски, работающие на основе ОЗУ (* оперативное запоминающее устройство; полупроводниковая память, предназначенная для временного хранения программ и данных) (* виртуальный привод, который использует RAM вашей системы в качестве дисковода), то веб-сайты, работающие на основе этого подхода, обладают большей производительностью и немного более безопасны.
В этой серии руководств я покажу вам, как создать свою собственную CMS, работающую на основе плоской файловой системы (* система организации файлов, при которой они не могут иметь одинаковых имен, если даже находятся в разных каталогах), при помощи некоторых стандартных веб-технологий. Эти системы не обладают набором всех функциональных возможностей, которые имеются у других систем, однако обладают базовым набором возможностей и при этом хорошим временем отклика (* время, необходимое компьютеру для ответа на запрос. В частности, это время между окончанием посылки запроса и началом получения ответного сообщения).
Учитывая то, что вся информация находится на жестком диске, организация файлов становится основным вопросом. Помня об этом, информацию сайта будем хранить отдельно от информации о стилевом оформлении и разметке. Также в папке для хранения информации сайта для каждого типа страниц будет своя собственная папка и папка parts для хранения небольших частей CMS. За счет этого все хранится на своих местах и получается гибкая система.
Основная структура каталогов
Создайте в папке, которую будем использовать для размещения файлов проектов, следующие директории: src, site и themes. В папке src будет находиться код серверной части, папка site предназначена для размещения информации сайта и папка themes – для размещения информации о разметке и темах.
В папке themes необходимо создать папки layouts и styling. В папке layouts будут располагаться шаблоны с разметкой различных веб-страниц. За счет разделения информации о разметке и стилевом оформлении темы становятся намного гибче. Пока что у нас будет единственный макет в папке под названием SingleCol.
Для создания всего стилевого оформления и макетов страниц я использую Sass, Compass и Susy (* Susy является движком для создания разметки web-страницы. Это набор инструментов, с помощью которых можно создать произвольную CSS-сетку (grid), которая отвечает потребностям дизайна конкретной web-страницы). Sass (* Syntactically awesome style sheets – синтаксически великолепные таблицы стилей) – скриптовый язык для создания пользовательских таблиц стилей. За счет нее у вас имеется более надежный способ создания таблиц стилей CSS для ваших веб-страниц. Compass – расширение Sass. Sassy-buttons – расширение Sass для создания привлекательных кнопок для веб-сайта. Susy – также расширение для создания системы сеток для разметки страниц вашего сайта.
Поскольку Ruby изначально установлен на всех Mac, вам не нужно будет его устанавливать. Для использования Ruby в Windows вам необходимо будет скачать установщик Windows для Ruby. В Linux вам нужно воспользоваться вашим системным менеджером пакетов для установки Ruby.
Сразу после установки Ruby для вашей системы вы можете установить Sass, Compass, Sassy-buttons и Susy при помощи следующих команд:
1 |
gem install sass
|
2 |
gem install sassy-buttons
|
3 |
gem install compass
|
4 |
gem install susy
|
В этом руководстве я использую Sass 3.4.16, Sassy-buttons 0.2.6, Compass 1.0.3 и Susy 2.2.5. В зависимости от настроек вашей системы вам может понадобиться добавить sudo перед этими командами для их выполнения:
Макеты
Чтобы начать создавать макеты, выполните эти команды в папке SingleCol:
1 |
compass init |
В результате будут созданы папки sass и stylesheets и файл под названием config.rb. Поскольку мне больше нравится название css для папки с таблицами стилей, то переименуйте папку stylesheets на css. Также создайте папку js для хранения всех файлов JavaScript, необходимых для макета. Откройте файл config.rb и внесите в него изменения так, чтобы он выглядел как показано ниже:
1 |
require 'susy' |
2 |
http_path = "/" |
3 |
css_dir = "css" |
4 |
sass_dir = "sass" |
5 |
images_dir = "images" |
6 |
javascripts_dir = "js" |
Теперь, чтобы создать базовый макет нашего веб-сайта, создайте файл в папке SingleCol под названием template.html. В этом файле добавьте следующий код:
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> |
3 |
<head>
|
4 |
<meta name="generator" content="goPress Servery by Custom Computer Tools."> |
5 |
<meta charset="utf-8"> |
6 |
<title>
|
7 |
{{{title}}}
|
8 |
</title>
|
9 |
<link rel="stylesheet" type="text/css" href="{{{WebAddress}}}/stylesheets.css"> |
10 |
{{{head}}}
|
11 |
</head>
|
12 |
|
13 |
<body>
|
14 |
<div id='wrap'> |
15 |
<div id='headerwrap'> |
16 |
<div id='header'> |
17 |
{{{header}}}
|
18 |
</div>
|
19 |
<div id='navigation'> |
20 |
{{{navbar}}}
|
21 |
</div>
|
22 |
</div>
|
23 |
<div id='sidebar'> |
24 |
{{{sidebar}}}
|
25 |
</div>
|
26 |
<div id='content'> |
27 |
{{{content}}}
|
28 |
</div>
|
29 |
<div id='footer'> |
30 |
{{{footer}}}
|
31 |
</div>
|
32 |
</div>
|
33 |
<script type="text/javascript" src="{{{WebAddress}}}/scripts.js"></script> |
34 |
</body>
|
35 |
|
36 |
</html>
|
При помощи этого шаблона создается стандартная веб-страница сайта: На каждой странице имеется заголовок, навигационная панель, единственное боковое поле, область для размещения контента и подвал страницы (* здесь обычно располагается имя автора, дата документа, контактная и правовая информация). В последнюю очередь загружаются необходимые для сайта файлы JavaScript.
В каждом разделе имеется макрос (* от греческого makros - большой, длинный; последовательность команд и/или нажатий клавиш, записанная макрорегистратором под уникальным именем. Эта последовательность затем может быть исполнена путtм указания данного имени) Handlebar (*система для создания шаблонов, их комбинирования с данными модели и получения конечных документов; шаблонизатор). На сервере перед отправкой пользователю макрос заменяется набором инструкций.
В папке sass создайте файл под названием base.scss и добавьте в него следующий код:
1 |
@import 'compass/reset'; |
2 |
@import 'susy'; |
3 |
|
4 |
$susy: ( |
5 |
flow: ltr, |
6 |
math: fluid, |
7 |
output: float, |
8 |
gutter-position: after, |
9 |
container: auto, |
10 |
container-position: center, |
11 |
columns: 16, |
12 |
gutters: .25, |
13 |
column-width: false, |
14 |
global-box-sizing: content-box, |
15 |
last-flow: to, |
16 |
debug: ( |
17 |
image: hide, |
18 |
color: rgba(#66f, .25), |
19 |
output: background, |
20 |
toggle: top right, |
21 |
),
|
22 |
use-custom: ( |
23 |
background-image: true, |
24 |
background-options: false, |
25 |
box-sizing: true, |
26 |
clearfix: false, |
27 |
rem: true, |
28 |
)
|
29 |
);
|
30 |
|
31 |
body { |
32 |
}
|
33 |
|
34 |
#wrap { |
35 |
@include container(16); |
36 |
width: 1024px; |
37 |
display: block; |
38 |
}
|
39 |
|
40 |
#headerwrap { |
41 |
@include span(16 of 16); |
42 |
margin-bottom: 20px; |
43 |
}
|
44 |
|
45 |
#header { |
46 |
margin-top: 20px; |
47 |
margin-left: auto; |
48 |
margin-right: auto; |
49 |
width: 95%; |
50 |
}
|
51 |
|
52 |
#content { |
53 |
@include span(11 of 16); |
54 |
}
|
55 |
|
56 |
.col1 { |
57 |
@include span(5 of 10); |
58 |
}
|
59 |
|
60 |
.col2 { |
61 |
@include span(last 5 of 10); |
62 |
}
|
63 |
|
64 |
#footer .col2 { |
65 |
width: auto; |
66 |
}
|
67 |
|
68 |
.box { |
69 |
@include span(4 of 10); |
70 |
}
|
71 |
|
72 |
#sidebar { |
73 |
@include span(last 4 of 16); |
74 |
}
|
75 |
|
76 |
#footer { |
77 |
@include span(16 of 16); |
78 |
}
|
79 |
|
80 |
/** CSS dropdown menu **/
|
81 |
|
82 |
#navigation { |
83 |
margin-top: 20px; |
84 |
margin-left: auto; |
85 |
margin-right: auto; |
86 |
width: 95%; |
87 |
}
|
88 |
|
89 |
#menuh-container { |
90 |
top: 1em; |
91 |
left: 1em; |
92 |
display: inline; |
93 |
width: 100%; |
94 |
}
|
95 |
|
96 |
#menuh { |
97 |
margin-top: 1em; |
98 |
display: inline; |
99 |
width: 100%; |
100 |
}
|
101 |
|
102 |
#menuh ul li { |
103 |
display: inline-block; |
104 |
width: fit-content; |
105 |
}
|
106 |
|
107 |
#menuh a |
108 |
{
|
109 |
text-align: center; |
110 |
display:block; |
111 |
white-space:nowrap; |
112 |
margin:0; |
113 |
padding: 5px; |
114 |
text-decoration: none; |
115 |
}
|
116 |
|
117 |
#menuh ul |
118 |
{
|
119 |
list-style:none; |
120 |
margin: 0px 20px 0px 20px; |
121 |
padding: 0px; |
122 |
}
|
123 |
|
124 |
#menuh li |
125 |
{
|
126 |
position:relative; |
127 |
min-height: 1px; |
128 |
vertical-align: bottom; |
129 |
width: fit-content; |
130 |
}
|
131 |
|
132 |
#menuh ul ul |
133 |
{
|
134 |
position: absolute; |
135 |
z-index: 500; |
136 |
top: 50px; |
137 |
left: 20px; |
138 |
display: none; |
139 |
padding: 0.5em; |
140 |
margin: -1em 0 0 -1em; |
141 |
}
|
142 |
|
143 |
#menuh ul ul li { |
144 |
width: 100%; |
145 |
}
|
146 |
|
147 |
#menuh ul ul li a { |
148 |
text-align: left; |
149 |
}
|
150 |
|
151 |
#menuh ul ul ul |
152 |
{
|
153 |
left: 90px; |
154 |
}
|
155 |
|
156 |
div#menuh li:hover |
157 |
{
|
158 |
cursor:pointer; |
159 |
z-index:100; |
160 |
}
|
161 |
|
162 |
div#menuh li:hover ul ul, |
163 |
div#menuh li li:hover ul ul, |
164 |
div#menuh li li li:hover ul ul, |
165 |
div#menuh li li li li:hover ul ul |
166 |
{display:none;} |
167 |
|
168 |
div#menuh li:hover ul, |
169 |
div#menuh li li:hover ul, |
170 |
div#menuh li li li:hover ul, |
171 |
div#menuh li li li li:hover ul |
172 |
{display:block;} |
173 |
|
174 |
/* End CSS Drop Down Menu */
|
Благодаря этому коду sass загружаются таблицы стилей reset compass для сбрасывания значений свойств стилей, применяемых браузером по умолчанию. Затем загружается и настраивается susy для создания соответствующего макета сетки для всех элементов веб-страницы.
Навигационная панель, реализуемая при помощи CSS, идет после описаний размеров элементов страницы. Скрытые списки опций для меню становятся видимыми за счет правил, применяемых к элементам при перемещении мыши поверх них. За счет этого система меню реализуется только благодаря CSS.
Все эти стилевые правила используются для определения базовой структуры сайта. Здесь нет правил для определения внешнего вида страницы, только для задания позиционирования ее элементов. Все правила для определения внешнего вида страницы задаются в файлах папки styling.
Таблицы стилей
Переходим к папке styling; создайте папку под названием Basic. Инициализируем информацию sass так же, как и для папки layouts/SingleCol. В этой папке выполните следующую команду:
1 |
compass init |
В результате будут созданы папки sass и stylesheets и файл под названием config.rb. Поскольку мне больше нравится название css для папки с таблицами стилей, то переименуйте папку stylesheets на css. Также создайте папку js для размещения всех файлов JavaScript, необходимых для создания темы. Откройте файл config.rb и внесите в него изменения так, чтобы он выглядел, как показано ниже:
1 |
require 'sassy-buttons' |
2 |
http_path = "/" |
3 |
css_dir = "css" |
4 |
sass_dir = "sass" |
5 |
images_dir = "images" |
6 |
javascripts_dir = "js" |
Для реализации стильных кнопок на веб-сайте я люблю использовать sassy-buttons. Поэтому мы запрашиваем сначала его, а затем идет описание структуры папок.
В папке Basic/sass создайте файл Basic.scss со следующей информацией:
1 |
// Welcome to Compass. |
2 |
// In this file you should write your main styles. (or centralize your imports) |
3 |
// Import this file using the following HTML or equivalent: |
4 |
// <link href='/stylesheets/screen.css' media='screen, projection' rel='stylesheet' type='text/css' /> |
5 |
//
|
6 |
@import 'compass/css3'; |
7 |
@import 'sassy-buttons'; |
8 |
|
9 |
$style-color1: rgb(247, 237, 222); |
10 |
$style-color2: #ffedd1; |
11 |
$style-color3: rgb(245, 213, 166); |
12 |
$style-color4: #f0d5ad; |
13 |
|
14 |
//
|
15 |
// Clear Fix |
16 |
//
|
17 |
.clearfix:after { |
18 |
content: '.'; |
19 |
display: block; |
20 |
clear: both; |
21 |
visibility: hidden; |
22 |
line-height: 0; |
23 |
height: 0; |
24 |
}
|
25 |
|
26 |
.clearfix { |
27 |
display: inline-block; |
28 |
}
|
29 |
|
30 |
html[xmlns] .clearfix { |
31 |
display: block; |
32 |
}
|
33 |
|
34 |
* html .clearfix { |
35 |
height: 1%; |
36 |
}
|
37 |
|
38 |
//
|
39 |
// Main Styling for Wood. |
40 |
//
|
41 |
@mixin standardsize { |
42 |
padding-top: 10px; |
43 |
padding-left: 15px; |
44 |
font-size: 19px; |
45 |
line-height: 1.25em; |
46 |
}
|
47 |
|
48 |
body { |
49 |
background-color: $style-color2; |
50 |
|
51 |
input[type='button'] { |
52 |
@include sassy-button('shiny', 10px, 16px, $style-color1, darken($style-color1, 20%), #000, bold); |
53 |
}
|
54 |
|
55 |
.button { |
56 |
@include sassy-button('shiny', 10px, 16px, $style-color1, darken($style-color1, 20%), #000, bold); |
57 |
display: inherit; |
58 |
margin-left: auto; |
59 |
margin-right: auto; |
60 |
margin-top: 10px; |
61 |
margin-bottom: 10px; |
62 |
text-align: center; |
63 |
}
|
64 |
|
65 |
#wrap { |
66 |
background-color: $style-color1; |
67 |
@include border-radius(.6em, .6em); |
68 |
margin-top: 10px; |
69 |
margin-bottom: 10px; |
70 |
border: 4px solid $style-color4; |
71 |
|
72 |
#header { |
73 |
background-color: $style-color2; |
74 |
@include border-radius(15px); |
75 |
background-repeat: no-repeat; |
76 |
border: 2px solid $style-color3; |
77 |
height: 130px; |
78 |
text-align: left; |
79 |
margin-top: 20px; |
80 |
font-size: 3em; |
81 |
|
82 |
h1 { |
83 |
a:link, a:visited { |
84 |
color: #000; |
85 |
text-decoration: none; |
86 |
}
|
87 |
padding-top: 40px; |
88 |
padding-left: 20px; |
89 |
}
|
90 |
h6 { |
91 |
font-size: .4em; |
92 |
font-style: italic; |
93 |
padding-left: 20px; |
94 |
}
|
95 |
}
|
96 |
#sidebar { |
97 |
background-color: $style-color2; |
98 |
@include border-radius(.6em, .6em); |
99 |
padding: .6em; |
100 |
vertical-align: text-top; |
101 |
overflow: hidden; |
102 |
margin-right: .5em; |
103 |
border: 2px solid $style-color3; |
104 |
hr { |
105 |
color: $style-color2; |
106 |
background-color: $style-color2; |
107 |
}
|
108 |
p, ul, li { |
109 |
@include standardsize; |
110 |
}
|
111 |
ul li { |
112 |
list-style-type: disc; |
113 |
margin-left: 25px; |
114 |
padding: 0; |
115 |
border: 0; |
116 |
outline: 0; |
117 |
font-size: 100%; |
118 |
vertical-align: baseline; |
119 |
background: transparent; |
120 |
}
|
121 |
li { |
122 |
margin-bottom: 10px; |
123 |
}
|
124 |
h1, h2, h3, h4, h5, h6 { |
125 |
@include standardsize; |
126 |
font-weight: bold; |
127 |
margin-top: .25em; |
128 |
margin-bottom: .25em; |
129 |
}
|
130 |
h1 { |
131 |
font-size: 2.5em; |
132 |
}
|
133 |
h2 { |
134 |
font-size: 2em; |
135 |
}
|
136 |
h3 { |
137 |
font-size: 1.5em; |
138 |
}
|
139 |
h4 { |
140 |
font-size: 1em; |
141 |
}
|
142 |
h5 { |
143 |
font-size: .8em; |
144 |
}
|
145 |
h6 { |
146 |
font-size: .6em; |
147 |
}
|
148 |
input[type='button'] { |
149 |
margin-left: 120px; |
150 |
clear: both; |
151 |
}
|
152 |
}
|
153 |
#content { |
154 |
input[type='button'] { |
155 |
margin-left: 200px; |
156 |
clear: both; |
157 |
}
|
158 |
h1, h2, h3, h4, h5, h6 { |
159 |
@include standardsize; |
160 |
font-weight: bold; |
161 |
margin-top: .25em; |
162 |
margin-bottom: .25em; |
163 |
}
|
164 |
h1 { |
165 |
font-size: 2.5em; |
166 |
}
|
167 |
h2 { |
168 |
font-size: 2em; |
169 |
}
|
170 |
h3 { |
171 |
font-size: 1.5em; |
172 |
}
|
173 |
h4 { |
174 |
font-size: 1em; |
175 |
}
|
176 |
h5 { |
177 |
font-size: .8em; |
178 |
}
|
179 |
h6 { |
180 |
font-size: .6em; |
181 |
}
|
182 |
hr { |
183 |
margin-top: 30px; |
184 |
margin-bottom: 30px; |
185 |
}
|
186 |
p, ul, li, details, summary, pre { |
187 |
@include standardsize; |
188 |
}
|
189 |
details { |
190 |
p, pre { |
191 |
margin-left: 25px; |
192 |
}
|
193 |
}
|
194 |
ul li { |
195 |
list-style-type: disc; |
196 |
margin-left: 25px; |
197 |
padding: 0; |
198 |
border: 0; |
199 |
outline: 0; |
200 |
font-size: 100%; |
201 |
vertical-align: baseline; |
202 |
background: transparent; |
203 |
}
|
204 |
li { |
205 |
margin-bottom: 10px; |
206 |
}
|
207 |
.box { |
208 |
clear: both; |
209 |
background-color: $style-color4; |
210 |
float: none; |
211 |
margin-left: auto; |
212 |
margin-right: auto; |
213 |
margin-top: 1.0em; |
214 |
margin-bottom: 1em; |
215 |
@include border-radius(.6em, .6em); |
216 |
display: block; |
217 |
padding: .5em; |
218 |
}
|
219 |
img { |
220 |
@include border-radius(10px); |
221 |
margin: 20px auto 20px auto; |
222 |
}
|
223 |
}
|
224 |
#footer { |
225 |
border-top: 5px; |
226 |
border-style: solid; |
227 |
border-color: $style-color3; |
228 |
@include border-radius(.6em, .6em); |
229 |
margin-top: 30px; |
230 |
p { |
231 |
margin-bottom: .6em; |
232 |
@include standardsize; |
233 |
margin-right: 15px; |
234 |
}
|
235 |
}
|
236 |
}
|
237 |
}
|
238 |
|
239 |
// CSS dropdown menu |
240 |
#navigation { |
241 |
text-align: left; |
242 |
border: 2px solid $style-color3; |
243 |
background-color: $style-color2; |
244 |
@include border-radius(15px); |
245 |
}
|
246 |
|
247 |
#menuh { |
248 |
font-size: 1.3em; |
249 |
font-family: arial, helvetica, sans-serif; |
250 |
background-color: $style-color1; |
251 |
}
|
252 |
|
253 |
#menuh ul { |
254 |
background-color: $style-color2; |
255 |
}
|
256 |
|
257 |
#menuh ul ul { |
258 |
background-color: $style-color2; |
259 |
@include border-radius(15px); |
260 |
border: 2px solid $style-color3; |
261 |
}
|
262 |
|
263 |
#menuh a { |
264 |
background-color: $style-color2; |
265 |
color: #000; |
266 |
}
|
267 |
|
268 |
#menuh a:link, #menuh a:visited, #menuh a:active { |
269 |
color: #000; |
270 |
background-color: $style-color2; |
271 |
}
|
272 |
|
273 |
#menuh a:hover { |
274 |
color: #000; |
275 |
background-color: $style-color4; |
276 |
@include border-radius(5px); |
277 |
}
|
278 |
|
279 |
// End CSS Drop Down Menu |
280 |
// Misc classes |
281 |
.picture { |
282 |
border: 3px solid $style-color3; |
283 |
@include border-radius(8px); |
284 |
float: left; |
285 |
margin: 5px 15px 15px 15px; |
286 |
}
|
287 |
|
288 |
a:link, a:visited { |
289 |
color: darken($style-color1, 50); |
290 |
text-decoration: none; |
291 |
}
|
292 |
|
293 |
strong { |
294 |
font-weight: bold; |
295 |
}
|
296 |
|
297 |
table { |
298 |
margin: 20px; |
299 |
border: 3px solid; |
300 |
@include border-radius(10px); |
301 |
border-color: lighten($style-color2, 6); |
302 |
th { |
303 |
text-align: center; |
304 |
font-weight: bold; |
305 |
padding: 10px 0 10px 0; |
306 |
}
|
307 |
tbody { |
308 |
td { |
309 |
padding: 10px; |
310 |
}
|
311 |
tr:nth-child(2n+1) { |
312 |
background-color: darken($style-color2, 5); |
313 |
}
|
314 |
tr:nth-child(even) { |
315 |
background-color: lighten($style-color2, 2.5); |
316 |
}
|
317 |
}
|
318 |
}
|
319 |
|
320 |
#commentSpacer { |
321 |
width: 100%; |
322 |
margin-top: 20px; |
323 |
margin-left: 15px; |
324 |
}
|
325 |
|
326 |
.tutorial_excerpt { |
327 |
margin-left: 20px; |
328 |
}
|
329 |
|
330 |
.tutorial_thumbnail { |
331 |
float: left; |
332 |
margin-right: 20px; |
333 |
margin-left: 20px; |
334 |
margin-bottom: 20px; |
335 |
}
|
336 |
|
337 |
.tutorial_wrap { |
338 |
margin-bottom: 50px; |
339 |
float: left; |
340 |
}
|
341 |
|
342 |
img.wp-post-image { |
343 |
-moz-border-radius: 15px; |
344 |
border-radius: 15px; |
345 |
box-shadow: 10px 10px 5px gray; |
346 |
}
|
347 |
|
348 |
.showcode { |
349 |
margin: 20px auto 20px 30px; |
350 |
-moz-border-radius: 15px; |
351 |
border-radius: 15px; |
352 |
border: $style-color4 3px; |
353 |
border-style: solid; |
354 |
background: white; |
355 |
}
|
356 |
|
357 |
#socialmedia { |
358 |
width: 700px; |
359 |
margin-top: 20px; |
360 |
margin-left: 15px; |
361 |
}
|
362 |
|
363 |
#socialbuttons { |
364 |
margin: auto; |
365 |
}
|
366 |
|
367 |
#socialbuttons a { |
368 |
opacity: 0.8; |
369 |
filter: alpha(opacity = 80); |
370 |
-webkit-transition: all ease-in-out 0.2s; |
371 |
-moz-transition: all ease-in-out 0.2s; |
372 |
-ms-transition: all ease-in-out 0.2s; |
373 |
-o-transition: all ease-in-out 0.2s; |
374 |
transition: all ease-in-out 0.2s; |
375 |
}
|
376 |
|
377 |
#socialbuttons a:hover { |
378 |
opacity: 1; |
379 |
filter: alpha(opacity = 100); |
380 |
}
|
381 |
|
382 |
#socialbuttons a { |
383 |
display: inline-block; |
384 |
height: 28px; |
385 |
width: 30px; |
386 |
background-image: url(/images/ico-subscribe-social.png); |
387 |
background-repeat: no-repeat; |
388 |
}
|
389 |
|
390 |
#socialbuttons a.twitter { |
391 |
background-position: -30px 0; |
392 |
}
|
393 |
|
394 |
#socialbuttons a.facebook { |
395 |
background-position: -60px 0; |
396 |
}
|
397 |
|
398 |
#socialbuttons a.googleplus { |
399 |
background-position: -210px 0; |
400 |
}
|
401 |
|
402 |
dl { |
403 |
margin-left: 20px; |
404 |
margin-top: 20px; |
405 |
margin-bottom: 20px; |
406 |
font-size: 19px; |
407 |
line-height: 1.25em; |
408 |
}
|
409 |
|
410 |
dt { |
411 |
margin-left: 20px; |
412 |
margin-bottom: 20px; |
413 |
font-weight: bold; |
414 |
}
|
415 |
|
416 |
dd { |
417 |
margin-left: 40px; |
418 |
margin-bottom: 20px; |
419 |
}
|
Благодаря этому коду определяется внешний вид веб-сайта: В нем задаются стилевые правила для фона, значения цвета, шрифта и т.д., что необходимо для стилевого оформления типичного веб-сайта.
В папке styling/Basic содержатся файлы, необходимые для определения стилевого оформления по умолчанию страницы 404, заголовка, подвала и бокового поля веб-сайта. Поэтому создайте файл под названием 404.html и разместите в нем следующий код:
1 |
<h2>404 Page</h2> |
2 |
|
3 |
<p>Sorry, we could not find the page.</p> |
Это базовая страница для отображения ошибки 404 (* сообщает, что запрашиваемый ресурс не существует на сервере). Вы должны осторожно подобрать информацию, которая будет тут отображаться, поскольку нежелательно открывать слишком много информации о работе вашего сайта. Поскольку эта информация будет отображаться в области для размещения контента страницы, то для пользователя не должно составить особого труда перейти на другие.
Далее создайте файл header.html с этим содержимым:
1 |
<h1><a href='/'>Test Site</a></h1> |
2 |
<h6>A New Approach</h6> |
3 |
<br>
|
Это просто неописательный заголовок (* описательный коротко описывает ресурс (имя компании или сайта)) с самым необходимым содержимым, однако благодаря его содержимому у CMS есть, что отображать.
Далее создайте файл footer.html с этим содержимым:
1 |
<footer>
|
2 |
[Column1] |
3 |
<p>Copyrighted 2012 by <a href="{{{WebAddress}}}/">Your Company</a> |
4 |
[/Column1] |
5 |
[Column2] |
6 |
<p>Running on a flat CMS server!</p> |
7 |
[/Column2] |
8 |
</footer>
|
Далее создайте файл sidebar.html с этим содержимым:
1 |
<h3>A Sidebar</h3> |
2 |
<p>This is a basic sidebar that can have other times.</p> |
Опять-таки, это просто заполнители (* текстовый или графический элемент электронного шаблона страницы, заменяемый реальным элементом). Все эти файлы копируются в папку site/parts и изменяются в зависимости от нужд сайта. Они располагаются там, чтобы серверу было что отослать с этими именами в случае, если пользователь забывает их создать.
Структура сайта
Теперь, когда мы разобрались с макетами и стилевым оформлением, пришло время создать базовый контент и структуру для собственно сайта. В папке site создайте папки parts, pages, posts, images, css и js.
Фрагменты кода
В папке parts будут содержаться небольшие кусочки кода html/css/javascript, из которых будет формироваться одиночный фрагмент, помещенный во многих местах веб-сайта. Эти фрагменты подгружаются на сервер и комбинируются с контентом страниц по необходимости. Для нашей демоверсии сайта создайте следующие части:
- footer.html со следующим кодом:
1 |
<footer>
|
2 |
<p style="float: left;">Copyrighted 2012 by <a href="{{{WebAddress}}}/">Your Company</a> |
3 |
<p style="float: right;">Running on a flat CMS server!</p> |
4 |
</footer>
|
5 |
<script type="text/javascript"> |
6 |
window.PageName = "{{{PageName}}}"; |
7 |
</script>
|
- head.html с этим кодом:
1 |
<link rel="shortcut icon" href="{{{WebAddress}}}/images/favicon.ico" /> |
- header.html со следующим содержимым:
1 |
<h1><a href='{{{ServerAddress}}}/'>Test Site</a></h1> |
2 |
<h6>Flat File System CMS</h6> |
- navbar.html со следующим кодом:
1 |
<div id="menuh-container"> |
2 |
<div id="menuh"> |
3 |
<ul>
|
4 |
<li>
|
5 |
<a class="top_parent">Pages</a> |
6 |
<ul>
|
7 |
<li>
|
8 |
<a href="{{{WebAddress}}}/flatcms">Flat CMS</a> |
9 |
</li>
|
10 |
</ul>
|
11 |
</li>
|
12 |
<li>
|
13 |
<a href="{{{WebAddress}}}/posts/blogs/flatcms">Blog</a> |
14 |
</li>
|
15 |
<li>
|
16 |
<a href="{{{WebAddress}}}/posts/news/flatcms" class="top_parent">News</a> |
17 |
</li>
|
18 |
<li>
|
19 |
<a href="{{{WebAddress}}}/about" class="top_parent">About</a> |
20 |
</li>
|
21 |
</ul>
|
22 |
</div>
|
23 |
</div>
|
- sidebar.html с этим кодом:
1 |
<h2>Side Bar</h2> |
2 |
<hr>
|
- socialmedia.html со следующим кодом:
1 |
<div id="socialmedia"> |
2 |
<div id="socialbuttons"> |
3 |
<a href="" class="twitter" title="Twitter"></a> |
4 |
|
5 |
<a href="" class="googleplus" title="Google+"></a> |
6 |
</div>
|
7 |
<div id="commentSpacer" class="clearfix"></div> |
8 |
<!-- Put other Social Media items here (ie: Disqus, etc.); -->
|
9 |
</div>
|
Сервер загружает эти фрагменты, используя имена без разрешений, в шаблон Handlebar для их раскрытия. Например, везде, где необходимо добавить фрагмент socialmedia.html, вы помещаете макрос {{{socialmedia}}}. Также эти фрагменты могут быть в формате Markdown (* упрощенный язык разметки, в котором для форматирования используется чистый текст) или любом другом, поддерживаемом сервером. В сервере, который будем создавать, поддерживаемые типы форматов следующие: HTML, Jade/Amber (* шаблонизатор для языка программирования Go) и Markdown. Я буду рассматривать эти подробности в руководстве, посвященном созданию собственно серверной части.
Страницы
Все страницы для сайта будут располагаться в папке pages. Пока что создайте следующие файлы с их одержимым:
- main.html с этим кодом:
1 |
<h3>Flat CMS Test Site</h3> |
2 |
<p>This is the Main page of the test site.</p> |
- flatcms.md со следующим кодом:
1 |
### Flat CMS Server |
2 |
|
3 |
This is a page about the flat CMS server. |
- about.md с этим кодом:
1 |
### About |
2 |
|
3 |
This would be a standard about page. |
Это демоверсии страниц для сайта. Единственная необходимая из них – main.html, поскольку сервер будет загружать контент этой страницы в память и отправлять оттуда. За счет этого ускоряется загрузка домашней страницы веб-сайта. Остальные две страницы имеют расширение md, поскольку они созданы в формате Markdown. Сервер преобразует контент в HTML - формат перед встраиванием в макет страницы.
Обычно на страницах содержится информация, которая особо не меняется с течением времени. Они предоставляют пользователю информацию о сайте, его назначении и целях.
По характеру страницы могут формировать иерархическую структуру за счет создания каталогов и подкаталогов со страницами. На основе имен этих папок создаются адреса для страниц папки pages.
Посты
В отличие от страниц посты – элементы, добавляемые регулярно, например: ежедневные/еженедельные/ежемесячные посты блога и новостные сообщения. Предполагается, что посты часто будут добавляться. В папке posts создайте две новые директории: blogs и news. В каждой из этих папок создайте папку flatcms. В них будут содержаться посты блога и новостные сообщения для сайта Flat CMS.
В папке posts/blogs/flatcms создайте следующие файлы:
- index.amber со следующим содержимым:
1 |
h3 Flat CMS Blog |
2 |
|
3 |
p This is a rambling blog about a flat CMS. |
4 |
|
5 |
mixin article($title, $link, $excerpt, $date) |
6 |
div.entry |
7 |
div.tutorial_wrap |
8 |
div.tutorial_div |
9 |
a[href=$link] |
10 |
h3 #{$title}
|
11 |
h5 #{$date}
|
12 |
p.tutorial_excerpt #{$excerpt}
|
13 |
div.clear |
14 |
|
15 |
+article("Flat CMS Running", "/posts/blogs/flatcms/flatcms", "Flat CMS Test Server is Running!", "August 12, 2015")
|
- flatcms.md со следующим содержимым:
1 |
The New Server is Running |
2 |
---- |
3 |
|
4 |
After much work and programming, the flat CMS server is running. Stay tuned for more news! |
5 |
|
6 |
{{{socialmedia}}}
|
Файл index.amber – шаблон Jade для создания различных постов блога. Благодаря шаблонизатору Jade добавление нового контента с необходимым форматированием значительно упрощается. За счет передаваемых в макрос (* здесь mixin article()) параметров создаются различные посты. Вы можете получить больше информации о Jade на Tuts+.
Здесь используется расширение amber, поскольку эквивалентом Jade для языка Go является Amber. Это так, поскольку код для серверной части изначально создавался на Go. Если вы хотите изменить расширение, то помните, что его необходимо изменить и в соответствующем месте кода для серверной части сайта.
В папке posts/news/flatcms создайте следующие файлы:
- index.amber со следующим содержимым:
1 |
h3 Flat CMS News |
2 |
|
3 |
p Here is where all the news about what I am doing is found. Please come back often to check it out! |
4 |
|
5 |
mixin article($title, $link, $excerpt, $date) |
6 |
div.entry |
7 |
div.tutorial_wrap |
8 |
div.tutorial_div |
9 |
a[href=$link] |
10 |
h3 #{$title}
|
11 |
h5 #{$date}
|
12 |
p.tutorial_excerpt #{$excerpt}
|
13 |
div.clear |
14 |
|
15 |
+article("Flat CMS is Running", "/posts/news/flatcms/flatcms", "The Flat CMS Test Server is Running!", "August 12, 2015")
|
- flatcms.md со следующим содержимым:
1 |
The New Server is Running |
2 |
---- |
3 |
|
4 |
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! |
5 |
|
6 |
{{{socialmedia}}}
|
Благодаря этому коду создаются новостные сообщения для демоверсии сайта. В этом сайте я использую одинаковый код для создания демоверсий страниц с руководствами и кодом.
Изображения
На всех веб-сайтах имеются изображения. В этой версии сайта все изображения располагаются в папке site/images. Для рассматриваемого тут сайта в этой папке будут находится только иконки социальных сетей. Вы можете получить файлы изображений из файла с кодом для этого руководства, доступного для скачивания.
CSS-файлы для сайта
Несмотря на то, что уже имеются файлы CSS в папках styling и layouts, возникнут моменты, когда вам необходимо будет добавить дополнительные правила CSS. В папке site/css содержатся все CSS-файлы, за счет которых вносятся те самые финальные штрихи для стилевого оформления сайта. Все CSS-файлы из папок layouts, styling и site/css будут скомпилированы вместе в один CSS-файл. Поэтому создайте папку site/css/final для размещения этого скомпилированного файла. Теперь создайте файл site/css/site.css со следующим содержимым:
1 |
.clear { |
2 |
clear: both; |
3 |
height: 0px; |
4 |
}
|
Совсем немного кода тут пока – просто определение класса clear. Вы можете добавить все, что хотите, однако это должно быть нечто, что не относится к категории файлов, располагающихся в папках layouts или styling.
Скрипты для сайта
В папке site/js содержатся все дополнительные необходимые для сайта файлы JavaScript. Они будут скомпилированы вместе и минимизированы для более быстрой загрузки сайта. Пока что создайте папку site/js/final для скомпилированного скрипта и файл site/js/01-site.js со следующим содержимым:
1 |
;
|
2 |
//
|
3 |
// File: Site.js
|
4 |
//
|
5 |
// Description: The JavaScript file for the site.
|
6 |
//
|
7 |
jQuery(document).ready(function () { |
8 |
//
|
9 |
// Code here will be ran once a page is loaded.
|
10 |
//
|
11 |
});
|
Пока что кода тут немного. Однако, когда вам понадобится добавить код JavaScript для сайта, его можно разместить там.
Поскольку скрипты будут скомпилированы вместе, я нумерую их в порядке, необходимом для загрузки. Подпрограмма для компилирования скриптов вместе загрузит их в числовом порядке.
Автоматизация при помощи gulp (* инструментарий для автоматизации рутинных или трудоемких задач, возникающих в процессе разработки)
Простейший способ ускорить загрузку страницы – свести число HTTP-запросов к минимуму. Поэтому лучше всего скомбинировать все файлы CSS в один и все файлы JavaScript в один. Лучший способ компиляции этих файлов – при помощи скрипта для выполнения сборки. Выполнение этой задачи каждый раз при получении сервером запроса – пустая трата время обработки (данных).
Мой выбор исполнителей скриптов для автоматизации сборки пал на gulp. gulp работает на Node.js. Поэтому, пожалуйста, перейдите на веб-сайт Node.js и скачайте ее для вашей системы. После того, как у вас установлена Node.js, вы можете установить gulp при помощи следующих команд:
1 |
npm install --global gulp |
2 |
npm install --global gulp |
3 |
npm install --global gulp-compass |
4 |
npm install --global gulp-autoprefixer |
5 |
npm install --global gulp-compressor |
6 |
npm install --global gulp-concat |
За счет них будет установлен gulp и все модули для gulp, которые я использую в скрипте для выполнения сборки. Теперь в корневом каталоге проекта создайте файл gulpfile.js со следующим содержимым:
1 |
// Requirements
|
2 |
var gulp = require('gulp'), |
3 |
compass = require('gulp-compass'), |
4 |
prefix = require('gulp-autoprefixer'), |
5 |
compressor = require('gulp-compressor'), |
6 |
concat = require('gulp-concat'); |
7 |
|
8 |
// Defines path to sass
|
9 |
var Theme = "Basic"; |
10 |
var Layout = "SingleCol"; |
11 |
var themesassRoot = 'themes/styling/' + Theme; |
12 |
var layoutsassRoot = 'themes/layouts/' + Layout; |
13 |
|
14 |
// Gulp task
|
15 |
gulp.task('theme-compass-to-css', function(){ |
16 |
return gulp.src(themesassRoot+'/sass/Basic.scss') |
17 |
.pipe(compass({ |
18 |
config_file: themesassRoot + '/config.rb', |
19 |
css: themesassRoot + '/css', |
20 |
sass: themesassRoot + '/sass', |
21 |
require: 'sassy-buttons' |
22 |
}))
|
23 |
.pipe(prefix("last 3 versions")) |
24 |
.pipe(gulp.dest(themesassRoot + '/css')) |
25 |
});
|
26 |
|
27 |
gulp.task('layout-compass-to-css', function(){ |
28 |
return gulp.src(layoutsassRoot+'/sass/base.scss') |
29 |
.pipe(compass({ |
30 |
config_file: layoutsassRoot + '/config.rb', |
31 |
css: layoutsassRoot + '/css', |
32 |
sass: layoutsassRoot + '/sass', |
33 |
require: 'susy' |
34 |
}))
|
35 |
.pipe(prefix("last 3 versions")) |
36 |
.pipe(gulp.dest(layoutsassRoot + '/css')) |
37 |
});
|
38 |
|
39 |
gulp.task('watch-compass', function(){ |
40 |
// What to watch
|
41 |
gulp.watch(themesassRoot + '/sass/Basic.scss', function(){ |
42 |
// What to run
|
43 |
gulp.run('theme-compass-to-css'); |
44 |
});
|
45 |
gulp.watch(layoutsassRoot + '/sass/Basic.scss', function(){ |
46 |
// What to run
|
47 |
gulp.run('layout-compass-to-css'); |
48 |
});
|
49 |
});
|
50 |
|
51 |
gulp.task('all-compass', ['theme-compass-to-css', 'layout-compass-to-css']); |
52 |
|
53 |
// js compressor
|
54 |
gulp.task('js', function () { |
55 |
gulp.src([ layoutsassRoot +'/js/*.js', themesassRoot + '/js/*.js', 'site/js/*.js']) |
56 |
.pipe(compressor()) |
57 |
.pipe(concat("final.js")) |
58 |
.pipe(gulp.dest('site/js/final')); |
59 |
});
|
60 |
|
61 |
// css compressor
|
62 |
gulp.task('css', ['all-compass'], function () { |
63 |
gulp.src([layoutsassRoot +'/css/*.css', themesassRoot + '/css/*.css', 'site/css/*.css']) |
64 |
.pipe(compressor()) |
65 |
.pipe(concat("final.css")) |
66 |
.pipe(gulp.dest('site/css/final')); |
67 |
});
|
68 |
|
69 |
gulp.task('default', ['all-compass', 'js', 'css']); |
Благодаря этому коду все файлы CSS и JavaScript будут скомпилированы в один: CSS – в site/css/final/final.css и JavaScript – в site/js/final/final.js. Также будут добавлены правила с префиксами браузеров в CSS-файл. Просто выполните в корневом каталоге команду:
1 |
gulp |
gulp скомпилирует все наши файлы и разместит результат в указанных директориях. Каждая задача, определенная в gulpfile.js, может быть выполнена по отдельности за счет указания имени задачи после команды gulp. Вы можете узнать больше о gulp на Tuts+.
Конфигурационный файл (* файл с данными о предыдущей, текущей или будущей конфигурации системы или приложения) сервера
Для всех серверов необходима информация о конфигурации. Поэтому в корневом каталоге создайте файл server.json со следующей информацией:
1 |
{
|
2 |
"CurrentLayout": "SingleCol", |
3 |
"CurrentStyling": "Basic", |
4 |
"ServerAddress": "localhost:8080", |
5 |
"SiteTitle": "Flat CMS Test Site", |
6 |
"Sitebase": "./site/", |
7 |
"TemplatBase": "./themes/", |
8 |
"Cache": false, |
9 |
"MainBase": "" |
10 |
} |
В json-файле содержится информация о макете и стилевом оформлении, которые необходимо использовать, адресе и порте, по которому сервер должен прослушивать запросы, главном названии сайта и подзаголовке, необходимости кэширования на случай проведения отладки (* процесс поиска и удаления логических ошибок в программе или HTML-текстах), расположении различных директорий, используемых для сайта. За счет предоставления этой информации серверу в json-файле он может стать гибким в настройке и содержать меньше жестко запрограммированной (* характеристика программы, не предусматривающей внесения изменений, настройки и т. п) информации.
Закачиваем сайт на веб-сервер
Большинство людей используют FTP-клиент (* программа, установленная на сетевой рабочей станции, которая использует протокол FTP для соединения c FTP-сервером и передачи файлов) для копирования их файлов на сервера. Это делается легко, однако процедура сильно отличается в зависимости от используемых систем и программ. Однако имеются некоторые альтернативные варианты.
Вы можете установить демон (* сетевая программа, работающая в фоновом режиме) Dropbox (* файловый хостинг, предоставляемый компанией Dropbox) для загрузки вашего сайта с вашего аккаунта в Dropbox. На Dropbox Wiki имеются детальные инструкции по его установке. Единственная проблема – то, что файлы автоматически закачиваются на сервер при внесении вами любых изменений. Иногда вам нужно будет внести изменения без их последующего добавления на сервер. На этот случай все файлы вашего сайта должны располагаться как на Dropbox, так и в ином месте. Когда справитесь с этим, создайте задание в вашем файле gulp для копирования новых файлов сайта на Dropbox.
Я предпочитаю использовать Dropzone 3 (* drop zone – зона сброса; область рабочего пространства, в которую может быть отбуксирован объект, перемещаемый с использованием операции drag-and-drop). Вы можете запрограммировать Dropzone 3 при помощи Ruby или Python на выполнение любых действий с файлом, который перетаскивается в нее. Также в Dropzone 3 есть множество встроенного функционала. Имеется встроенная возможность закачки файла на FTP/FTP-сервер. Я создал по одному месту назначения в Dropzone 3 для каждой из основных папок моего сайта. Затем, когда мне необходимо внести изменения в файл или добавить новый, я просто перетаскиваю его в соответствующую папку зоны сброса. Вы можете узнать подробнее о Dropzone 3 в моем руководстве «Writing Dropzone 3 Actions».
Заключение
За счет этих основных файлов будет создан веб-сайт, который выглядит следующим образом:
Это только начало! Теперь, когда у нас подготовлена структура сайта, пришло время начать создавать код для серверной части. Пожалуйста, присоединяйтесь ко мне в следующем руководстве, где мы создадим серверную часть кода на языке Go для этой демоверсии сайта.
