Usando DropPages para un sitio web de gran estabilidad estática

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Final product image — What You'll Be Creating

Probablemente sabes que Dropbox es perfecto para almacenar copias de seguridad de datos y compartir archivos, pero ¿sabías que también puedes usarlo como un sitio web estático? Gracias a las aplicaciones ingeniosas como DropPages, que vamos a cubrir aquí hoy, ¡usted puede!

El proceso detrás de DropPages es realmente muy brillante. Simplemente dale acceso a la aplicación DropPages a tu cuenta de Dropbox y crea una carpeta "My.DropPages" a la que subirás los archivos de tu sitio web. Entonces, cuando la gente visita su dominio DropPages actúa como intermediario entre el navegador y su cuenta de Dropbox, buscando los archivos de su carpeta "My.DropPages" y sirviéndolos como un sitio web completamente funcional.

Como Dropbox viene con una aplicación que sincroniza los archivos en su computadora con su almacenamiento en línea, sólo puede mantener su sitio localmente y permitir Dropbox para cargar automáticamente los archivos para usted. Esto significa que no hay que preocuparse por FTP, y dado que sus archivos están fuera de línea y en Dropbox son esencialmente respaldados por defecto.

Qué vamos a hacer

Durante este tutorial voy a mostrarte cómo crear un sitio clásico de cinco páginas estáticas con DropPages, usando una versión modificada de la plantilla "Cuda" de Graphic Burger.

No nos centraremos en cómo se escribe la base HTML y CSS para la plantilla, sino en cómo manejar la integración con DropPages. Todo el código de plantilla requerido se incluirá en el formato de copiar y pegar a continuación, o puede descargar los archivos de origen a través del botón Descargar Adjunto aquí en la barra lateral.

¡Vamos a empezar!

Vincular DropPages con Dropbox

Si aún no lo ha hecho, vaya a Dropbox y regístrese, luego descargue e instale la aplicación que proporcionan para sincronizar sus archivos sin conexión con su almacenamiento en línea.

Luego dirígete a http://my.droppages.com/ e inicia sesión con los detalles de tu cuenta de DropBox. Al hacer esto, estás dando acceso a DropPages para configurar una carpeta en tu cuenta de Dropbox que alojará tu sitio web. Después de que la aplicación Dropbox sincronice sus archivos en línea con su computadora, verá una estructura de carpetas como esta en su carpeta Dropbox sin conexión:

Cada uno de los sitios que cree a través de DropPages vivirá dentro de esta carpeta. Ahora ya está listo para seguir adelante y crear un nuevo sitio.

Crear un nuevo sitio

Después de conceder el acceso a tu cuenta de Dropbox, deberás ser redirigido automáticamente a tu panel de DropPages. Si no, puede acceder a ella en http://my.droppages.com/account

Para crear un nuevo sitio, haga clic en el botón azul "Crear un nuevo sitio":

A continuación, se llevará a una página donde se puede especificar el dominio que desea utilizar para su sitio. Puedes usar cualquier subdominio que no haya sido tomado por otro usuario de DropPages, pero debes asegurarte de incluir la parte "droppages.com" del dominio cuando introduzcas tu elección, así:

Después de ingresar su dominio, haga clic en el botón "Crear" y DropPages configurará la estructura de carpetas para su nuevo sitio dentro de su carpeta "My.DropPages". Cuando se sincroniza con su carpeta Dropbox sin conexión, se verá así:

¿Qué hay en la estructura de carpetas?

Los propósitos de las tres carpetas que ve son:

Content: Guarda los archivos .txt escritos en markdown y/o HTML para formar el contenido de las páginas de su sitio.
Públic: Mantiene archivos de sitio públicamente accesibles tales como hojas de estilo, imágenes, PDFs, etc. Para obtener una lista completa de tipos de archivos permitidos en la carpeta "Público" eche un vistazo a la documentación de Dropbox.
Templates: contiene los archivos HTML de las plantillas de su sitio, en las que se mostrará el contenido.

Cuando se crea su sitio por primera vez, incluye un archivo de marcador de posición en cada una de estas carpetas:

Index.txt en la carpeta "Content"
main.css en la carpeta "Public"
base.html en la carpeta "Templates"

Cuando visites tu nuevo dominio DropPages, estos tres archivos te darán lo siguiente:

Lo primero que vamos a hacer es añadir un estilo de tema personalizado alrededor de este contenido básico, reemplazando el código existente en "main.css" y "base.html" archivos.

Nota sobre la edición de archivos DropPages

Siempre que me refiero a editar archivos de sitio a lo largo de este tutorial, significará usar su editor de código preferido directamente en los archivos de su carpeta Dropbox > Aplicaciones > My.DropPages > mysubdomain.droppages.com.

Después de guardar los cambios en el archivo que está editando, deje un poco de tiempo para que su aplicación Dropbox cargue sus archivos en su cuenta, luego actualice su sitio DropPages para ver sus modificaciones en directo.

Adición de estilo de tema personalizado

Como mencioné anteriormente, no vamos a hablar sobre los procesos reales detrás de la creación de la base CSS y HTML de este diseño de plantilla, por lo que puede centrarse en cambio en el manejo de integración DropPages. Con esto dicho, he aquí una hoja de estilo que preparé anteriormente.

Añadir CSS personalizado

Copie todo el código a continuación y péguelo en el archivo "main.css" en la carpeta "Públic" de su sitio (prepárese - es un pedazo largo...)

Públic > 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;
    }
}

Este CSS se encargará de todos los elementos esenciales de diseño, tipografía, esquema de colores y capacidad de respuesta.

Ahora sólo tenemos que tirar de esa hoja de estilos en nuestra plantilla principal, así como añadir algunos extras, como un encabezado y un pie de página.

Añadir HTML personalizado

Copie todo el código a continuación y péguelo en el archivo "base.html" en la carpeta "Templates" de su sitio.

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

Este código HTML hace algunas cosas. Se tira en la hoja de estilo "main.css" que acaba de editar, así como un webfont de Google. Crea un encabezado estático que muestra un título del sitio y un eslogan, y un pie de página con algunos enlaces a varios sitios de redes sociales y portfolio. También crea un espacio para un menú de navegación principal para vivir, así como un espacio para que aparezca el contenido.

La integración con DropPages ocurre a través de dos etiquetas de plantilla muy sencillas:

{{PrimaryNavigation}} - Esto hace que una lista desordenada de todas las páginas de su sitio, incluida la página de inicio.
{{Body}}: esto genera el contenido de los archivos que agregará a su carpeta "Content".

Observe la ubicación de estas dos etiquetas de plantilla en el HTML anterior, con la etiqueta {{PrimaryNavigation}} situada dentro del elemento nav y la etiqueta {{Body}} situada dentro del elemento main.

Al actualizar su sitio ahora debe verse así:

Observe cómo el mismo contenido "Hola mundo" que vio en su nuevo sitio predeterminado todavía está en su lugar, pero rodeado por el estilo que acabamos de agregar a través de los archivos "main.css" y "base.html" .

Ahora vamos a seguir adelante y añadir algo de nuestro propio contenido de página de inicio personalizado.

Añadir de contenido de la página principal

Como parte de nuestro contenido de página de inicio personalizado, incluiremos cuatro imágenes. Puede obtener sus propias copias de estas imágenes de los archivos de origen adjuntos a este tutorial. Después de descargar y extraer el archivo principal EasyDropPagesStaticSite.zip, verá un segundo archivo zip dentro de homepage_images.zip. Extraiga este archivo y coloque las imágenes que contiene en la carpeta "Públic" de su sitio.

A continuación, copie todo el código de abajo y péguelo en el archivo "index.txt" en la carpeta "Content" de su sitio.

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

La primera línea de este archivo es la más significativa en cuanto a la integración de DropPages. Especifica la plantilla en la que desea que se procese su contenido.

En este caso, queremos que este contenido sea renderizado en la plantilla "base.html", por lo que la primera línea del archivo debe ser: :base Puede especificar que un archivo de contenido se debe renderizar en cualquier archivo de plantilla, una característica Usaremos más tarde.

¿Markdown o HTML?

Los archivos de contenido DropPages pueden renderizar Markdown o HTML. Si está interesado en aprender más acerca de la sintaxis de Markdown, echa un vistazo a Markdown: The Ins and Outs.

Nota: un "gotcha" que debe tener en cuenta es que si envuelve una línea de Markdown en HTML, no será renderizada por DropPages. Otro es que si utilizas Markdown para texto, no hay sintaxis disponible para centrarlo.

Por ejemplo, en el código anterior hay cuatro imágenes colocadas, cada una envuelta en una div con estilo que los hará sitio lado a lado en columnas. Para agregar una imagen a través de Markdown, utilizaría la sintaxis ![Alt text] (/path/to/img.jpg). Sin embargo, encontré que cuando Markdown de imagen estaba envuelto en las divs que usé anteriormente no se renderizaron, generando el código de Markdown real en la página.

Por lo tanto, dado que queremos que nuestra página de inicio tenga imágenes envueltas en divs, y queremos centralizar el texto, todo el contenido agregado al archivo "index.txt" está escrito en HTML.

Actualice su sitio y ahora debería verse así:

Ahora tenemos algún contenido de página de inicio personalizado en su lugar, por lo que es el momento de añadir algunas sub páginas adicionales. Empecemos con la omnipresente página "Acerca de mi".

Añadir "Acerca de" Sub-página

Para agregar páginas adicionales a su sitio DropPages, todo lo que tiene que hacer es crear nuevos archivos .txt en su carpeta "Content". Los enlaces a ellos aparecerán automáticamente en el menú "Navegación principal".

El nombre que aparece en su menú se tomará directamente del nombre de su archivo de contenido, es decir, My Page Name.txt. Además, puede controlar el orden de los vínculos de menú prefijando cada archivo de contenido con un número seguido de un punto.

Queremos que el segundo enlace de nuestro menú esté en nuestra página "Acerca de", por lo que en su carpeta "Content" cree un nuevo archivo de texto y asígnele el nombre: 2.About Our Studio.txt

Agregue el siguiente código a su nuevo archivo:

: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

Esta vez no necesitamos envolturas div o texto centrado, por lo que el código se escribe por completo en la sintaxis de Markdown.

Actualice el sitio y debería ver un vínculo recientemente agregado "Acerca de nuestro estudio" en su menú de navegación principal. Haga clic en ese enlace y se le llevará a su nueva página, que debería tener el siguiente aspecto:

Añadir páginas para su sitio DropPages es tan simple como eso. Basta con crear un nuevo archivo de texto, el nombre de acuerdo a lo que desea aparecer en su menú, llenarlo con su contenido y ya está.

Creación de una página con subpáginas

DropPages también te da la posibilidad de crear sub páginas de segundo nivel. Por ejemplo, es posible que desee crear una página denominada "Conozca al equipo" que tiene vínculos a una subpágina para cada miembro del equipo. En esta sección te mostraré cómo.

Creación de plantillas adicionales en cascada

Para nuestra página "Conozca al equipo" queremos mostrar enlaces a una página secundaria para cada uno de los miembros de nuestro equipo, sin embargo nuestra plantilla base no incluye un área para mostrar dichos enlaces. Como tal, vamos a crear una plantilla personalizada para manejar este requisito adicional.

DropPages plantillas tienen la capacidad de cascada, lo que significa que una plantilla puede cargarse en la etiqueta {{Body}} de otra plantilla.

En nuestro caso queremos agregar un área con enlaces a nuestras subpáginas, pero todavía queremos usar el HTML de la plantilla "base.html" . Para que esto suceda, cree un nuevo archivo en su carpeta "Templates" y denomínelo "withsubpages.html". A continuación, copie y pegue el siguiente código:

Templates > withsubpages.html

:base

<div class="contentwrap">

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

{{Body}}

</div>

Como se vio anteriormente en nuestro archivo de contenido "index.txt", esta plantilla también usa la notación :base en la primera línea. Esto permite al sistema saber que el HTML de esta plantilla debe cargarse en la etiqueta {{Body}} de la plantilla "base.html" .

El contenido de la página real se cargará en la etiqueta {{Body}} de la plantilla "withsubpages.html" .

En caso de que esto sea confuso, el proceso de carga se puede resumir en: base.html > {{Body}}> withsubpages.html> {{Body}} > contenido de la página.

En nuestro nuevo archivo "withsubpages.html" hemos añadido una div de contenedor alrededor del contenido de la página, y añadimos un cuadro que será flotado a la derecha que contiene la etiqueta de plantilla: {{SecondaryNavigation}}. Esta etiqueta de plantilla crea una lista desordenada de cualquier página hermana o secundaria.

A continuación, echemos un vistazo a cómo se crean las páginas secundarias cuyos vínculos aparecerán en ese cuadro de "Navegación Secundaria".

Creación de una configuración de página para tener sub páginas

Siempre que desee que una página tenga subpáginas, en lugar de crear un archivo .txt en la carpeta "Content", debe crear un directorio. Ese directorio tendrá la página de nivel superior, así como cualquiera de sus niveles secundarios.

Utilice las mismas convenciones de nomenclatura para el directorio como lo haría para un archivo .txt, es decir, comience con un número para indicar la posición del enlace de navegación principal y, a continuación, utilice el nombre que desee que aparezca en el menú.

Cree una carpeta en el directorio "Content" y llámela "3.Meet the Team".

Dentro de esa carpeta crea un archivo llamado "index.txt". El código que añadas a este archivo formará el contenido de la página "Meet the Team" de nivel superior.

Copie y pegue el siguiente código:

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

Nota: En la primera línea de este código ya no añadimos :base. En su lugar, agregamos :withsubpages como esto especifica que queremos que el contenido de la página se cargue en la plantilla "withsubpages.html" .

Añadir las sub páginas

Con su contenido principal "Meet the Team" en su lugar en el archivo "index.txt", ahora está listo para agregar subpáginas. El proceso de agregar archivos dentro de esta carpeta es el mismo que siguió para agregar la página "Acerca de" en la carpeta de nivel superior. Simplemente cree un nuevo archivo .txt, con un número para ordenar y un nombre para controlar el texto del enlace en el cuadro de navegación secundario.

Cree un archivo llamado "1.Ross y Monica.txt" y agregue este contenido dentro de:

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

Nuevamente, utilizamos la notación :withsubpages para que esta página se cargue en la plantilla "withsubpages.html" .

Cree un segundo archivo denominado "2.Juniors y Sales.txt" con este contenido dentro:

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

Actualiza tu sitio y deberías ver el nuevo enlace "Conozca al equipo" en la barra de navegación. Haga clic en él y su nueva página debe aparecer con un enlace a cada sub-página en el cuadro de navegación secundaria en el lado derecho. Cada una de sus subpáginas también debe tener el mismo diseño, como esto:

Dos Más Páginas

En términos generales, con sitios estáticos, cinco parece ser el número mágico de páginas que tienen (no tengo ni idea de por qué). Así que vamos a seguir adelante y agregar dos páginas más a su sitio para completar ese número.

En su carpeta "Content", cree un archivo denominado "4.Markdown Examples.txt" y añada el siguiente código:

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

El contenido de este archivo le ofrece algunos ejemplos prácticos de cosas que puede hacer con Markdown, como crear listas, marcar en negrita, escribir en cursiva, mostrar código, agregar imágenes, agregar enlaces, agregar encabezados, etc.

Una vez más, en su carpeta "Content", cree otro archivo y, en este momento, el nombre "5.Contact Us.txt".

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

El código de esta página ofrece un ejemplo de cómo puede colocar un Mapa de Google en una página de contacto. Para una página de contacto más sofisticada, también le gustaría consultar el uso de un proveedor de servicios que le proporcione un formulario de contacto incrustable, dado que DropPages sólo admite recursos estáticos.

Su sitio final, con las cinco páginas en su lugar, ahora debe verse así;

Tratamiento de 404 errores y contenido en caché

DropPages es un sistema muy cool, sin embargo, en el momento parece tener la tendencia a mantener en caché archivos como una ardilla con una bocanada de castañas el día antes del invierno.

Puede que encuentre que si realiza cambios en sus archivos de contenido no aparecen, o que si cambia un nombre de página obtiene un error 404 al intentar visitarlo. Hay un botón "Publicar ahora" en el tablero de mi.droppages.com, sin embargo en mis pruebas no parecía ayudar.

Una manera que encontré para impulsar a través de los cambios que no estaban apareciendo era agregar un archivo extra a la carpeta "Content", nombrada cualquier cosa aleatoria, p. Flushme.txt. El sistema detectaría el nuevo archivo y luego actualizaría el resto del sitio en el proceso, después de lo cual podría borrar el archivo de nuevo.

Sin embargo, esto no siempre funciona con errores 404. En algunos casos encontré que la única manera de deshacerse de un error 404 era ir con un nombre totalmente nuevo para el archivo / carpeta de páginas, p. Desde 2.About Us.txt a 2. About Our Studio.txt, y luego agregar de nuevo un archivo "flushme.txt" para forzar al sistema a actualizar y encontrar el nombre actualizado en el proceso.

Extras

Hay algunas características adicionales que se pueden aprovechar en el sistema DropPages que no cubrimos anteriormente, así que echemos un vistazo rápido a ellos ahora.

Aunque es poco probable que sea necesario en un sitio pequeño, si su sitio crece y desea tener un sitemap, puede crear una plantilla personalizada e incluir en ella la etiqueta {{Navigation}}. Esta etiqueta genera una lista desordenada de todas las páginas de su sitio. Crear una página utilizando su plantilla personalizada con sólo un "Sitemap" título como su contenido y hey presto, usted tiene un mapa del sitio.

Páginas ocultas

Si tiene una página para la que no desea que aparezca un vínculo en la navegación, agregue su nombre con un guion bajo. Por ejemplo, un archivo de contenido de sitemap puede llamarse "_sitemap.txt".

Plantillas de error personalizadas

Además de crear plantillas personalizadas específicamente para mostrar contenido, también tiene la opción de crear plantillas que controlan lo que los visitantes verán si encuentran un error o si no se encuentra una página. Simplemente cree los archivos de plantilla llamados "Error.html" y "PageNotFound.html" e incluya en ellos lo que quiera. Puede ver ejemplos de estos archivos de plantilla en el tema "Básico" disponibles para descargar desde: http://droppages.com/themes

Breadcrumbs

Si desea incluir una ruta de exploración en cualquiera de sus plantillas, añada la etiqueta {{Breadcrumbs}}. Esto dará salida a los antepasados de la página actual como una lista desordenada.

Etiquetas / secciones personalizadas

Además de que su contenido se procese donde se coloque la etiqueta {{Body}} en su plantilla, también puede agregar etiquetas personalizadas y hacer que se incluyan secciones de su contenido en ellas.

Por ejemplo, además de la etiqueta regular {{Body}}, puede agregar una etiqueta personalizada a una plantilla, como {{Mycustomtag}}.

A continuación, al crear el archivo de contenido, incluiría la notación @Body en la línea por encima del contenido que desea imprimir a través de la etiqueta {{Body}} y @Mycustomtag encima del contenido para mostrar dónde está la etiqueta {{Mycustomtag}}, p.ej

:customhometemplate

@Body
Welcome to our amazing business

@Mycustomtag
This month's special 50% off!

Terminando

DropPages es realmente un pedazo de trabajo inteligente, especialmente cuando se considera que fue creado como un proyecto paralelo por una persona, Dave McDermid.

De forma gratuita, tiene un límite de uso de hasta 50 MB. Para poner eso en perspectiva, el ejemplo que acabamos de ejecutar utiliza sólo 22Kb. Sin embargo, si desea aumentar el límite de uso a 1 GB, así como habilitar dominios personalizados, puede actualizar a una versión de pago con las dos primeras semanas libres y, a continuación, 5 libras esterlinas por mes.

Enlaces útiles

droppages.com
Mantenente al día con las noticias y actualizaciones a través de droppages.com/updates
@droppages on Twitter