Advertisement
  1. Web Design
  2. Dropbox

Použití DropPages pro Super jednoduché statické webové stránky

Scroll to top
Read Time: 23 min

Czech (Čeština) translation by Tereza Foretová (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Asi víte, že Dropbox je ideální pro ukládání zálohy dat a sdílení souborů, ale věděli jste, že můžete použít jako statické stránky webového hostitele příliš? Díky šikovné aplikace, jako je DropPages, kterou budeme pokrývat tady dnes, můžete!

Proces za DropPages je opravdu skvělý. Prostě dát DropPages aplikacím přístup k vašemu účtu Dropbox a vytvoří složku "My.DropPages", na který budete nahrávat soubory vašeho webu. Když lidé navštíví vaši doménu, kterou DropPages funguje jako prostředník mezi prohlížečem a účtu Dropbox, pak Stahuji soubory ze složky "My.DropPages" a slouží jim jako plně funkční webové stránky.

Jak Dropbox přichází s aplikací, která synchronizuje soubory na vašem počítači s online úložištěm, stačí udržovat váš web místně a umožnit Dropbox automaticky vkládat za vás. To znamená, žádné starosti o FTP a vzhledem k tomu, vaše soubory jsou offline a na Dropbox je to v podstatě zajištěný ve výchozím nastavení.

Co budeme dělat

Během tohoto kurzu budu ukázat vám jak udělat klasický pět stránky statické stránky s DropPages, používající modifikovanou verzi šablony "Cuda" od grafické Burger.

Nezaměříme se, jak je zapsán základní HTML a CSS šablony, ale spíše jak zvládnout integraci s DropPages. Veškerý kód požadované šablony budou zahrnuty v kopii & vložte připravené formát níže, nebo si můžete stáhnout zdrojové soubory přes tlačítko Stáhnout přílohu zde v postranním panelu.

Pojďme začít!

DropPages propojení s Dropboxem

Pokud jste tak již neučinili, přejděte na Dropboxu a registrovat, Stáhněte a nainstalujte aplikace, které poskytují synchronizovat offline soubory do úložiště online.

Pak zamiřte do https://my.droppages.com/ a přihlaste se pomocí své údaje o účtu DropBox. Tímto způsobem dáváte DropPages přístup k nastavení složky v účtu Dropbox, který vaše webové stránky. Po aplikaci Dropbox synchronizuje vaše online soubory do vašeho počítače zobrazí strukturu složek jako je tento v offline složce Dropbox:

Každý z webů, které vytvoříte prostřednictvím DropPages bude žít uvnitř této složky. Nyní jste připraveni pokračovat a vytvořit nový web.

Vytvořit nový web

Po udělení přístupu k vašemu účtu Dropbox budete automaticky přesměrováni na palubovce DropPages. Pokud ne, budete mít přístup na http://my.droppages.com/account

Vytvoření nové stránky klepněte na velké modré tlačítko "Vytvořit nový web":

Pak přejdete na stránku, kde můžete zadat doménu, kterou chcete použít pro váš web. Můžete použít subdoménu, která není již jiným uživatelem DropPages, ale musíte zajistit, že patří "droppages.com" součást domény při zadávání vašeho výběru, jako tak:

Po zadání vaší domény, klepněte na tlačítko "Vytvořit" a DropPages nastaví strukturu složek pro váš nový web uvnitř složky "My.DropPages". Při synchronizaci offline složky Dropbox to bude vypadat takto:

Co je ve struktuře složek?

Ve smyslu tří složek, které vidíte jsou:

  • Obsah: Drží txt soubory zapsané v markdown a / nebo HTML tvoří obsah stránek vašeho webu.
  • Veřejné: Drží veřejně přístupné stránky soubory, jako jsou styly, obrázky, PDF atd. Úplný seznam typů souborů, které jsou povoleny ve složce "Veřejné" Podívejte se na dokumentaci k Dropbox.
  • Šablony: Obsahuje soubory HTML šablon vašeho webu, do které bude vykreslen obsah.

Při prvním vytvoření webu obsahuje zástupný soubor v každé z těchto složek:

  1. index.txt ve složce "Obsahu"
  2. Main.css ve složce "Veřejné"
  3. Base.html ve složce "Šablony"

Když navštívíte svou nově vytvořenou doménu DropPages ty tři soubory, bude vám toto:

První věc, kterou musíme udělat, je přidat některé vlastní motiv styling kolem tohoto základního obsahu, nahradit kód v existující "main.css" a "base.html" soubory.

Poznámka o úpravách souborů DropPages

Kdykoliv jsem označovat editace souborů webu v průběhu tohoto kurzu bude znamenat, pomocí editor upřednostňované kódu přímo na soubory v režimu offline Dropbox video aplikace video My.DropPages video mysubdomain.droppages.com složky.

Po uložení změn do souboru, který upravujete trochu času Dropbox aplikaci nahrát vaše soubory na váš účet a pak aktualizovat váš DropPages web zobrazíte úpravy jít žít.

Přidání vlastního motivu styl

Jak jsem již zmínil dříve, my nebudeme mluvit o skutečné procesy za vytvoření základní CSS a HTML této šablony designu, takže jsme se soustředit na zpracování DropPages integrace. Díky, že řekl, tady je seznam stylů připravil jsem dříve.

Přidat vlastní CSS

Zkopírujte níže uvedený kód a vložte jej do "main.css" soubor ve složce "Veřejné" vašeho webu (Připravte se - to je docela kus..)

Veřejné video main.css

1
html {
2
    font-family: sans-serif;
3
    -ms-text-size-adjust: 100%;
4
    -webkit-text-size-adjust: 100%;
5
}
6
7
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
8
    display: block;
9
}
10
11
audio,canvas,progress,video {
12
    display: inline-block;
13
    vertical-align: baseline;
14
}
15
16
audio:not([controls]) {
17
    display: none;
18
    height: 0;
19
}
20
21
[hidden],template {
22
    display: none;
23
}
24
25
abbr[title] {
26
    border-bottom: 1px dotted;
27
}
28
29
b,strong {
30
    font-weight: bold;
31
}
32
33
dfn {
34
    font-style: italic;
35
}
36
37
mark {
38
    background: #ff0;
39
    color: #000;
40
}
41
42
small {
43
    font-size: 80%;
44
}
45
46
sub,sup {
47
    font-size: 75%;
48
    line-height: 0;
49
    position: relative;
50
    vertical-align: baseline;
51
}
52
53
sup {
54
    top: -.5em;
55
}
56
57
sub {
58
    bottom: -.25em;
59
}
60
61
svg:not(:root) {
62
    overflow: hidden;
63
}
64
65
figure {
66
    margin: 1em 40px;
67
}
68
69
pre {
70
    overflow: auto;
71
}
72
73
code,kbd,pre,samp {
74
    font-family: monospace,monospace;
75
    font-size: 1em;
76
}
77
78
button,input,optgroup,select,textarea {
79
    color: inherit;
80
    font: inherit;
81
    margin: 0;
82
}
83
84
button {
85
    overflow: visible;
86
}
87
88
button,select {
89
    text-transform: none;
90
}
91
92
button,html input[type="button"],/* 1 */,input[type="reset"],input[type="submit"] {
93
    -webkit-appearance: button;
94
    cursor: pointer;
95
}
96
97
button[disabled],html input[disabled] {
98
    cursor: default;
99
}
100
101
button::-moz-focus-inner,input::-moz-focus-inner {
102
    border: 0;
103
    padding: 0;
104
}
105
106
input {
107
    line-height: normal;
108
}
109
110
input[type="checkbox"],input[type="radio"] {
111
    box-sizing: border-box;
112
    padding: 0;
113
}
114
115
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
116
    height: auto;
117
}
118
119
input[type="search"] {
120
    -webkit-appearance: textfield;
121
    -moz-box-sizing: content-box;
122
    -webkit-box-sizing: content-box;
123
    box-sizing: content-box;
124
}
125
126
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
127
    -webkit-appearance: none;
128
}
129
130
fieldset {
131
    border: 1px solid #c0c0c0;
132
    margin: 0 2px;
133
    padding: .35em .625em .75em;
134
}
135
136
legend {
137
    border: 0;
138
    padding: 0;
139
}
140
141
textarea {
142
    overflow: auto;
143
}
144
145
optgroup {
146
    font-weight: bold;
147
}
148
149
table {
150
    border-collapse: collapse;
151
    border-spacing: 0;
152
}
153
154
td,th {
155
    padding: 0;
156
}
157
158
* {
159
    box-sizing: border-box;
160
    -moz-box-sizing: border-box;
161
}
162
163
html {
164
    width: 100%;
165
    height: 100%;
166
}
167
168
body {
169
    margin: 0;
170
    width: 100%;
171
    height: 100%;
172
    background-color: #e7f1f8;
173
    font-family: 'Titillium Web';
174
}
175
176
a,a:visited,a:link {
177
    text-decoration: none;
178
    color: #3c5499;
179
}
180
181
a:hover,a:active {
182
    color: #17c2a4;
183
}
184
185
h1,h2,h3,h4,h5,h6 {
186
    font-family: 'Titillium Web';
187
    line-height: 1.313em;
188
}
189
190
h1 {
191
    font-size: 2.625em;
192
    margin: .563em 0;
193
}
194
195
h2 {
196
    font-size: 2.25em;
197
    margin: .563em 0;
198
}
199
200
hr {
201
    border: 0;
202
    border-bottom: .25em solid #e7f1f8;
203
}
204
205
.short {
206
    width: 5.625em;
207
}
208
209
.wrap {
210
    width: 100%;
211
    max-width: 75em;
212
    margin: 0 auto;
213
    position: relative;
214
}
215
216
.wrap:before,.wrap:after {
217
    content: " ";
218
    display: table;
219
}
220
221
.wrap:after {
222
    clear: both;
223
}
224
225
.site_header:before {
226
    content: " ";
227
    background-color: #17c2a4;
228
    width: 100%;
229
    height: 40.625rem;
230
    position: absolute;
231
    z-index: -1;
232
    top: 0;
233
    left: 0;
234
    right: 0;
235
}
236
237
.site_header {
238
    text-align: center;
239
    color: #fff;
240
    padding: 1.618rem 0 3.236rem 0;
241
}
242
243
.site_title {
244
    font-size: 4.5rem;
245
    margin: 0;
246
}
247
248
.site_title a {
249
    color: #fff;
250
}
251
252
.site_tagline {
253
    font-size: 1.125em;
254
    margin: 0;
255
}
256
257
.site_tagline a {
258
    color: #fff;
259
}
260
261
.mainmenu {
262
    background-color: #87509c;
263
    border-radius: .375em .375em 0 0;
264
    min-height: 3.75em;
265
    padding-bottom: .875em;
266
    text-align: center;
267
}
268
269
.mainmenu ul {
270
    list-style: none;
271
    display: inline-block;
272
    margin: 0;
273
}
274
275
.mainmenu li {
276
    display: inline-block;
277
    margin: .875em .25em 0 .25em;
278
}
279
280
.mainmenu a {
281
    padding: 0 1.125em;
282
    text-transform: uppercase;
283
    color: #fff;
284
    line-height: 2em;
285
}
286
287
.mainmenu .current,.mainmenu li:hover,.mainmenu li:active {
288
    background-color: #643a79;
289
    border-radius: .25em;
290
}
291
292
.content {
293
    font-size: 1.125em;
294
    background-color: #fff;
295
    color: #3c4761;
296
    padding: 3.236em;
297
    min-height: 37.5rem;
298
}
299
300
.content:before,.content:after {
301
    content: " ";
302
    display: table;
303
}
304
305
.content:after {
306
    clear: both;
307
}
308
309
.contentwrap {
310
    position: relative;
311
}
312
313
.secondarynav {
314
    float: right;
315
    margin: 0 0 1.618rem 1.618em;
316
    border: .0625rem solid #e7f1f8;
317
    min-width: 18.75rem;
318
    padding: 0 1.618rem;
319
}
320
321
.breadcrumbs ul {
322
    list-style: none;
323
    margin-left: 0;
324
    padding-left: 0;
325
}
326
327
.breadcrumbs li {
328
    display: inline;
329
}
330
331
.breadcrumbs li:before {
332
    content: " > ";
333
}
334
335
.breadcrumbs li:first-child:before {
336
    content: " ";
337
}
338
339
.bigbutton {
340
    border-radius: 4px;
341
    cursor: pointer;
342
    background-clip: padding-box;
343
    background-color: #eb7d4b;
344
    box-shadow: inset 0 -4px 0 #c7693f;
345
    border: 0;
346
    margin: 3.236em auto;
347
    display: block;
348
    text-align: center;
349
    width: auto;
350
}
351
352
.bigbutton a {
353
    padding: 1.125em 4.375em;
354
    text-transform: uppercase;
355
    color: #fff;
356
    font-weight: bold;
357
    display: inline-block;
358
}
359
360
.candocols {
361
    width: 25%;
362
    float: left;
363
    text-align: center;
364
    margin: 4.854rem auto;
365
}
366
367
.site_footer {
368
    background-color: #3c5499;
369
    padding: 1.618rem 0;
370
    text-align: center;
371
}
372
373
.site_footer a {
374
    color: #fff;
375
    font-size: 1.5em;
376
    font-weight: 600;
377
    margin: 0 1.618rem;
378
}
379
380
.site_footer a:hover {
381
    color: #30bae7;
382
}
383
384
@media (max-width: 55rem) {
385
    .candocols {
386
        width: 50%;
387
        margin: 1.618rem auto;
388
    }
389
}
390
391
@media (max-width: 35rem) {
392
    .candocols {
393
        width: 100%;
394
    }
395
}
396
397
@media (max-width: 320px) {
398
    html {
399
        min-width: 320px;
400
    }
401
}

Tento CSS bude zpracovávat všechny základy rozvržení, typografie, barevné schéma a odezvu.

Teď jen Musíme vytáhnout této šablony stylů do naší hlavní šablonu, jakož i přidání některé doplňky, jako jsou záhlaví a zápatí.

Přidat vlastní HTML

Zkopírujte níže uvedený kód a vložte jej do "base.html" soubor do složky "Šablony" vašeho webu.

Šablony video base.html

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
  <title>Easy Static Site via DropPages.com</title>
6
	<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,700' rel='stylesheet' type='text/css'>
7
	<link href='/main.css' rel='stylesheet' type='text/css'>
8
</head>
9
<body>
10
<header class="site_header" role='banner' itemscope itemtype='http://schema.org/WPHeader'>
11
	<h1 class="site_title"><a title="Easy Static Site on DropPages.com" href='/'>Easy Static Site</a></h1>
12
	<p class="site_tagline"><a title="Easy Static Site on DropPages.com" href='/'>Edit locally and host instantly on Dropbox with DropPages.com</a></p>
13
</header>
14
<div class="wrap">
15
	<nav class="mainmenu">
16
	{{PrimaryNavigation}}
17
	</nav>
18
	<main class="content">
19
	{{Body}}
20
	</main>
21
</div>
22
<footer class="site_footer" itemscope itemtype='https://schema.org/WPFooter'>
23
	<p><a href="#">Facebook</a> <a href="#">Twitter</a> <a href="#">Google+</a> <a href="#">LinkedIn</a> <a href="#">Behance</a> <a href="#">Dribbble</a> <a href="#">GitHub</a></p>
24
</footer>
25
</body>
26
</html>

Tento HTML kód provede několik věcí. To táhne v "main.css" Šablona stylů, kterou jste právě upravili také webfont od Google. To vytvoří statické záhlaví předváděl název webu a doplňující text a zápatí s odkazy na různé stránky sociálních sítí a portfolio. Také vytváří prostor pro primární navigační menu v, stejně jako prostor pro obsah zobrazit.

Integrace s DropPages se děje prostřednictvím dvou velmi jednoduchá šablona tags:

  • {{PrimaryNavigation}} - vykreslí neuspořádaný seznam všech stránek na webu, včetně domovské stránky.
  • {{Tělo}} - vypíše obsah ze souborů, které přidáte do složky "Obsah".

Všimněte si umístění těchto dvou šablon značky ve výše uvedeném HTML s {{PrimaryNavigation}} tag umístěn uvnitř elementu nav a {{tělo}} tag umístěn uvnitř hlavní prvek.

Na aktualizaci webu by měl nyní vypadat takto:

Všimněte si, jak stejný obsah "Hello world", kterou jste viděl na novém webu výchozí je stále na místě, ale uprostřed styling, který jsme právě přidali prostřednictvím "main.css" a "base.html" soubory.

Teď pojďme do toho a přidat některé z našich vlastních vlastní domovskou stránku obsahu.

Přidání obsahu na domovskou stránku

Jako součást naší vlastní domovskou stránku obsahu jsme včetně čtyři obrazy. Získat vlastní kopii těchto obrazů z zdrojových souborů připojených k tomuto kurzu. Po stažení a extrahování hlavní soubor EasyDropPagesStaticSite.zip se zobrazí druhý soubor zip do pojmenované homepage_images.zip. Extrahujte soubor a umístěte obrazy, které obsahuje do "Veřejné" složky webu.

Potom zkopírujte níže uvedený kód a vložte jej do "index.txt" soubor v "Obsahu" složce vašeho webu.

Obsah video index.txt

1
:base
2
3
<h1 align="center">Hi there! We are the new kids on the block and we build awesome websites and mobile apps.</h1>
4
5
<button class="bigbutton"><a href="/Contact+Us">Work With Us</a></button>
6
7
<h2 align="center">WE GOT SKILLS!</h2>
8
9
<hr class="short" />
10
11
<p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />tempor incididunt ut labore et dolore magna aliqua.</p>
12
13
<div class="candocols">
14
<img src="webdesign.png">
15
</div>
16
17
<div class="candocols">
18
<img src="htmlcss.png">
19
</div>
20
21
<div class="candocols">
22
<img src="graphicdesign.png">
23
</div>
24
25
<div class="candocols">
26
<img src="uiux.png">
27
</div>

První řádek tohoto souboru je nejvýznamnější, pokud jde DropPages integrace. Určuje šablonu, která chcete svůj obsah vykreslený do.

V tomto případě chceme, aby tento obsah vykreslený do "base.html" Šablona, takže první řádek souboru musí být:: základní, můžete určit, že soubor s obsahem by měl být vykreslen do libovolného souboru šablony, funkce budeme používat později.

Markdown nebo HTML?

Obsah souborů DropPages může vykreslit buď Markdown nebo HTML. Pokud máte zájem dozvědět se více o syntaxi Markdown, podívejte se na Markdown: vstupy a výstupy.

Poznámka: jeden "tě" být si vědom je, že pokud zalomení řádku formátu Markdown ve formátu HTML není vykreslen pomocí DropPages. Dalším je, že pokud používáte Markdown pro text, neexistuje žádná k dispozici syntaxe střed.

Například v kódu výše jsou umístěny čtyři obrazy, každý zabalený do div s stylem, který jim stránky vedle sebe ve sloupcích. Chcete-li přidat bitovou kopii pomocí formátu Markdown by použít syntaxi! [Alt text] (/ path/to/img.jpg). Nicméně jsem zjistil, že když obraz Markdown byl zabalený do tagů div, které jsem výše se nezobrazoval, outputing skutečné Markdown kód na stránku místo.

Takže, vzhledem chceme naší domovské stránce mít obrázky zabalené do tagů div a chceme text zarovnaný na střed, veškerý obsah přidán do "index.txt" soubor je napsán v jazyce HTML.

Aktualizujte své stránky a by měl nyní vypadat takto:

Nyní máme některé vlastní domovskou stránku obsahu na místě, takže je na čase přidat nějaké další podstránky. Začněme s všudypřítomným "O" stránky.

Přidat "dílčí stránku o aplikaci"

Chcete-li přidat další stránky na webu DropPages, vše co musíte udělat je, vytvářet nové soubory s příponou txt ve složce "Obsah". Odkazy na ně se pak automaticky zobrazí v menu "Hlavní navigace".

Název, který se objeví v nabídce bude brát přímo z názvu obsahu souboru, tedy moje stránky Name.txt. Kromě toho můžete řídit pořadí menu odkazy pomocí prepending každý soubor obsahu s číslem následovaným tečkou.

Chceme druhý odkaz na naše menu se k naší "O" stránky, tak ve složce "Obsah" vytvořit nový textový soubor a pojmenujte jej: 2. o naší Studio.txt

Přidejte následující kód do nového souboru:

1
:base
2
3
About Our Studio
4
========
5
6
(Placeholder text from [http://notloremipsum.com/](http://notloremipsum.com/))
7
8
We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results.
9
10
We offer the following services:
11
12
- Branding
13
- Logos
14
- Websites
15
- Web applications
16
- Web development – HTML5, CSS, jQuery
17
- Content Management Systems
18
- Responsive Web Design
19
- Illustration
20
- Business cards
21
- Letterheads and compliment slips
22
- Flyers
23
- Mailers
24
- Appointment cards

Tentokrát nebudeme potřebovat div obálky nebo text zarovnaný na střed, takže kód je napsán kompletně v syntaxi Markdown.

Aktualizujte web a zobrazí nově přidaný odkaz "O naše Studio" na primárním navigačním menu. Klepněte na tento odkaz a budete přesměrováni na novou stránku, která by měla vypadat takto:

Přidání stránek pro váš DropPages web je jednoduché jako facka. Stačí vytvořit nový textový soubor, pojmenujte jej podle co chcete zobrazit v nabídce, vyplňte svůj obsah a máte hotovo.

Vytvoření stránky s podstránky

DropPages vám také dává možnost vytvářet druhé úrovni podstránky. Například můžete chtít vytvořit stránku s názvem "Seznamte se tým", který má vazby na dílčí stránku pro každého člena týmu. V této části bych vám ukážeme jak.

Vytváření dalších CSS šablon

Pro naši "Seznamte se tým" stránku chceme ukázat odkazy na dílčí stránku pro každý z členů našeho týmu nicméně naše základní šablona neobsahuje oblast, kterou chcete zobrazit tyto odkazy. Jako takový chceme vytvořit vlastní šablonu pro tento zvláštní požadavek zpracovat.

DropPages šablony mají schopnost v kaskádě, což znamená, že jednu šablonu sám lze načíst do tagu {{tělo}} z jiné šablony.

V našem případě chceme přidat oblast s odkazy na naše podstránky, ale přesto chceme použít HTML od "base.html" Šablona. Aby se to stalo, vytvořte nový soubor ve složce "Šablony" a pojmenujte ji "withsubpages.html". Zkopírujte a vložte následující kód:

Šablony video withsubpages.html

1
:base
2
3
<div class="contentwrap">
4
5
<div class="secondarynav">
6
<h3>Our People</h3>
7
{{SecondaryNavigation}}
8
</div>
9
10
{{Body}}
11
12
</div>

Jak jste již viděli dříve v naší "index.txt" soubor obsahu, tato šablona se používá také: základní notace v prvním řádku. To umožňuje systému, vědí, že HTML z této šablony by měla být načtena do značky {{Body}} "base.html" Šablona.

Aktuální obsah stránky bude načtena do značky {{Body}} "withsubpages.html" Šablona.

V případě, že je to matoucí vůbec, proces načítání lze shrnout jako: base.html video {{tělo}} video withsubpages.html video {{tělo}} video obsahu stránky.

V naší nové "withsubpages.html" soubor jsme přidali div obálky kolem obsahu stránky a přidat pole, které se vznášely vpravo obsahující šablony tag: {{SecondaryNavigation}}. Tato šablona značka vytváří neuspořádaný seznam sourozenecké nebo podřízené stránky.

Dále se podívejme na to, jak vlastně vytvoříte podřízené stránky, jejichž odkazy se zobrazí v poli "Sekundární navigace".

Vytvoření vzhled stránky mít podstránky

Kdykoli chcete na stránce mít podstránky, nevytvářejte soubor txt ve složce "Obsahu" vytvoříte adresář. Tento adresář bude držet stránky nejvyšší úrovně, stejně jako některé z jeho dětí.

Používáte stejné konvence pro adresář stejně jako u txt souboru tedy začínat číslem označují pozici primární navigační odkaz, pak použít jakýkoli název, který chcete zobrazovat v nabídce.

Vytvořte složku v adresáři "Obsahu" a pojmenujte ji "3.Meet tým".

V této složce vytvoří soubor s názvem "index.txt". Kód, který přidáte do tohoto souboru budou tvořit váš nejvyšší úrovně "Seznamte se tým" obsah stránky.

Zkopírujte a vložte následující kód:

Obsah video 3. tým video index.txt

1
:withsubpages
2
3
## Meet the Team
4
5
Before you choose us to take on your project you will probably want to know a bit more about us, so meet the team:
6
7
Ross has over 10 years experience in the industry. He is our Creative Director, digital designer, web designer and front-end developer. He is also pretty good with a sketchbook. Before starting the company Ross worked as a designer and studio manager for a design house who boasted a number of big name clients. Ross has brought his vast experience from this role to the work he does now.
8
9
Monica is Ross’ sister, our Art Director and specialises in graphic and print design. She has also worked with some big names and her designs have won her a number of industry awards.
10
11
Rachel and Chandler are our Junior Designers. Rachel is a web designer with knowledge of HTML and CSS and supports Ross on projects. Chandler has just finished his Graphic Design degree and enjoys continuing to learn from Monica and building his experience.
12
13
Joey and Phoebe focus on bringing new business to the company. They have won a number of big clients recently and both also have qualifications in project management to ensure that the projects run smoothly from start to finish.

Poznámka: Na prvním řádku tohoto kódu již přidáme: základní. Místo toho jsme přidali: withsubpages jako to určuje, že chceme obsah stránky načíst do "withsubpages.html" Šablona.

Přidat podřízené stránky

S obsahem hlavní "Seznamte se tým" na místě "index.txt" Nyní jste připraveni přidat soubor dílčí stránky. Proces přidávání souborů v této složce je stejný, jako jste provedli "O" stránky ve složce nejvyšší úrovně. Jednoduše vytvořte nový soubor txt, s číslem pro objednávání a název kontrolovat jeho text odkazu v poli Sekundární navigace.

Vytvořte soubor s názvem "1.Ross a Monica.txt" a přidejte tento obsah uvnitř:

Obsah video 3. tým video 1. Ross a Monica.txt

1
:withsubpages
2
3
##Ross and Monica
4
5
Ross has over 10 years experience in the industry. He is our Creative Director, digital designer, web designer and front-end developer. 
6
7
He is also pretty good with a sketchbook. Before starting the company Ross worked as a designer and studio manager for a design house who boasted a number of big name clients. 
8
9
Ross has brought his vast experience from this role to the work he does now.
10
11
Monica is Ross’ sister, our Art Director and specialises in graphic and print design. She has also worked with some big names and her designs have won her a number of industry awards.

Opět můžeme použít: withsubpages zápis této stránky načíst do "withsubpages.html" Šablona.

Vytvořte druhý soubor s názvem "2.Juniors a Sales.txt" s tímto obsahem uvnitř:

Obsah video 3. tým video 2. junioři a Sales.txt

1
:withsubpages
2
3
##Juniors and Sales
4
5
Rachel and Chandler are our Junior Designers. Rachel is a web designer with knowledge of HTML and CSS and supports Ross on projects.
6
7
Chandler has just finished his Graphic Design degree and enjoys continuing to learn from Monica and building his experience.
8
9
Joey and Phoebe focus on bringing new business to the company. They have won a number of big clients recently and both also have qualifications in project management to ensure that the projects run smoothly from start to finish.

Aktualizujte své stránky a měli byste vidět nový "Seznamte se tým" odkaz na navigační lišty. Klepněte na něj a nová stránka by se mělo Ukázat s odkazem na jednotlivé dílčí stránku v poli Sekundární navigace na pravé straně. Každý své podstránky by měla také mít stejné rozložení, jako je tento:

Dvě další stránky

Obecně lze říci s statické weby, pět se zdá být magic počet stránek mít (nevím proč). Tak pojďme do toho a přidejte dvě další stránky na váš web na kole z toto číslo.

Ve složce "Obsah" Vytvořte soubor s názvem "4.Markdown Examples.txt" a přidejte následující kód:

Obsah video 4. Markdown Examples.txt

1
:base
2
3
Markdown Examples
4
=============
5
6
* Lorem ipsum
7
 * Lists
8
 * are
9
 * easy
10
11
and code?
12
 
13
    	code.is {<trivial/>}
14
15
You can add links either inline like <http://google.com> or in [a more semantic way](http://en.wikipedia.org/wiki/Semantics)
16
17
The markup for *emphasised* or **really really emphasised** content is easy too.
18
19
sub title
20
---------
21
22
1. ordered lists are as you'd expect
23
2. except the number you write
24
1. don't have to be in order
25
26
images are less obvious, but relatively easy.
27
28
![another kitten](http://placekitten.com/g/200/300)
29
30
###h3 title
31
32
They are like links but with an exclamation mark.
33
34
####more content
35
36
Lorem ipsum etc

Obsah tohoto souboru dává některé pracovní příklady věcí, které můžete dělat s Markdown, například při vytváření seznamů, tučné, italicizing, zobrazeno kód, přidání obrázků, přidání odkazů, Přidání nadpisů a tak dále.

Znovu, vytvořte další soubor ve složce "Obsah" a tentokrát název "5.Contact Us.txt".

Obsah video 5. kontaktní Us.txt

1
:base
2
3
How to find us
4
--------------
5
6
![Map](http://maps.google.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=512x512&maptype=roadmap&markers=color:blue|label:S|40.702147,-74.015794&markers=color:green|label:G|40.711614,-74.012318&markers=color:red|label:C|40.718217,-73.998284&sensor=false)
7
8
Get in touch
9
------------
10
11
Cal us: 01234 567890
12
Email us: email@example.com

Kód v této stránce je uveden příklad jak umístit Google Map na kontaktní stránce. Složitějšího obraťte na stránky, které jste také chtěli podívat do pomocí poskytovatele služeb, které vám umožní vkládání kontaktní formulář, vzhledem k tomu, že DropPages podporuje pouze statické prostředky.

Vaše poslední stránky, se všech pěti stránkami v místě, by měl nyní vypadat takto;

Jednání s chybami 404 a mezipaměti obsahu

DropPages je velmi cool systém, nicméně v okamžiku, kdy se zdá se, že mají tendenci držet soubory uložené v mezipaměti jako veverka s plnými kaštanů den před zimou.

Možná zjistíte, že pokud provedete změny v obsahu souborů se neukáží, nebo že pokud změníte název stránky dostanete chybu 404 při pokusu navštívit. V panelu my.droppages.com je tlačítko "Publikovat", nicméně v mých testů to nad tím zamyslil.

Jeden způsob, jak jsem zjistil, prosadil změny, které nebyly nezobrazuje přidat další soubor flushme.txt do složky "Obsahu", nic náhodně pojmenované např. Systém by odhalit nový soubor a pak aktualizovat zbytek webu v procesu, po které jsem mohl odstranit soubor znovu.

Nicméně to nefunguje vždy s chybami 404. V některých případech jsem našel jediný způsob, jak se zbavit chybu 404 byla jít pod zcela novým názvem stránky souboru/složky, např. z 2. Us.txt o 2. O našich Studio.txt a potom znovu přidat "flushme.txt" soubor přinutit systém aktualizovat a najít aktualizovaný název procesu.

Extras

Existuje několik dalších funkcí, které lze využít v systému DropPages, že jsme se netýkala výše, takže se pojďme podívat na ně teď.

Mapa stránek

I když je pravděpodobné, že je nezbytné na malé místo, je-li váš web roste a chcete mít sitemap, můžete vytvořit vlastní šablonu a do ní zahrnout značku {{navigace}}. Tato značka vytváří neuspořádaný seznam všech stránek na webu. Vytvořte stránku pomocí vlastní šablony s pouze "Mapa webu" nadpis jako jeho obsah a hej presto, máte soubor sitemap.

Skryté stránky

Pokud máte stránku, pro kterou nechcete odkaz zobrazen v navigaci, připojte své jméno s podtržítkem. Například soubor sitemap může pojmenován "_sitemap.txt".

Vlastní chyba šablony

Kromě vytváření vlastních šablon pro zobrazení obsahu, máte také možnost vytvořit šablony, které řídí, co Návštěvníci uvidí, pokud dojde k chybě nebo pokud stránka nebyla nalezena. Jednoduše vytvořit soubory šablon, které jsou s názvem "Error.html" a "PageNotFound.html" a zahrnout do nich budete chtít. Můžete vidět příklady těchto souborů šablon v "Základní" téma k dispozici ke stažení: http://droppages.com/themes

Popis cesty

Pokud chcete zahrnout drobečková navigace v některém z vaší šablony, přidejte značku {{strouhankou}}. To bude výstup předchůdce aktuální stránky jako neuspořádaný seznam.

Vlastní značky/sekce

Stejně jako s obsahu vykreslení, kde je umístěna značka {{tělo}} v šabloně, můžete také přidat vlastní značky a části obsahu vykreslení do nich.

Například kromě běžné značky {{tělo}} můžete přidat vlastní značky do šablony, jako {{Mycustomtag}}.

Pak při vytváření obsahu souboru by zahrnovala zápisu @Body na řádku nad obsahem, který chcete výstup prostřednictvím značky {{Body}} a @Mycustomtag nad obsah zobrazíte, kde značka {{Mycustomtag}} je např.

1
:customhometemplate
2
3
@Body
4
Welcome to our amazing business
5
6
@Mycustomtag
7
This month's special 50% off!

Balil

DropPages je opravdu docela chytrý kus práce, zvláště když si uvědomíte, že to bylo vytvořeno jako vedlejší projekt jednou osobou, Dave McDermid.

Bezplatně, máte limit využití až 50 MB. Abychom to uvedli do souvislostí v příkladu, které jsme právě prostřednictvím používá pouze 22 Kb. Však Pokud chcete zvýšit limit využití na 1GB, stejně jako povolení vlastních domén upgradu na placenou verzi s první dva týdny zdarma, pak 5,00 libry GBP za měsíc poté.

Užitečné odkazy

  • droppages.com
  • držet krok s novinkami a aktualizacemi prostřednictvím droppages.com/updates
  • @droppages na Twitteru
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.