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

() translation by (you can also view the original English article)

Final 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:

index.txt ve složce "Obsahu"
Main.css ve složce "Veřejné"
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

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
    display: block;
}

audio,canvas,progress,video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],template {
    display: none;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

mark {
    background: #ff0;
    color: #000;
}

small {
    font-size: 80%;
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -.5em;
}

sub {
    bottom: -.25em;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 1em 40px;
}

pre {
    overflow: auto;
}

code,kbd,pre,samp {
    font-family: monospace,monospace;
    font-size: 1em;
}

button,input,optgroup,select,textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
}

button,select {
    text-transform: none;
}

button,html input[type="button"],/* 1 */,input[type="reset"],input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input {
    line-height: normal;
}

input[type="checkbox"],input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: .35em .625em .75em;
}

legend {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: bold;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,th {
    padding: 0;
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: #e7f1f8;
    font-family: 'Titillium Web';
}

a,a:visited,a:link {
    text-decoration: none;
    color: #3c5499;
}

a:hover,a:active {
    color: #17c2a4;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Titillium Web';
    line-height: 1.313em;
}

h1 {
    font-size: 2.625em;
    margin: .563em 0;
}

h2 {
    font-size: 2.25em;
    margin: .563em 0;
}

hr {
    border: 0;
    border-bottom: .25em solid #e7f1f8;
}

.short {
    width: 5.625em;
}

.wrap {
    width: 100%;
    max-width: 75em;
    margin: 0 auto;
    position: relative;
}

.wrap:before,.wrap:after {
    content: " ";
    display: table;
}

.wrap:after {
    clear: both;
}

.site_header:before {
    content: " ";
    background-color: #17c2a4;
    width: 100%;
    height: 40.625rem;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
}

.site_header {
    text-align: center;
    color: #fff;
    padding: 1.618rem 0 3.236rem 0;
}

.site_title {
    font-size: 4.5rem;
    margin: 0;
}

.site_title a {
    color: #fff;
}

.site_tagline {
    font-size: 1.125em;
    margin: 0;
}

.site_tagline a {
    color: #fff;
}

.mainmenu {
    background-color: #87509c;
    border-radius: .375em .375em 0 0;
    min-height: 3.75em;
    padding-bottom: .875em;
    text-align: center;
}

.mainmenu ul {
    list-style: none;
    display: inline-block;
    margin: 0;
}

.mainmenu li {
    display: inline-block;
    margin: .875em .25em 0 .25em;
}

.mainmenu a {
    padding: 0 1.125em;
    text-transform: uppercase;
    color: #fff;
    line-height: 2em;
}

.mainmenu .current,.mainmenu li:hover,.mainmenu li:active {
    background-color: #643a79;
    border-radius: .25em;
}

.content {
    font-size: 1.125em;
    background-color: #fff;
    color: #3c4761;
    padding: 3.236em;
    min-height: 37.5rem;
}

.content:before,.content:after {
    content: " ";
    display: table;
}

.content:after {
    clear: both;
}

.contentwrap {
    position: relative;
}

.secondarynav {
    float: right;
    margin: 0 0 1.618rem 1.618em;
    border: .0625rem solid #e7f1f8;
    min-width: 18.75rem;
    padding: 0 1.618rem;
}

.breadcrumbs ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.breadcrumbs li {
    display: inline;
}

.breadcrumbs li:before {
    content: " > ";
}

.breadcrumbs li:first-child:before {
    content: " ";
}

.bigbutton {
    border-radius: 4px;
    cursor: pointer;
    background-clip: padding-box;
    background-color: #eb7d4b;
    box-shadow: inset 0 -4px 0 #c7693f;
    border: 0;
    margin: 3.236em auto;
    display: block;
    text-align: center;
    width: auto;
}

.bigbutton a {
    padding: 1.125em 4.375em;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    display: inline-block;
}

.candocols {
    width: 25%;
    float: left;
    text-align: center;
    margin: 4.854rem auto;
}

.site_footer {
    background-color: #3c5499;
    padding: 1.618rem 0;
    text-align: center;
}

.site_footer a {
    color: #fff;
    font-size: 1.5em;
    font-weight: 600;
    margin: 0 1.618rem;
}

.site_footer a:hover {
    color: #30bae7;
}

@media (max-width: 55rem) {
    .candocols {
        width: 50%;
        margin: 1.618rem auto;
    }
}

@media (max-width: 35rem) {
    .candocols {
        width: 100%;
    }
}

@media (max-width: 320px) {
    html {
        min-width: 320px;
    }
}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>Easy Static Site via DropPages.com</title>
	<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,700' rel='stylesheet' type='text/css'>
	<link href='/main.css' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="site_header" role='banner' itemscope itemtype='http://schema.org/WPHeader'>
	<h1 class="site_title"><a title="Easy Static Site on DropPages.com" href='/'>Easy Static Site</a></h1>
	<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>
</header>
<div class="wrap">
	<nav class="mainmenu">
	{{PrimaryNavigation}}
	</nav>
	<main class="content">
	{{Body}}
	</main>
</div>
<footer class="site_footer" itemscope itemtype='https://schema.org/WPFooter'>
	<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>
</footer>
</body>
</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

:base

<h1 align="center">Hi there! We are the new kids on the block and we build awesome websites and mobile apps.</h1>

<button class="bigbutton"><a href="/Contact+Us">Work With Us</a></button>

<h2 align="center">WE GOT SKILLS!</h2>

<hr class="short" />

<p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />tempor incididunt ut labore et dolore magna aliqua.</p>

<div class="candocols">
<img src="webdesign.png">
</div>

<div class="candocols">
<img src="htmlcss.png">
</div>

<div class="candocols">
<img src="graphicdesign.png">
</div>

<div class="candocols">
<img src="uiux.png">
</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:

:base

About Our Studio
========

(Placeholder text from [http://notloremipsum.com/](http://notloremipsum.com/))

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.

We offer the following services:

- Branding
- Logos
- Websites
- Web applications
- Web development – HTML5, CSS, jQuery
- Content Management Systems
- Responsive Web Design
- Illustration
- Business cards
- Letterheads and compliment slips
- Flyers
- Mailers
- 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

:base

<div class="contentwrap">

<div class="secondarynav">
<h3>Our People</h3>
{{SecondaryNavigation}}
</div>

{{Body}}

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

:withsubpages

## Meet the Team

Before you choose us to take on your project you will probably want to know a bit more about us, so meet the team:

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.

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.

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.

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

:withsubpages

##Ross and Monica

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.

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

:withsubpages

##Juniors and Sales

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.

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

:base

Markdown Examples
=============

* Lorem ipsum
 * Lists
 * are
 * easy

and code?
 
    	code.is {<trivial/>}

You can add links either inline like <http://google.com> or in [a more semantic way](http://en.wikipedia.org/wiki/Semantics)

The markup for *emphasised* or **really really emphasised** content is easy too.

sub title
---------

1. ordered lists are as you'd expect
2. except the number you write
1. don't have to be in order

images are less obvious, but relatively easy.

![another kitten](http://placekitten.com/g/200/300)

###h3 title

They are like links but with an exclamation mark.

####more content

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

:base

How to find us
--------------

![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)

Get in touch
------------

Cal us: 01234 567890
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ř.

:customhometemplate

@Body
Welcome to our amazing business

@Mycustomtag
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