From ec81eb1d4a8294349a26a9d54dbe7148cec3cdf2 Mon Sep 17 00:00:00 2001 From: Yihui Xie Date: Thu, 15 Jun 2017 23:07:44 -0500 Subject: add example site --- exampleSite/content/_index.md | 38 +++++++++ exampleSite/content/about.md | 86 ++++++++++++++++++++ .../content/note/2017-06-13-a-quick-note.md | 13 +++ .../content/note/2017-06-14-another-note.md | 10 +++ exampleSite/content/post/2015-07-23-lorem-ipsum.md | 18 +++++ .../content/post/2016-02-14-hello-markdown.md | 92 ++++++++++++++++++++++ 6 files changed, 257 insertions(+) create mode 100644 exampleSite/content/_index.md create mode 100644 exampleSite/content/about.md create mode 100644 exampleSite/content/note/2017-06-13-a-quick-note.md create mode 100644 exampleSite/content/note/2017-06-14-another-note.md create mode 100644 exampleSite/content/post/2015-07-23-lorem-ipsum.md create mode 100644 exampleSite/content/post/2016-02-14-hello-markdown.md (limited to 'exampleSite/content') diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md new file mode 100644 index 0000000..77e75a2 --- /dev/null +++ b/exampleSite/content/_index.md @@ -0,0 +1,38 @@ +--- +title: Home +--- + +[](https://github.com/yihui/hugo-xmin) + +# HUGO XMIN + +## _Keep it simple, but not simpler_ + +**XMin** is a Hugo theme written by [Yihui Xie](https://yihui.name) in about four hours: half an hour was spent on the Hugo templates, and 3.5 hours were spent on styling. The main motivation for writing this theme was to provide a really minimal example to beginners of Hugo templates. This XMin theme contains about 130 lines of code in total, including the code in HTML templates and CSS (also counting empty lines). + + +```bash +find . -not -path '*/exampleSite/*' \( -name '*.html' -o -name '*.css' \) | xargs wc -l +``` + +``` + 5 ./layouts/404.html + 18 ./layouts/_default/list.html + 12 ./layouts/_default/single.html + 16 ./layouts/_default/terms.html + 0 ./layouts/partials/foot_custom.html + 9 ./layouts/partials/footer.html + 0 ./layouts/partials/head_custom.html + 19 ./layouts/partials/header.html + 7 ./static/css/fonts.css + 50 ./static/css/style.css + 136 total +``` + +I can certainly further reduce the code, for example, by eliminating the CSS, but I believe a tiny bit CSS can greatly improve readability. You cannot really find many CSS frameworks that only contain 50 lines of code. + +Although it is a minimal theme, it is actually fully functional. It supports pages (including the home page), blog posts, a navigation menu, categories, tags, and RSS. With a little bit customization, it can easily support LaTeX math expressions, e.g., + +`$${\sqrt {n}}\left(\left({\frac {1}{n}}\sum _{i=1}^{n}X_{i}\right)-\mu \right)\ {\xrightarrow {d}}\ N\left(0,\sigma ^{2}\right)$$` + +All pages not under the root directory of the website are listed below. You can also visit the list page of a single section, e.g., [posts](/post/), or [notes](/note/). See the [About](/about/) page for the usage of this theme. diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md new file mode 100644 index 0000000..d8df3ca --- /dev/null +++ b/exampleSite/content/about.md @@ -0,0 +1,86 @@ +--- +title: About Hugo XMin +--- + +**XMin** is the first Hugo theme I have designed. The original reason that I wrote it was I needed a minimal example of Hugo themes when I was writing the [**blogdown**](https://github.com/rstudio/blogdown) book. Basically I wanted a simple theme that supports a navigation menu, a home page, other single pages, lists of pages, blog posts, categories, tags, and RSS. That is all. Nothing fancy. In terms of CSS and JavaScript, I really want to keep them minimal. In fact, this theme does not contain any JavaScript code at all, although on this example website I did introduce some JavaScript code (still relatively simple anyway). The theme does not contain any images, either, and is pretty much a plain-text theme. + +# config.toml + +For this example site, I defined permalinks for two sections, `post` and `note`, so that the links to pages under these directories will contain the date info. This is optional, and it is up to your personal taste of URLs. + +``` +[permalinks] + post = "/post/:year/:month/:day/:slug/" + note = "/note/:year/:month/:day/:slug/" +``` + +You can define the menu through `menu.main`, e.g., + +``` +[[menu.main]] + name = "Home" + url = "/" + weight = 1 +[[menu.main]] + name = "About" + url = "/about/" + weight = 2 +[[menu.main]] + name = "Categories" + url = "/categories/" + weight = 3 +[[menu.main]] + name = "Tags" + url = "/tags/" + weight = 4 +[[menu.main]] + name = "Subscribe" + url = "/index.xml" +``` + +The page footer can be defined in `.Params.copyright`, and the text is treated as Markdown, e.g., + +``` +[params] + copyright = "© [Yihui Xie](https://yihui.name) 2017" +``` + +# Custom layouts + +There are two layout files under `layouts/partials/` that you may want to override: `head_custom.html` and `foot_custom.html`. This is how you inject arbitrary HTML code to the head and foot areas. For example, this site has a file `layouts/partials/foot_custom.html` to support LaTeX math via MathJax and center images automatically: + +```html + + + + + +``` + +You can certainly enable highlight.js for syntax highlighting by yourself through `head_custom.html` and `foot_custom.html` if you want. + +If you do not like the default fonts (e.g., `Palatino`), you may provide your own `static/css/fonts.css` under the root directory of your website to override the `fonts.css` in the theme. + +# Design philosophy + +Lastly, a few words about my design philosophy for this theme: I have been relying on existing frameworks like Bootstrap for years since I'm not really a designer, and I was always scared by the complexity of CSS. + +When I started writing this theme, I asked myself, "_What if I just write from scratch?_" No Bootstrap. No Normalize.css. I don't care about IE (life could be so much easier without IE) or inconsistencies among browsers (for personal websites). As long as the theme looks okay in Chrome, Firefox, and Safari, I'm done. Thanks to the simplicity of Markdown, you cannot really produce very complicated HTML, and I think styling the HTML output from Markdown is much simpler than general HTML documents. For example, I do not need to care much about form elements like textareas or buttons. + +After I finished this theme, I started to wonder why I'd need `normalize.css` at all (it sounds like a religious belief). The default appearance of modern browsers actually looks pretty good in my eyes, after I tweak the typeface a little bit. + +Compared to inconsistencies across browsers, I care much more about these properties of HTML elements: + +- Tables should always be centered, and striped tables are easier to read especially when they are wide. Tables should not have vertical borders. +- An image should ben centered if it is the only child element of a paragraph. +- The `max-width` of images, videos, and iframes should be `100%`. + +I hope you can enjoy this theme. The source code is [on Github](https://github.com/yihui/hugo-mini). Happy hacking! diff --git a/exampleSite/content/note/2017-06-13-a-quick-note.md b/exampleSite/content/note/2017-06-13-a-quick-note.md new file mode 100644 index 0000000..759a444 --- /dev/null +++ b/exampleSite/content/note/2017-06-13-a-quick-note.md @@ -0,0 +1,13 @@ +--- +title: A Quick Note on Two Beautiful Websites +author: Yihui Xie +date: '2017-06-13' +slug: a-quick-note +--- + +To me, the two most impressive websites based on **blogdown** are: + +1. [Rob J Hyndman](https://robjhyndman.com)'s personal website. +1. [Live Free or Dichotomize](http://livefreeordichotomize.com) by Lucy and Nick _et al_. + +I'm sure there will be more. diff --git a/exampleSite/content/note/2017-06-14-another-note.md b/exampleSite/content/note/2017-06-14-another-note.md new file mode 100644 index 0000000..fef3aee --- /dev/null +++ b/exampleSite/content/note/2017-06-14-another-note.md @@ -0,0 +1,10 @@ +--- +title: Another Note on A blogdown Tutorial +author: Yihui Xie +date: '2017-06-14' +slug: another-note +--- + +I just discovered [an awesome tutorial](https://apreshill.rbind.io/post/up-and-running-with-blogdown/) on **blogdown** written by Alison. I have to admit this is _the_ best **blogdown** tutorial I have seen so far. + +![](https://apreshill.rbind.io/img/posts/2017-06-12-up-and-running-with-blogdown/blogdown-signpost-4.png) diff --git a/exampleSite/content/post/2015-07-23-lorem-ipsum.md b/exampleSite/content/post/2015-07-23-lorem-ipsum.md new file mode 100644 index 0000000..ef58622 --- /dev/null +++ b/exampleSite/content/post/2015-07-23-lorem-ipsum.md @@ -0,0 +1,18 @@ +--- +title: Lorem Ipsum +date: '2015-07-23' +categories: + - Example +tags: + - Markdown +--- + +**Lorem ipsum** dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore _magna aliqua_. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +Quisque mattis volutpat lorem vitae feugiat. Praesent porta est quis porta imperdiet. Aenean porta, mi non cursus volutpat, mi est mollis libero, id suscipit orci urna a augue. In fringilla euismod lacus, vitae tristique massa ultricies vitae. Mauris accumsan ligula tristique, viverra nulla sed, porta sapien. Vestibulum facilisis nec nisl blandit convallis. Maecenas venenatis porta malesuada. Ut ac erat tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla sodales quam sit amet tincidunt egestas. In et turpis at orci vestibulum ullamcorper. Aliquam sed ante libero. Sed hendrerit arcu lacus. + +> Sed luctus volutpat sem in dapibus. Ut pellentesque vitae magna ac mattis. Sed vestibulum, nulla at condimentum semper, magna quam posuere dui, quis sagittis enim nisi eget ex. Vivamus tempor erat a sem dapibus porta. Fusce varius dapibus tempus. Nam bibendum dignissim fringilla. Phasellus eu justo facilisis, ullamcorper urna in, feugiat mauris. Quisque dignissim purus vitae ullamcorper scelerisque. Sed at magna at nisi consequat euismod. Curabitur justo ex, efficitur in fermentum luctus, tincidunt nec lectus. Aliquam a neque metus. Etiam nulla nunc, tristique vitae accumsan ullamcorper, placerat eget nunc. Cras porta eleifend dolor maximus molestie. Etiam vitae pellentesque turpis, quis accumsan ligula. Mauris auctor, nisi nec ullamcorper pulvinar, libero magna sagittis enim, sollicitudin dignissim urna justo et tortor. + +Morbi non sem euismod, suscipit purus id, gravida velit. Quisque mollis luctus ligula non suscipit. Curabitur massa arcu, aliquam ac dolor a, pellentesque dignissim dui. Donec at vestibulum magna. Quisque fermentum, tortor id sodales egestas, ligula ligula interdum ipsum, et volutpat elit massa vitae nibh. Morbi eleifend libero quis pretium viverra. Etiam congue, velit ac vestibulum finibus, velit nibh fringilla purus, eu semper dui est eu nunc. Etiam feugiat scelerisque diam vitae sodales. Etiam luctus in urna eu lobortis. Nam vestibulum eros et nibh elementum ullamcorper. Nam tristique porttitor orci, nec pretium est vestibulum at. Quisque posuere semper orci, vel semper justo commodo sed. Nullam accumsan risus rhoncus fringilla porta. Morbi interdum condimentum pharetra. Donec eu elit quam. Vivamus eleifend posuere mi, vel accumsan urna sollicitudin ut. + +Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla nec nunc felis. Sed bibendum vel leo id semper. Maecenas vitae iaculis ante. Nam ut tempor est, eu molestie augue. Quisque tincidunt sagittis odio sed tristique. Aenean et felis quis mi viverra consequat. diff --git a/exampleSite/content/post/2016-02-14-hello-markdown.md b/exampleSite/content/post/2016-02-14-hello-markdown.md new file mode 100644 index 0000000..31bad7c --- /dev/null +++ b/exampleSite/content/post/2016-02-14-hello-markdown.md @@ -0,0 +1,92 @@ +--- +title: A Plain Markdown Post +author: Yihui Xie +date: '2016-02-14' +categories: + - Example + - Hugo +tags: + - blogdown + - Markdown + - MathJax + - Pandoc + - RStudio +--- + +This sample post is mainly for [**blogdown**](https://github.com/rstudio/blogdown) users. If you do not use **blogdown**, you can skip the first section. + +# 1. Markdown or R Markdown + +This is a post written in plain Markdown (`*.md`) instead of R Markdown (`*.Rmd`). The major differences are: + +1. You cannot run any R code in a plain Markdown document, whereas in an R Markdown document, you can embed R code chunks (```` ```{r} ````); +2. A plain Markdown post is rendered through [Blackfriday](https://gohugo.io/overview/configuration/), and an R Markdown document is compiled by [**rmarkdown**](http://rmarkdown.rstudio.com) and [Pandoc](http://pandoc.org). + +There are many differences in syntax between Blackfriday's Markdown and Pandoc's Markdown. For example, you can write a task list with Blackfriday but not with Pandoc: + +- [x] Write an R package. +- [ ] Write a book. +- [ ] ... +- [ ] Profit! + +Similarly, Blackfriday does not support LaTeX math and Pandoc does. I have added the MathJax support to this theme ([hugo-xmin](https://github.com/yihui/hugo-xmin)) but there is a caveat for plain Markdown posts: you have to include math expressions in a pair of backticks (inline: `` `$ $` ``; display style: `` `$$ $$` ``), e.g., `$S_n = \sum_{i=1}^n X_i$`.^[This is because we have to protect the math expressions from being interpreted as Markdown. You may not need the backticks if your math expression does not contain any special Markdown syntax such as underscores or asterisks, but it is always a safer choice to use backticks. When you happen to have a pair of literal dollar signs inside the same element, you can escape one dollar sign, e.g., `\$50 and $100` renders "\$50 and $100".] For R Markdown posts, you do not need the backticks, because Pandoc can identify and process math expressions. + +When creating a new post, you have to decide whether the post format is Markdown or R Markdown, and this can be done via the `rmd` argument of the function `blogdown::new_post()`, e.g. + +```r +blogdown::new_post("Post Title", rmd = FALSE) +``` + +Actually I recommend you to use the RStudio addin "New Post" instead: + +![RStudio addin New Post](https://bookdown.org/yihui/blogdown/images/new-post.png) + +# 2. Sample Text + +## Second-level header + +### Third-level header + +#### Fourth-level header + +A paragraph (with a footnote): + +**Lorem ipsum** dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore _magna aliqua_. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.^[I'm sure you are bored by the text here.] + +A blockquote (a gray bar at the left and lightgray background): + +> Quisque mattis volutpat lorem vitae feugiat. Praesent porta est quis porta imperdiet. Aenean porta, mi non cursus volutpat, mi est mollis libero, id suscipit orci urna a augue. In fringilla euismod lacus, vitae tristique massa ultricies vitae. Mauris accumsan ligula tristique, viverra nulla sed, porta sapien. Vestibulum facilisis nec nisl blandit convallis. Maecenas venenatis porta malesuada. Ut ac erat tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla sodales quam sit amet tincidunt egestas. In et turpis at orci vestibulum ullamcorper. Aliquam sed ante libero. Sed hendrerit arcu lacus. + +Some code (with a drop-shadow effect): + +```js +(function() { + var quotes = document.getElementsByTagName('blockquote'), i, quote; + for (i = 0; i < quotes.length; i++) { + quote = quotes[i]; + var n = quote.children.length; + if (n === 0) continue; + var el = quote.children[n - 1]; + if (!el || el.nodeName !== 'P') continue; + // right-align a quote footer if it starts with --- + if (/^—/.test(el.textContent)) el.style.textAlign = 'right'; + } +})(); +``` + +A table (centered by default): + +| Sepal.Length| Sepal.Width| Petal.Length| Petal.Width|Species | +|------------:|-----------:|------------:|-----------:|:-------| +| 5.1| 3.5| 1.4| 0.2|setosa | +| 4.9| 3.0| 1.4| 0.2|setosa | +| 4.7| 3.2| 1.3| 0.2|setosa | +| 4.6| 3.1| 1.5| 0.2|setosa | +| 5.0| 3.6| 1.4| 0.2|setosa | +| 5.4| 3.9| 1.7| 0.4|setosa | + +An image (automatically centered when it is appropriate): + +![Happy Elmo](https://slides.yihui.name/gif/happy-elmo.gif) + +Looks good? -- cgit 1.4.1