Advertisement
  1. Web Design
  2. Dropbox

Verwenden von DropPages für eine super einfache statische Website

Scroll to top
Read Time: 25 min

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

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

Sie wissen wahrscheinlich, dass Dropbox perfekt zum Speichern von Datensicherungen und zum Freigeben von Dateien geeignet ist, aber wussten Sie, dass Sie es auch als Webhost für statische Sites verwenden können?  Dank geschickter Apps wie DropPages, die wir heute hier vorstellen, können Sie!

Der Prozess hinter DropPages ist wirklich brilliant.  Sie geben der DropPages-App einfach Zugriff auf Ihr Dropbox-Konto und erstellen einen "My.DropPages"-Ordner, in den Sie Ihre Website-Dateien hochladen.  Wenn Personen Ihre Domain besuchen, agiert DropPages als Vermittler zwischen dem Browser und Ihrem Dropbox-Account, indem sie die Dateien aus Ihrem "My.DropPages"-Ordner holt und sie als voll funktionsfähige Website anbietet.

Da Dropbox mit einer Anwendung geliefert wird, die Dateien auf Ihrem Computer mit Ihrem Online-Speicher synchronisiert, können Sie Ihre Site nur lokal verwalten und Dropbox erlauben, die Dateien automatisch für Sie hochzuladen.  Das bedeutet, dass Sie sich keine Sorgen über FTP machen müssen. Da Ihre Dateien sowohl offline als auch in Dropbox sind, werden sie im Prinzip standardmäßig gesichert.

Was werden wir tun 

In diesem Tutorial zeige ich Ihnen, wie Sie mit DropPages eine klassische statische Website mit fünf Seiten erstellen können, indem Sie eine modifizierte Version der Vorlage "Cuda" von Graphic Burger verwenden.

Wir werden uns nicht darauf konzentrieren, wie der Basis-HTML- und CSS-Code für die Vorlage geschrieben wird, sondern vielmehr, wie die Integration mit DropPages gehandhabt wird.  Der gesamte erforderliche Vorlagencode wird im folgenden Format zum Kopieren und Einfügen bereit gestellt, oder Sie können die Quelldateien über die Schaltfläche Anhang herunterladen in der Seitenleiste herunterladen.

Lassen Sie uns anfangen!

Verknüpfen Sie DropPages mit Dropbox

Wenn Sie dies noch nicht getan haben, gehen Sie zu Dropbox und registrieren Sie sich. Laden Sie dann die Anwendung herunter und installieren Sie sie, um Ihre Offline-Dateien mit Ihrem Online-Speicher zu synchronisieren.

Rufen Sie dann http://my.droppages.com/ auf und melden Sie sich mit Ihren DropBox-Kontodetails an.  Dadurch geben Sie DropPages Zugriff auf einen Ordner in Ihrem Dropbox-Konto, in dem Ihre Website gespeichert wird.  Nachdem die Dropbox-Anwendung Ihre Online-Dateien mit Ihrem Computer synchronisiert hat, sehen Sie eine solche Ordnerstruktur in Ihrem Offline-Dropbox-Ordner:

Jede der Websites, die Sie über DropPages erstellen, wird in diesem Ordner gespeichert.  Jetzt können Sie eine neue Website erstellen.

Erstellen Sie eine neue Website

Nachdem Sie Zugriff auf Ihr Dropbox-Konto gewährt haben, sollten Sie automatisch zu Ihrem DropPages-Dashboard weitergeleitet werden.  Wenn nicht, können Sie unter http://my.droppages.com/account darauf zugreifen

Um eine neue Site zu erstellen, klicke auf den großen blauen Button "Eine neue Website erstellen":

Sie werden dann auf eine Seite weitergeleitet, auf der Sie die Domäne angeben können, die Sie für Ihre Site verwenden möchten.  Sie können jede Subdomain verwenden, die nicht bereits von einem anderen DropPages-Benutzer verwendet wird, aber Sie müssen sicherstellen, dass Sie den Teilbereich "droppages.com"  der Domain bei der Eingabe Ihrer Auswahl einbeziehen.

Nachdem Sie Ihre Domain eingegeben haben, klicken Sie auf "Erstellen" und DropPages wird die Ordnerstruktur für Ihre neue Site in Ihrem "My.DropPages" -Ordner einrichten.  Wenn es mit deinem Dropbox-Offlineordner synchronisiert wird, sieht es folgendermaßen aus:

Was ist in der Ordnerstruktur?

Die Zwecke der drei Ordner, die Sie sehen, sind:

  • Content: Enthält .txt-Dateien, die in Markdown und/oder HTML geschrieben wurden, um den Inhalt der Seiten Ihrer Website zu bilden.
  • Public: Enthält öffentlich zugängliche Site-Dateien wie Stylesheets, Bilder, PDFs usw.  Eine vollständige Liste der im Ordner "Public" zulässigen Dateitypen finden Sie in der Dropbox-Dokumentation.
  • Templates: Enthält die HTML-Dateien der Vorlagen Ihrer Website, in die der Inhalt gerendert wird.

Wenn Ihre Site zum ersten Mal erstellt wird, enthält sie in jedem dieser Ordner eine Platzhalterdatei:

  1. index.txt im Ordner "Content"
  2. main.css im Ordner "Public"
  3. base.html im Ordner "Templates"

Wenn Sie Ihre neu erstellte DropPages-Domain besuchen, erhalten Sie diese drei Dateien:

Das erste, was wir tun werden, ist das Hinzufügen eines benutzerdefinierten Designs für diesen grundlegenden Inhalt, wobei der Code in den vorhandenen Dateien "main.css"  und "base.html"  ersetzt wird.

Hinweis zum Bearbeiten von DropPages-Dateien

Wenn ich während des gesamten Tutorials auf die Bearbeitung von Site-Dateien verweise, bedeutet dies, dass Sie Ihren bevorzugten Code-Editor direkt in den Dateien in Ihrem Offline-Ordner Dropbox > Apps > My.DropPages > mysubdomain.droppages.com verwenden.

Nachdem Sie Änderungen an der zu bearbeitenden Datei gespeichert haben, lassen Sie etwas Zeit für Ihre Dropbox-Anwendung, um Ihre Dateien in Ihr Konto hochzuladen, und aktualisieren Sie Ihre DropPages-Site, um zu sehen, dass Ihre Änderungen wirksam werden.

Hinzufügen eines benutzerdefinierten Theme-Designs

Wie bereits erwähnt, werden wir nicht über die eigentlichen Prozesse hinter der Erstellung des Basis-CSS und -HTML dieses Template-Designs sprechen, sodass wir uns stattdessen auf die Integration von DropPages konzentrieren können.  Mit dem gesagt, hier ist ein Stylesheet, das ich zuvor vorbereitet habe.

Fügen Sie benutzerdefiniertes CSS hinzu

Kopieren Sie den folgenden Code und fügen Sie ihn in die "main.css"- Datei im "Public"-Ordner Ihrer Website ein (bereiten Sie sich vor - es ist ein ziemlicher Brocken ...)

Public > 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
}

Dieses CSS behandelt alle wesentlichen Aspekte des Layouts, der Typografie, des Farbschemas und der Reaktionsfähigkeit.

Jetzt müssen wir nur noch das Stylesheet in unsere Hauptvorlage ziehen und einige Extras wie Kopf- und Fußzeile hinzufügen.

Fügen Sie benutzerdefiniertes HTML hinzu

Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei "base.html"  im Ordner "Templates" Ihrer Site ein.

Templates > 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>

Dieser HTML-Code macht ein paar Dinge.  Es zieht das gerade bearbeitete "main.css"  Stylesheet sowie einen Webfont von Google ein.  Es erstellt einen statischen Kopfzeile, der einen Site-Titel und einen Slogan sowie eine Fußzeile mit einigen Links zu verschiedenen Social Networking- und Portfolio-Sites zeigt.  Es erstellt auch einen Platz für ein primäres Navigationsmenü zum Leben und einen Platz für den Inhalt.

Die Integration mit DropPages erfolgt über zwei sehr einfache Template-Tags:

  • {{PrimaryNavigation}} - Dadurch wird eine ungeordnete Liste aller Seiten auf Ihrer Website erstellt, einschließlich der Startseite.
  • {{Body}} - Das gibt den Inhalt der Dateien aus, die Sie Ihrem Ordner "Content" hinzufügen.

Beachten Sie die Platzierung dieser beiden Templates-Tags im obigen HTML, wobei das Tag {{PrimaryNavigation}} im nav-Element platziert wird und das Tag {{Body}} im main-Element platziert wird.

Beim Aktualisieren sollte Ihre Site jetzt wie folgt aussehen:

Beachten Sie, dass der gleiche "Hallo Welt" Inhalt, den Sie auf Ihrer neuen Standardseite gesehen haben, immer noch vorhanden ist, aber umgeben von dem Styling, das wir gerade über die Dateien "main.css"  und "base.html"  hinzugefügt haben.

Nun lassen Sie uns einige unserer eigenen benutzerdefinierten Homepage-Inhalte hinzufügen.

Hinzufügen von Startseite-Inhalten

Als Teil unserer benutzerdefinierten Startseite-Inhalte werden wir vier Bilder enthalten.  Sie können Ihre eigenen Kopien dieser Bilder aus den Quelldateien erhalten, die diesem Tutorial beigefügt sind.  Nach dem Herunterladen und Extrahieren der Hauptdatei EasyDropPagesStaticSite.zip sehen Sie eine zweite Zip-Datei mit dem Namen homepage_images.zip.  Entpacken Sie diese Datei und legen Sie die enthaltenen Bilder in den Ordner "Public" Ihrer Site.

Kopieren Sie dann den folgenden Code und fügen Sie ihn in die Datei "index.txt"  im Ordner "Content" Ihrer Site ein.

Content > 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>

Die erste Zeile dieser Datei ist für die DropPages-Integration am wichtigsten.  Sie gibt an, für welche Vorlage Ihr Inhalt gerendert werden soll.

In diesem Fall möchten wir, dass dieser Inhalt in die Vorlage "base.html"  gerendert wird. Die erste Zeile der Datei muss daher wie folgt lauten: :base Sie können angeben, dass eine Inhaltsdatei in eine Vorlagendatei gerendert werden soll Wir werden später verwenden.

Markdown oder HTML?

DropPages-Inhaltsdateien können Markdown oder HTML rendern.  Wenn Sie mehr über die Markdown-Syntax erfahren möchten, lesen Sie Markdown: The Ins and Outs.

Hinweis: ein "Gotcha" zu beachten ist das, wenn Sie eine Markdown-Zeile in HTML umbrechen, wird das nicht von DropPages gerendert.  Wenn Sie Markdown für Text verwenden, gibt es keine Syntax zum Zentrieren.

Im obigen Code werden beispielsweise vier Bilder platziert, von denen jedes in ein div mit einem Styling verpackt ist, das sie Seite für Seite in Spalten erscheinen lässt.  Um ein Bild über Markdown hinzuzufügen, verwenden Sie die Syntax ![Alt text](/path/to/img.jpg).  Allerdings habe ich festgestellt, dass, wenn Image Markdown in die divs, die ich oben verwendet habe, eingewickelt wurde, sie nicht gerendert wurden und stattdessen der eigentliche Markdown-Code auf der Seite ausgegeben wurde.

Wenn wir also möchten, dass unsere Homepage Bilder in divs und zentrierten Text enthalten soll, wird der gesamte Inhalt der Datei "index.txt"  in HTML geschrieben.

Aktualisieren Sie Ihre Website und es sollte jetzt so aussehen:

Wir haben jetzt einige benutzerdefinierte Startseite-Inhalte eingerichtet, daher ist es an der Zeit, einige zusätzliche Unterseiten hinzuzufügen.  Beginnen wir mit der allgegenwärtigen "About" Seite.

Fügen Sie "About"-Unterseite hinzu

Um Ihrer DropPages-Site zusätzliche Seiten hinzuzufügen, müssen Sie nur neue .txt-Dateien in Ihrem "Content"-Ordner erstellen.  Links zu ihnen werden dann automatisch in Ihrem "Primäre Navigation"-Menü erscheinen.

Der Name, der in Ihrem Menü angezeigt wird, wird direkt aus dem Namen Ihrer Inhaltsdatei, d. h. My Page Name.txt, übernommen.  Darüber hinaus können Sie die Reihenfolge Ihrer Menüverknüpfungen steuern, indem Sie jeder Inhaltsdatei eine Nummer voranstellen, auf die ein Punkt folgt.

Wir möchten, dass der zweite Link in unserem Menü auf unserer "About"-Seite angezeigt wird, also erstellen Sie in Ihrem "Content"-Ordner eine neue Textdatei und nennen Sie sie: 2.About Our Studio.txt

Fügen Sie Ihrer neuen Datei den folgenden Code hinzu:

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

Dieses Mal brauchen wir keine div-Wrapper oder zentrierten Text, daher ist der Code vollständig in Markdown-Syntax geschrieben.

Aktualisieren Sie die Website und Sie sollten einen neu hinzugefügten Link "About Our Studio" in Ihrem primären Navigationsmenü sehen.  Klicken Sie auf diesen Link und Sie werden zu Ihrer neuen Seite weitergeleitet, die wie folgt aussehen sollte:

Das Hinzufügen von Seiten für Ihre DropPages-Site ist so einfach.  Erstellen Sie einfach eine neue Textdatei, benennen Sie sie entsprechend dem, was Sie auf Ihrem Menü sehen möchten, füllen Sie sie mit Ihrem Inhalt aus und schon sind Sie fertig.

Erstellen einer Seite mit Unterseiten

DropPages gibt Ihnen auch die Möglichkeit, Unterseiten der zweiten Ebene zu erstellen.  Beispielsweise möchten Sie möglicherweise eine Seite mit dem Namen "Meet the Team" erstellen, die für jedes Teammitglied Links zu einer Unterseite enthält.  In diesem Abschnitt werde ich Ihnen zeigen, wie.

Zusätzliche kaskadierende Vorlagen erstellen

Für unsere "Meet the Team"-Seite möchten wir Links zu einer Unterseite für jedes unserer Teammitglieder anzeigen. Unsere Basisvorlage enthält jedoch keinen Bereich zum Anzeigen solcher Links.  Daher werden wir eine benutzerdefinierte Vorlage erstellen, um diese zusätzlichen Anforderungen zu erfüllen.

DropPages-Vorlagen können kaskadiert werden, dh eine Vorlage kann sich in das {{Body}} -Tag einer anderen Vorlage laden.

In unserem Fall wollen wir einen Bereich mit Links zu unseren Unterseiten hinzufügen, aber wir wollen immer noch den HTML-Code aus der Vorlage "base.html"  verwenden.  Um das zu ermöglichen, erstellen Sie eine neue Datei in Ihrem "Templates"-Ordner und nennen Sie sie "withsubpages.html".  Dann kopieren und fügen Sie den folgenden Code ein:

Templates > 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>

Wie Sie bereits in unserer Inhaltsdatei "index.txt"  gesehen haben, verwendet diese Vorlage in der ersten Zeile auch die :base-Notation.  Dadurch wird dem System mitgeteilt, dass der HTML-Code aus dieser Vorlage in das Tag {{Body}} der Vorlage "base.html"  geladen werden soll.

Der eigentliche Seiteninhalt wird in das Tag {{Body}} der Vorlage "withsubpages.html"  geladen.

Falls das überhaupt verwirrend ist, kann der Ladevorgang wie folgt zusammengefasst werden: base.html> {{Body}} > withsubpages.html > {{Body}} > Seiteninhalt.

In unserer neuen Datei "withsubpages.html"  haben wir einen Wrapper div um den Seiteninhalt hinzugefügt und ein Feld hinzugefügt, das auf der rechten Seite schwebt und das Template-Tag enthält: {{SecondaryNavigation}}.  Dieses Schablonentag erstellt eine ungeordnete Liste aller gleichgeordneten oder untergeordneten Seiten.

Sehen wir uns nun an, wie Sie die Unterseiten erstellen, deren Links in diesem Feld "Secondary Navigation" angezeigt werden.

Erstellen eines Seiten-Setups mit Unterseiten

Wenn Sie möchten, dass eine Seite Unterseiten hat, erstellen Sie anstelle einer .txt-Datei im Ordner "Content" ein Verzeichnis.  Dieses Verzeichnis enthält sowohl die oberste Seite als auch alle untergeordneten Elemente.

Sie verwenden die gleichen Namenskonventionen für das Verzeichnis wie für eine .txt-Datei, d. h. Beginnen Sie mit einer Zahl, um die Position der primären Navigationsverknüpfung anzugeben, und verwenden Sie dann den Namen, der im Menü angezeigt werden soll.

Erstellen Sie einen Ordner im Verzeichnis "Content" und nennen Sie ihn "3.Meet the Team".

In diesem Ordner erstellen Sie eine Datei namens "index.txt".  Der Code, den Sie dieser Datei hinzufügen, bildet den Top-Inhalt der Seite "Meet the Team".

Kopieren und fügen Sie den folgenden Code ein:

Content > 3.Meet the Team > 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.

Hinweis: In der ersten Zeile dieses Codes fügen wir nicht mehr hinzu :base.  Stattdessen fügen wir hinzu :withsubpages, da dies angibt, dass der Seiteninhalt in die Vorlage "withsubpages.html"  geladen werden soll.

Fügen Sie die Unterseiten hinzu

Mit Ihrem Hauptteil "Meet the Team" in der Datei "index.txt"  können Sie jetzt Unterseiten hinzufügen.  Der Vorgang des Hinzufügens von Dateien in diesem Ordner entspricht dem Vorgang, dem Sie beim Hinzufügen der Seite "About" im Ordner der obersten Ebene gefolgt sind.  Erstellen Sie einfach eine neue .txt-Datei mit einer Bestellnummer und einem Namen, um den Linktext in der sekundären Navigationsbox zu steuern.

Erstellen Sie eine Datei namens "1.Ross und Monica.txt"  und fügen Sie diesen Inhalt hinzu:

Content > 3.Meet the Team > 1.Ross und 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.

Auch hier verwenden wir die Notation :withsubpages, damit diese Seite in die Vorlage "withsubpages.html"  geladen wird. 

Erstellen Sie eine zweite Datei namens "2.Juniors and Sales.txt" mit folgendem Inhalt:

Content > 3.Meet the Team > 2.Junior und 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.

Aktualisieren Sie Ihre Website und Sie sollten den neuen Link "Meet the Team" in der Navigationsleiste sehen.  Klicken Sie darauf und Ihre neue Seite sollte mit einem Link zu jeder Unterseite in der sekundären Navigationsbox auf der rechten Seite angezeigt werden.  Jede Ihrer Unterseiten sollte auch das gleiche Layout haben:

Zwei weitere Seiten

Im Allgemeinen scheinen fünf mit statischen Seiten die magische Anzahl von Seiten zu sein (ich habe keine Ahnung warum).  Lassen Sie uns also zwei weitere Seiten zu Ihrer Website hinzufügen, um diese Zahl abzurunden.

Erstellen Sie in Ihrem Ordner "Content" eine Datei mit dem Namen "4.Markdown Examples.txt"  und fügen Sie den folgenden Code hinzu:

Content > 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

Der Inhalt dieser Datei bietet Ihnen einige praktische Beispiele für Funktionen, die Sie mit Markdown ausführen können, z. B. Erstellen von Listen, Fettschrift, Kursivschrift, Anzeigen von Code, Hinzufügen von Bildern, Hinzufügen von Links, Hinzufügen von Überschriften usw.

Erstellen Sie in Ihrem "Content"-Ordner erneut eine Datei und benennen Sie sie diesmal "5.Contact Us.txt".

Content > 5.Contact 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

Der Code auf dieser Seite zeigt Ihnen, wie Sie eine Google Map auf einer Kontaktseite platzieren können.  Für eine ausgeklügeltere Kontaktseite möchten Sie vielleicht auch einen Service Provider verwenden, der Ihnen ein einbettbares Kontaktformular bietet, da DropPages nur statische Ressourcen unterstützt.

Ihre endgültige Site mit allen fünf vorhandenen Seiten sollte nun so aussehen.

Umgang mit 404 Fehlern und Cached Content 

DropPages ist ein sehr cooles System, aber im Moment scheint es die Tendenz zu haben, zwischengespeicherte Dateien wie ein Eichhörnchen mit einem Schluck Kastanien am Vortag des Winters festzuhalten.

Wenn Sie Änderungen an Ihren Inhaltsdateien vornehmen, werden diese möglicherweise nicht angezeigt, oder wenn Sie einen Seitennamen ändern, wird beim Versuch, sie aufzurufen, ein 404-Fehler angezeigt. Es gibt eine "Publish now"-Schaltfläche im my.droppages.com-Dashboard, aber in meinen Tests schien es nicht zu helfen.

Eine Möglichkeit, Änderungen durchzugehen, die nicht angezeigt wurden, bestand darin, dem Ordner "Inhalt" eine zusätzliche Datei hinzuzufügen, die als zufällig, z. B. flushme.txt.  Das System würde die neue Datei erkennen und dann den Rest der Site in dem Prozess aktualisieren, nach dem ich die Datei erneut löschen könnte.

Das funktionierte jedoch nicht immer mit 404 Fehlern. finden. In einigen Fällen fand ich die einzige Möglichkeit, einen 404-Fehler loszuwerden, war, mit einem völlig neuen Namen für die Seitendatei/den Ordner zu gehen, z.B. von 2.About Us.txt zu 2 About Our Studio.txt, und fügen Sie dann erneut eine "flushme.txt"-Datei hinzu,  um das System zu zwingen, den aktualisierten Namen in dem Prozess zu aktualisieren und zu 

 Extras

Es gibt ein paar zusätzliche Funktionen, die im DropPages-System genutzt werden können, die wir oben nicht behandelt haben. Lassen Sie uns nun einen kurzen Blick darauf werfen.

Sitemap

Obwohl es auf einer kleinen Site wahrscheinlich nicht notwendig ist, können Sie, wenn Ihre Site wächst und Sie eine Sitemap haben möchten, eine benutzerdefinierte Vorlage erstellen und darin das Tag {{Navigation}} einfügen.  Dieses Tag generiert eine ungeordnete Liste aller Seiten auf Ihrer Site.  Erstellen Sie eine Seite mit Ihrer benutzerdefinierten Vorlage mit nur einer "Sitemap" Überschrift als Inhalt und hey presto, Sie haben eine Sitemap.

Versteckte Seiten

Wenn Sie eine Seite haben, für die keine Verknüpfung in der Navigation angezeigt werden soll, fügen Sie ihrem Namen einen Unterstrich hinzu.  Eine Sitemap-Inhaltsdatei könnte beispielsweise den Namen "_sitemap.txt" haben.

Benutzerdefinierte Fehlervorlagen

Neben dem Erstellen benutzerdefinierter Vorlagen zum Anzeigen von Inhalten haben Sie auch die Möglichkeit, Vorlagen zu erstellen, die steuern, was Besucher sehen, wenn sie auf einen Fehler stoßen oder eine Seite nicht gefunden wird.  Erstellen Sie einfach Vorlagendateien mit den Namen "Error.html"  und "PageNotFound.html" und fügen Sie sie in die Dateien ein, die Sie benötigen.  Sie können Beispiele für diese Vorlagendateien im "Basic" -Thema unter http://droppages.com/themes herunterladen

Breadcrumb

Wenn Sie eine Breadcrumb-Spur in eine Ihrer Vorlagen einfügen möchten, fügen Sie das Tag {{Breadcrumbs}} hinzu.  Dadurch werden die Vorfahren der aktuellen Seite als ungeordnete Liste ausgegeben.

Benutzerdefinierte Tags/Abschnitte

Sie können Ihren Inhalt auch dort rendern, wo das Tag {{Body}} in Ihrer Vorlage platziert wird. Sie können jedoch auch benutzerdefinierte Tags hinzufügen und Bereiche Ihres Inhalts rendern.

Neben dem regulären Tag {{Body}} können Sie beispielsweise einer Vorlage ein benutzerdefiniertes Tag hinzufügen, z. B. {{Mycustag}}.

Dann würden Sie beim Erstellen Ihrer Inhaltsdatei die Notation @Body in der Zeile über dem Inhalt, den Sie ausgeben möchten, über das Tag {{Body}} und @Mycustomtag über dem Inhalt einfügen, um anzuzeigen, wo sich das Tag {{Mycustomtag}} befindet. z.B

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

Aufwickeln

DropPages ist wirklich ein cleveres Stück Arbeit, besonders wenn man bedenkt, dass es als Nebenprojekt von einer Person, Dave McDermid, erstellt wurde.

Kostenlos, Sie haben eine Nutzungsbeschränkung von bis zu 50 MB.  Um das in die richtige Perspektive zu rücken, wurde das Beispiel, das wir gerade durchgespielt haben, nur mit 22Kb verwendet.  Wenn Sie jedoch das Nutzungslimit auf 1 GB erhöhen und benutzerdefinierte Domains aktivieren möchten, können Sie auf eine kostenpflichtige Version verbessern, wobei die ersten zwei Wochen kostenlos sind, danach £5,00 GBP pro Monat.

Nützliche Links

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.