() translation by (you can also view the original English article)
"फ्लैट CMS डिजाइन" वेब सर्वर की प्रवृत्ति (trend) रही है। यह केवल एक कंटेंट मैनेजमेंट सिस्टम (CMS) को संदर्भित (refers) करता है जो किसी डाटाबेस में इसकी जानकारी संग्रहीत (store) नहीं करता है। इसके बजाय, सभी जानकारी प्लैन टेक्स्ट फ़ाइलों में संग्रहीत की जाती है। चूंकि कई वर्चुअल प्राइवेट सर्वर (VPS) इन दिनों रैम-आधारित हार्ड ड्राइव का उपयोग कर रहे हैं, यह एप्रोच तेज़ और थोड़ा और अधिक सुरक्षित है।
ट्यूटोरियल की इस श्रृंखला में, मैं आपको दिखाऊंगा कि कैसे कुछ मानक (standard) वेब तकनीक का उपयोग कर अपने खुद के फ्लैट फाइल सिस्टम CMS बनाएं। ये सिस्टम दूसरों की तरह फुल फीचर्ड नहीं हैं, लेकिन बेसिक एक अच्छी रिस्पांस समय के साथ हैं।
हार्ड ड्राइव पर सभी जानकारी के साथ, फ़ाइल आर्गेनाइजेशन एक बड़ी समस्या बन जाता है। इसे ध्यान में रखते हुए, साइट की जानकारी स्टाइलिंग और लेआउट जानकारी से अलग डायरेक्टरी में होगी। साथ ही, प्रत्येक प्रकार के पेज की साइट डायरेक्टरी के अंतर्गत CMS के छोटे हिस्सों के लिए पार्ट्स डायरेक्टरी के साथ अपनी खुद की डायरेक्टरी होती है। यह सब कुछ अपने ही स्थान पर रखता है और एक लचीली प्रणाली बनाता है।
मुख्य डायरेक्टरी संरचना
उस डायरेक्टरी में जिसमें आप प्रोजेक्ट बनाने जा रहे हैं, निम्न डायरेक्ट्रीज बनाएं: src, site और themes। src डायरेक्टरी में सर्वर कोड शामिल होंगे, site डायरेक्टरी सभी साइट की जानकारी के लिए है, और लेआउट और थीम जानकारी के लिए themes डायरेक्टरी।
themes डायरेक्टरी में, आपको एक layouts और एक styling डायरेक्टरी बनाने की आवश्यकता है। layouts डायरेक्टरी में विभिन्न वेब पेज लेआउट शामिल होंगे। स्टाइलिंग जानकारी से लेआउट जानकारी को अलग करके, थीम बहुत अधिक लचीली बन जाती हैं। अभी के लिए, SingleCol नामक एक लेआउट होगा।
सभी स्टाइलिंग और लेआउट निर्माण के लिए, मैं Sass, Compass, और Susy का उपयोग कर रहा हूँ Sass एक कस्टम स्टाइल शीट प्रसंस्करण (processing) भाषा है। यह आपकी वेबसाइट के लिए CSS स्टाइल शीट बनाने का एक अधिक मजबूत तरीका देता है। Compass Sass के लिए एक एक्सटेंशन है। Sassy-buttons वेबसाइट पर अच्छे दिखने वाले बटन बनाने के लिए एक Sass एक्सटेंशन है। Susy भी आपकी साइट के लिए एक ग्रिड लेआउट सिस्टम बनाने के लिए एक एक्सटेंशन है।
चूंकि रूबी सभी Macs पर पूर्व इनस्टॉल है, इसलिए आपको इसे इनस्टॉल करने की आवश्यकता नहीं होगी। विंडोज सिस्टम पर रूबी प्राप्त करने के लिए, आपको रूबी का विंडोज इंस्टालर डाउनलोड करने की आवश्यकता होगी। Linux पर, रूबी को इनस्टॉल करने के लिए आपको अपने सिस्टम के पैकेज मैनेजर का इस्तेमाल करना होगा।
एक बार रूबी आपके सिस्टम पर है, तो आप इन कमांड लाइनों के साथ 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, कम्पास 1.0.3, और Susy 2.2.5 का उपयोग कर रहा हूँ। आपके सिस्टम के कॉन्फ़िगरेशन के आधार पर, आपको इन कमांड्स को उनके सामने sudo लगाकर चलाना पड़ेगा।
Layouts
लेआउट बनाना शुरू करने के लिए, इन कमांड्स को SingleCol डायरेक्टरी में चलाएं:
1 |
compass init |
यह sass और stylesheets डायरेक्टरी और config.rb नामक एक फ़ाइल बनाएगा। चूंकि मुझे stylesheet डायरेक्टरी के लिए css का उपयोग करना पसंद है, stylesheets डायरेक्टरी को css में बदल दें। इसके अलावा, लेआउट के लिए किसी भी आवश्यक JavaScript फ़ाइलों के लिए js डायरेक्टरी बनाएं। config.rb फ़ाइल खोलें और इसे ऐसे बनाएं की यह इस तरह दिखें:
1 |
require 'susy' |
2 |
http_path = "/" |
3 |
css_dir = "css" |
4 |
sass_dir = "sass" |
5 |
images_dir = "images" |
6 |
javascripts_dir = "js" |
अब, वेबसाइट का बेसिक लेआउट बनाने के लिए, template.html नामक layout डायरेक्टरी में एक फ़ाइल बनाएं। इस फाइल में, इस कोड को जोड़ें:
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 है।
प्रत्येक सेक्शन को एक Handlebar macro के साथ दर्शाया जाता है। सर्वर यूज़र को इसे देने से पहले macros को बढ़ाता है।
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 कोड लोड होता है। फिर यह वेब पेज के सभी एलिमेंट्स के लिए उचित ग्रिड लेआउट बनाने के लिए susy को बढ़ाता है और सेट करता है।
पेज डिफाइन होने के बाद css नेविगेशन प्रणाली है। मेनू के लिए छिपे हुए ड्रॉप-डाउन माउस-ओवर डेफिनिशन के साथ विज़िबल होते हैं। यह एक css केवल मेनू प्रणाली देता है।
ये सभी स्टाइल्स वेबसाइट की बेसिक स्ट्रक्चर को डिफाइन करते हैं। यहां कुछ भी पेज का लुक नहीं बनता है, बस इसकी पोजीशन देता है। सभी स्टाइल styling कंटेंट द्वारा नियंत्रित किया जाता है।
स्टाइल्स
styling डायरेक्टरी के लिए, Basic नामक एक डायरेक्टरी बनाएं। layouts/SingleCol डायरेक्टरी के लिए किए गए sass इनफार्मेशन को आरंभ करें। इस डायरेक्टरी में, निम्न कमांड लाइन चलाएं:
1 |
compass init |
यह sass और stylesheets डायरेक्टरी और config.rb नामक एक फ़ाइल बनाएगा। चूंकि मुझे stylesheets डायरेक्टरी के लिए css का उपयोग करना पसंद है, stylesheets डायरेक्टरी को css में बदल दें। साथ ही, थीम बनाने के लिए किसी भी जावास्क्रिप्ट के लिए js डायरेक्टरी बनाएं। 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 एरर पेज है। आपको यहां दी गई जानकारी के बारे में सावधान रहना होगा, क्योंकि आप अपनी साइट के काम करने के तरीको के बारे में बहुत ज्यादा जानकारी नहीं दिखाना चाहते हैं। चूंकि यह पेज के contents एरिया में रखा जाएगा, इसलिए यूज़र के लिए इसे से नेविगेट करना आसान होगा।
इसके बाद, इस कंटेंट के साथ header.html फ़ाइल बनाएं:
1 |
<h1><a href='/'>Test Site</a></h1> |
2 |
<h6>A New Approach</h6> |
3 |
<br>
|
यह केवल एक बेयर-बोन्स हैडर है जो गैर-वर्णनात्मक (non-descriptive) है, लेकिन यह 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
parts डायरेक्टरी में html/css/javascript के छोटे स्निपेट (snippets) होंगे जो वेबसाइट के कई स्थानों पर एक सिंगल यूनिट बनाएंगे। ये सभी पार्ट्स सर्वर में लोड हो रहे है और आवश्यकतानुसार पेज कटेंट के साथ मिलाये जा सकते है। हमारे डेमो साइट के लिए, निम्न भागों बनाएं:
- इस कोड के साथ 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 का पार्ट रखा जाना है, आप macro {{{socialmedia}}} को वहां जगह देते हैं। इसके अलावा, ये पार्ट्स HTML, मार्कडाउन, या किसी अन्य स्वरूप में हो सकते हैं जो कि सर्वर संभाल सकता है। मैं जिन सर्वरों में बनाऊँगा, उनमें सपोर्टेड फ़ाइलें HTML, Jade/Amber, और Markdown हैं I मैं इन डिटेल्स को वास्तविक सर्वर निर्माण ट्यूटोरियल में प्राप्त करूँगा।
Pages
साइट के सभी पजेस को 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 में एम्बेड करेगा।
सामान्य तौर पर, पेजो में ऐसी जानकारी होती है जो समय के साथ बहुत कुछ बदलती नहीं है। वे व्यूअर को साइट, इसके उद्देश्य और लक्ष्यों के बारे में जानकारी देते हैं।
पेज डायरेक्टरी और सब-डायरेक्टरी पेज के साथ बनाकर प्रकृति के अनुसार पदानुक्रमित (hierarchical) हो सकते हैं। ये डायरेक्टरी के नाम इन पेजो की डायरेक्ट्रीज में एड्रेस बनाते हैं।
Posts
पेजो के विपरीत, पोस्ट्स आइटम हैं जो नियमित रूप से जोड़े जाते हैं, उदाहरण के लिए, दैनिक/साप्ताहिक/मासिक ब्लॉग पोस्ट और समाचार आइटम। इस क्षेत्र में अक्सर बदलाव होने की उम्मीद है। 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 HTML टेम्प्लेट सिस्टम सटीक प्रारूप के साथ नए कंटेंट को जोड़ना आसान बनाता है। मैक्रो (macros) के पैरामीटर अलग-अलग आइटम बनाते हैं। आप Tuts+ पर Jade के बारे में अधिक जानकारी पा सकते हैं
यहां, उपयोग में लिया गया एक्सटेंशन amber है क्योंकि Jade के समतुल्य Go language Amber है। चूंकि वह था जहां मैंने शुरू किया, इसी तरह मैंने इसे बनाया। यदि आप एक्सटेंशन को बदलना चाहते हैं, तो इसे उपयुक्त सर्वर कोड में भी बदलना याद रखें।
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}}}
|
यह डेमो साइट के लिए समाचार आइटम बनाता है। मेरी साइट में, मैं ट्यूटोरियल और कोड डेमो पेजो के लिए एक ही संरचना का उपयोग करता हूं।
Images
सभी वेबसाइटों में पिक्चर होती हैं। इस सेटअप में, सभी पिक्चर site/images डायरेक्टरी में हैं। इस डेमो साइट के लिए, यहां सिर्फ सोशल मीडिया आइकन रखा जाएगा। आप डाउनलोड फ़ाइल से इमेज फ़ाइल प्राप्त कर सकते हैं।
Site CSS
layout css और styling css के साथ भी, आपको विशेष css नियमों की आवश्यकता होगी। site/css डायरेक्टरी में सभी css फाइलें हैं जो वेबसाइट पर उन फिनिशिंग टॉचेस डालती हैं। सभी layout, styling, और site/css फ़ाइलों को एक css फाइल में एक साथ संकलित किया जाएगा। इसलिए, इस संकलित (compiled) फ़ाइल को रखने के लिए site/css/final डायरेक्टरी बनाएं। अब, इन कंटेंट्स के साथ site/css/site.css फ़ाइल बनाएं:
1 |
.clear { |
2 |
clear: both; |
3 |
height: 0px; |
4 |
}
|
यहां बहुत ज्यादा नहीं है- सिर्फ एक clear क्लास के लिए एक डेफिनिशन है। आप जो चाहें जोड़ सकते हैं, लेकिन ऐसा कुछ होना चाहिए जो लेआउट या स्टाइलिंग केटेगरी में नहीं आता है।
Site Scripts
site/js डायरेक्टरी में साइट के लिए सभी विशेष जावास्क्रिप्ट फाइलें हैं। इन्हें एक साथ संकलित (compile) किया जाएगा और तेज साइट लोड करने के लिए कम से कम किया जाएगा। अभी के लिए, compiled स्क्रिप्ट के लिए 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 |
});
|
यहां अभी बहुत कुछ नहीं है। लेकिन, क्योंकि आपकी साइट को कस्टम जावास्क्रिप्ट की आवश्यकता है, इसे यहां रखा जा सकता है।
चूंकि स्क्रिप्ट्स को एक साथ संकलित (compile) किया जाएगा, इसलिए मैं उन्हें लोड करने के लिए आवश्यक क्रम में सूचीबद्ध करता हूं। स्क्रिप्ट को एक साथ संकलित (compile) करने के लिए नियमित रूप से उन्हें संख्यात्मक क्रम (numerical order) में लोड किया जाएगा।
Automating Gulp के साथ
एक वेब पेज लोड को गति देने का सबसे आसान तरीका है संभव के रूप में कुछ HTTP रिक्वेस्ट हैं। इसलिए, सभी CSS और जावास्क्रिप्ट फ़ाइलों को एक फाइल में जोड़ना सबसे अच्छा है। इन फ़ाइलों को संकलित (compile) करने का सबसे अच्छा तरीका बिल्ड स्क्रिप्ट के साथ है। हर बार सर्वर को रिक्वेस्ट प्राप्त करने का समय प्रोसेसिंग टाइम की बर्बादी है।
ऑटोमेशन स्क्रिप्ट धावक की मेरी पसंद 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 और जावास्क्रिप्ट को एक फाइल में संकलित (compile) करेगा: CSS के लिए site/css/final/final.css फ़ाइल में और जावास्क्रिप्ट के लिए site/js/final/final.js फाइल में। यह CSS के लिए ब्राउज़र prefix नियम भी जोड़ देगा। बस टॉप डायरेक्टरी में कमांड चलाएँ:
1 |
gulp |
Gulp हमारी सभी फाइलों को संकलित (compile) करेगा और उन्हें उचित स्थान पर छोड़ देगा। gulpfile.js में परिभाषित प्रत्येक कार्य gulp कमांड के बाद कार्य नाम देकर व्यक्तिगत रूप से चलाया जा सकता है। आप Tuts+ पर Gulp के बारे में अधिक जान सकते हैं
सर्वर कॉन्फ़िगरेशन फ़ाइल
सभी सर्वर को कॉन्फ़िगरेशन इनफार्मेशन की आवश्यकता है। इसलिए, डायरेक्ट्रीज की जड़ में, इस जानकारी के साथ फ़ाइल 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 फ़ाइल में सर्वर को इस जानकारी की आपूर्ति करके, सर्वर लचीला हो सकता है, कम हार्ड-कोडित (hard-coded) जानकारी के साथ।
एक सर्वर में साइट को अपलोड करना
अधिकांश लोग अपने सर्वर पर फ़ाइलों की प्रतिलिपि बनाने के लिए किसी FTP क्लाइंट का इस्तेमाल करते हैं। यह करना आसान है, लेकिन इसका इस्तेमाल सिस्टम और प्रोग्राम्स के बारे में बहुत भिन्न होता है। लेकिन कुछ विकल्प हैं।
आप अपने Dropbox खाते से अपनी साइट को लोड करने के लिए एक Dropbox डेमन (daemon) सेट कर सकते हैं। Dropbox Wiki साइट पर यह सेट अप करने के लिए विस्तृत निर्देश हैं एकमात्र समस्या यह है कि जब आप कोई भी परिवर्तन करते हैं, तब फ़ाइलें स्वचालित रूप से सर्वर पर अपलोड हो जाती हैं। कभी-कभी, आप इनके सर्वर पर जाने के बिना परिवर्तन करना चाहते हैं। यदि यह मामला है, तो सभी साइट की फ़ाइलों का एक नॉन-ड्रॉपबॉक्स लोकेशन और एक Dropbox location भी है। जब किया जाए, तो Dropbox में नई साइट की फ़ाइलों की प्रतिलिपि बनाने के लिए अपनी Gulp फ़ाइल में एक टास्क बनाएं।
मेरा पसंदीदा तरीका Dropzone 3 का उपयोग करना है आप Dropzone 3 को Ruby या Python के साथ किसी फ़ाइल पर किसी प्रकार के एक्शन करने के लिए प्रोग्राम कर सकते हैं जो उस पर छोड़ा गया है। इसमें कई अंतर्निहित (built-in) कार्य हैं। FTP/SFTP साइट पर अपलोड करने के लिए एक फाइल एक्शन बनाई गई है। मैं अपनी साइट पर प्रत्येक मुख्य डायरेक्ट्रीज के लिए एक Dropzone 3 लक्ष्य बना देता हूं। तब, जब मैं एक फ़ाइल को बदलना या जोड़ना चाहता हूं, तो मैं उसे उचित डायरेक्टरी dropzone लक्ष्य पर खींच खींचूंगा। आप अपने ट्यूटोरियल के साथ Dropzone 3 के बारे में अधिक सीख सकते हैं Dropzone 3 Action लेखन के साथ।
निष्कर्ष
ये बुनियादी फ़ाइलें ऐसी वेबसाइट बनाएगी जो इस तरह दिखती हैं:
ये तो बस शुरुआत है! अब, साइट स्ट्रक्चर के साथ बाहर, यह वेब सर्वर का निर्माण शुरू करने का समय है। कृपया मुझे अगले ट्यूटोरियल में शामिल करें जहां मैं इस डेमो साइट के लिए एक Go language आधारित वेब सर्वर का निर्माण करूँगा।
