() translation by (you can also view the original English article)
Намітилася тенденція (* відносно стійкий напрямок розвитку певного явища, процесу або ідеї. Тут і надалі примітка перекладача) використання CMS (* content management system – система керування контентом; використовують для організації автоматизованого збирання, керування та публікації інформації; ПЗ для фільтрації, публікації, обслуговування і відновлення контенту веб-сайтів і порталів), на серверній частині яких використовується база даних у вигляді плоского файлу (* база даних, що зберігається у вигляді неструктурованого файлу (плоского файлу)). Це поняття описує CMS, інформація якої не зберігається у базі даних. Замість цього вся інформація зберігається у чисто текстових файлах. Оскільки велика кількість VPS (* virtual private server – віртуальний приватний сервер; віртуальний сервер, який користувач сприймає як виділений сервер, проте який у дійсності встановлено на комп'ютері, на якому працюють декілька веб-сайтів. На одному комп'ютері може бути декілька віртуальних виділених серверів, у кожного з яких є власна операційна система, на якій запущено серверне програмне забезпечення для окремого користувача) сього дні використовують жорсткі диски, що працюють на основі ОЗП (* оперативний запам'ятовуючий пристрій; напівпровідникова оперативна пам'ять, призначена для тимчасового збереження програм та даних. У звичайних комп'ютерах - місце, куди програму завантажують для виконання) (* віртуальний привід, що використовує ОЗП вашої системи у якості дисковода), то веб-сайти, що працюють на основі цього підходу, мають більшу працездатність та трохи безпечніші.
У цій серії посібників я покажу вам, як створити свою власну CMS, що працює на основі плоскої файлової системи (* система організації файлів, при якій вони не можуть мати однакових імен, якщо навіть знаходяться у різних каталогах), за допомогою деяких стандартних веб-технологій. Ці системи не мають набір усіх функціональних можливостей, що є в інших системах, проте мають базовий набір можливостей і при цьому хороший час відклику (* час, необхідний комп'ютеру для відповіді на запит; час між закінченням посилки запиту та початком отримання повідомлення з відповіддю).
Враховуючи те, що вся інформація знаходиться на жорсткому диску, організація файлів стає головним питанням. Пам'ятаючи це, інформацію сайту будемо зберігати окремо від інформації про стильове оформлення та розмітку. Також у папці для зберігання інформації сайту для кожного типу сторінок буде своя власна папка та папка parts для зберігання невеликих частин CMS. Завдяки цьому все зберігається на своїх місцях та виходить гнучка система.
Головна структура каталогів
Створіть у папці, яку будемо використовувати для розміщення файлів проектів, наступні директорії: src, site та themes. У папці src буде знаходитися код серверної частини, папка site призначена для розміщення інформації сайту та папка themes – для розміщення інформації про розмітку та теми.
У папці themes потрібно створити папки layouts та styling. У папці layouts будуть розташовуватися шаблони з розміткою різних веб-сторінок. Завдяки розділенню інформації про розмітку та стильове оформлення теми стають набагато гнучкіше. Поки що у нас буде єдиний макет у папці під назвою SingleCol.
Для створення всього стильового оформлення та макетів сторінок я використовую Sass, Compass и Susy (* Susy – движок для створення розмітки веб-сторінки. Це набір інструментів, за допомогою яких можна створити довільну CSS-сітку, що відповідає потребам дизайну конкретної веб-сторінки). 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 - великий, довгий) послідовність команд і/або натискань клавіш, записана макрорегістратором під унікальним ім'ям; блок команд, асоційований із певним унікальним ім'ям) 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-файли, завдяки яким вносяться ті самі фінальні штрихи для стильового оформлення сайту. Всі файли з папок layouts, styling та site/css будуть скомпільовані разом в один CSS-файл. Тому створіть папку site/css/final для розміщення цього скомпільованого файлу. Тепер створіть файл site/css/site.css з наступним вмістом:
1 |
.clear { |
2 |
clear: both; |
3 |
height: 0px; |
4 |
}
|
Зовсім небагато коду поки тут – просто визначення класу clear. Ви можете додати все, що захочете, проте це повинно бути дещо, що не відноситься до категорії файлів, що розташовуються у папці layout або 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-файлі міститься інформація про макет та стильове оформлення, які потрібно використовувати, адресу та порт, на якому сервер повинен прослуховувати запити, головну назву сайту та підзаголовок, потрібності гешування на випадок проведення налагодження, розташування різних директорій, що використовуються на сайті. Завдяки наданню цієї інформації серверу у json-файлі він може стати гнучким у налаштуванні та містити менше жорстко запрограмованої (* зарактеристика програми, що не передбачає внесення змін, налаштувань тощо) інформації.
Пересилаємо сайт на веб-сервер
Більшість людей використовують FTP-клієнт (* програма, встановлена на мережній робочій станції, що використовує протокол FTP для з'єднання з 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 для цієї демоверсії сайту.
