mirror of
https://github.com/wassname/template.git
synced 2026-06-28 00:15:50 +08:00
Shan Carter
179 lines
8.8 KiB
HTML
179 lines
8.8 KiB
HTML
<!doctype html>
|
||
<meta charset="utf-8">
|
||
<script src="../dist/template.js"></script>
|
||
<style>
|
||
.fake-img {
|
||
background: #bbb;
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
|
||
margin-bottom: 12px;
|
||
}
|
||
.fake-img p {
|
||
font-family: monospace;
|
||
color: white;
|
||
text-align: center;
|
||
margin: 12px 0;
|
||
font-size: 16px;
|
||
}
|
||
</style>
|
||
|
||
<dt-header></dt-header>
|
||
<dt-article>
|
||
<h1>How to Create a Distill Article</h1>
|
||
<h2>A collection of examples and best practices for creating interactive explanatory articles using the Distill web framework</h2>
|
||
<p>Distill ships with a CSS framework and a collection of custom web components that make building interactive academic articles easier than with raw HTML, CSS and JavaScript. This reference article details several examples and best practices for how to use both frameworks.</p>
|
||
<hr>
|
||
<h2>Getting Started</h2>
|
||
<p>Here is the smallest distill post.</p>
|
||
<dt-code block language="html">
|
||
<!doctype html>
|
||
<meta charset="utf-8">
|
||
<script src="../dist/template.min.js"></script>
|
||
|
||
<dt-article>
|
||
<h1>Hello World</h1>
|
||
</dt-article>
|
||
</dt-code>
|
||
<p>A typical distill post will be quite a bit longer than this though. Below is a more complete example. Don’t worry if some of the tags don’t make sense, they’re all documented further in this post.</p>
|
||
<dt-code block language="html">
|
||
<!doctype html>
|
||
<meta charset="utf-8">
|
||
<script src="../dist/template.min.js"></script>
|
||
|
||
<script type="text/front-matter">
|
||
title: Article Title
|
||
description: Description of the post
|
||
published: Jan 10, 2017
|
||
authors:
|
||
- Chris Olah: http://colah.github.io
|
||
- Shan Carter: http://shancarter.com
|
||
affiliations:
|
||
- Google Brain: http://g.co/brain
|
||
- Google Brain: http://g.co/brain
|
||
</script>
|
||
|
||
<dt-article>
|
||
<h1>Hello World</h1>
|
||
<h2>A description of the article</h2>
|
||
<dt-byline></dt-byline>
|
||
<p>This is the first paragraph of the article.</p>
|
||
<p>We can also cite <dt-cite key="gregor2015draw"></dt-cite> external publications.</p>
|
||
</dt-article>
|
||
|
||
<script type="text/bibliography">
|
||
@article{gregor2015draw,
|
||
title={DRAW: A recurrent neural network for image generation},
|
||
author={Gregor, Karol and Danihelka, Ivo and Graves, Alex and Rezende, Danilo Jimenez and Wierstra, Daan},
|
||
journal={arXivreprint arXiv:1502.04623},
|
||
year={2015}
|
||
}
|
||
</script>
|
||
</dt-code>
|
||
<hr>
|
||
<h2>Markdown</h2>
|
||
<p>Markdown is supported as an alternative to html for the <dt-code language="html"><dt-article></dt-code> element. </p>
|
||
<dt-code block language="html">
|
||
<!doctype html>
|
||
<meta charset="utf-8">
|
||
<script src="../dist/template.min.js"></script>
|
||
<dt-article markdown>
|
||
# Hello World
|
||
|
||
## A description of the post
|
||
|
||
First paragraph of the article.
|
||
</dt-article>
|
||
<script type="text/bibliography"></script>
|
||
</dt-code>
|
||
<p>We use <a href="https://github.com/chjj/marked">marked</a> as the rendering engine, with <a href="https://help.github.com/articles/basic-writing-and-formatting-syntax/">github flavored markdown</a> and <a href="https://daringfireball.net/projects/smartypants/">smartypants</a> enabled. In development mode the markdown is translated in the client after the dom content has loaded, but when published, the translation is precompiled.</p>
|
||
<hr>
|
||
<h2>Front Matter</h2>
|
||
<p>You’ll need to describe some data about you post — title, description, authors, etc. For this use the <dt-code language="html"><script type="text/front-matter"></dt-code> tag.</p>
|
||
<dt-code block language="html">
|
||
<script type="text/front-matter">
|
||
title: Article Title
|
||
description: Description of the post
|
||
authors:
|
||
- Chris Olah: http://colah.github.io
|
||
- Shan Carter: http://shancarter.com
|
||
affiliations:
|
||
- Google Brain: http://g.co/brain
|
||
- Google Brain: http://g.co/brain
|
||
</script>
|
||
</dt-code>
|
||
<!-- <p>You can also use an external JSON file if you like. We will automatically make a request for a <dt-code>distill.json</dt-code> file if there is no <dt-code language="html"><script type="text/front-matter"></dt-code> element on the page, or you can point to another file with the <dt-code>src</dt-code> attribute. In production, these files will be inlined into the document.</p>
|
||
<dt-code block language="html">
|
||
<script type="text/front-matter" src="./distill.json"></script>
|
||
</dt-code> -->
|
||
<hr>
|
||
<h2>Citations</h2>
|
||
<p>Bibtex is the supported way of making academic citations. You first need have a global definition of all your possible citations. For this we’ll use the <dt-code language="html"><script type="text/bibliography"></dt-code> element.</p>
|
||
<dt-code block language="html">
|
||
<script type="text/bibliography"">
|
||
@article{gregor2015draw,
|
||
title={DRAW: A recurrent neural network for image generation},
|
||
author={Gregor, Karol and Danihelka, Ivo and Graves, Alex and Rezende, Danilo Jimenez and Wierstra, Daan},
|
||
journal={arXivreprint arXiv:1502.04623},
|
||
year={2015}
|
||
}
|
||
@article{mercier2011humans,
|
||
title={Why do humans reason? Arguments for an argumentative theory},
|
||
author={Mercier, Hugo and Sperber, Dan},
|
||
journal={Behavioral and brain sciences},
|
||
volume={34},
|
||
number={02},
|
||
pages={57--74},
|
||
year={2011},
|
||
publisher={Cambridge Univ Press}
|
||
}
|
||
</script>
|
||
</dt-code>
|
||
<!-- <p>Like with the <dt-code language="html"><script type="text/front-matter"></dt-code> element, you can alternatively reference an external file with the <dt-code>src</dt-code> attribute. If no <dt-code language="html"><script type="text/bibliography"></dt-code> element is found on the page, a request will automatically be made for <dt-code>bibliography.bib</dt-code>. In production, these files will be inlined into the document.</p>
|
||
<dt-code block language="html">
|
||
<script type="text/bibliography" src="bibliography.bib"></script>
|
||
</dt-code> -->
|
||
<p>Citations are then used in the article body with the <dt-code language="html"><dt-cite></dt-code> tag. The <dt-code>article</dt-code> attribute is a reference to the id provided in the bibiography.</p>
|
||
<dt-code block language="html">
|
||
<dt-cite ket="gregor2015draw"></dt-cite>
|
||
</dt-code>
|
||
|
||
<hr>
|
||
<h2>Code Blocks</h2>
|
||
<p>Syntax highlighting is provided within <dt-code language="html"><dt-code></dt-code> tags. An example of inline code snippets: <dt-code language="html"><dt-code language="html">let x = 10;</dt-code></dt-code>. For larger blocks of code, add a <dt-code>block</dt-code> attribute:</p>
|
||
<dt-code block language="html">
|
||
<dt-code block language="javascript">
|
||
var x = 25;
|
||
function(x){
|
||
return x * x;
|
||
}
|
||
</dt-code>
|
||
</dt-code>
|
||
|
||
<!-- <hr>
|
||
<h2>Footnotes</h2>
|
||
<p>This is a <dt-footnote ref="blah" /></p>
|
||
<dt-footnote-body ref="blah"></dt-footnote-body>
|
||
<hr>
|
||
<h2>Math</h2> -->
|
||
<hr>
|
||
<h2>Layouts</h2>
|
||
<p>The main text column is referred to as the body. It is the assumed layout of any direct descendents of the <code>dt-article</code> element.</p>
|
||
<div class="fake-img l-body"><p>.l-body</p></div>
|
||
<div class="fake-img l-middle"><p>.l-middle</p></div>
|
||
<div class="fake-img l-page"><p>.l-page</p></div>
|
||
<p>Occasionally you’ll want to use the full browser width. For this, use screen. You can also inset the element a little from the edge of the browser by appending, you guessed it, <code>inset</code>.</p>
|
||
<div class="fake-img l-screen"><p>.l-screen</p></div>
|
||
<div class="fake-img l-screen-inset"><p>.l-screen-inset</p></div>
|
||
<p>Often you want to position smaller images so as not to completely interrupt the flow of your text. Or perhaps you want to put some text in the margin as an aside or to signal that it’s optional content. For these cases we’ll use the float-based <code>.side</code> layouts.</p>
|
||
<div class="fake-img l-body side"><p>.l-body.side</p></div>
|
||
<div class="fake-img l-page side"><p>.l-page.side</p></div>
|
||
<p>They are all floated to the right and anchored to the right-hand edge of the position you specify. By default, each will take up approximately half of the width of the standard layout position, but you can override the width with a more specific selector. </p>
|
||
<div class="fake-img l-gutter"><p>.l-gutter</p></div>
|
||
<p>The final layout is for marginalia, asides, and footnotes. It does not interrupt the normal flow of <code>.l-body</code> sized text except on mobile screen sizes.</p>
|
||
<!--
|
||
<hr>
|
||
<h2>Including External Files</h2> -->
|
||
|
||
</dt-article>
|
||
<dt-footer></dt-footer>
|