Skip to content

Commit

Permalink
new site
Browse files Browse the repository at this point in the history
  • Loading branch information
yufree committed Jan 24, 2018
0 parents commit 4d829de
Show file tree
Hide file tree
Showing 51 changed files with 1,340 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.Rproj.user
.Rhistory
.RData
.Ruserdata
public
46 changes: 46 additions & 0 deletions config.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
baseurl = "/"
languageCode = "en-us"
title = "Hugo XMag"
theme = "hugo-xmag"
googleAnalytics = ""
disqusShortname = ""
ignoreFiles = ["\\.Rmd$", "_files$", "_cache$"]
preserveTaxonomyNames = true
footnotereturnlinkcontents = ""
hasCJKLanguage = true
enableEmoji = true
paginate = 6

[permalinks]
post = "/post/:year/:month/:day/:slug/"

[[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"

[params]
description = "A website built through Hugo and blogdown."
summary_length = 300
github_edit = "https://github.com/yihui/hugo-xmag/edit/master/exampleSite/content/"
footer = "© [Yihui Xie](https://yihui.name) 2017 | [Github](https://github.com/yihui) | [Twitter](https://twitter.com/xieyihui)"

[params.text]
back = "← Back to Home"
edit = "Edit this page →"
truncated = "…"
3 changes: 3 additions & 0 deletions content/_index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
---
title: Hugo XMag
---
121 changes: 121 additions & 0 deletions content/about.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
---
title: About Hugo XMag
author: Yihui Xie
---

**XMag** is the second Hugo theme I have designed. It is based on my first Hugo theme [**XMin**](https://github.com/yihui/hugo-xmin), and similarly, features minimalism but with a magazine style on the homepage inspired by [The Signpost](https://en.wikipedia.org/wiki/Wikipedia:Wikipedia_Signpost) on Wikipedia. You can find its source code on Github: https://github.com/yihui/hugo-xmag (licensed under MIT).

# Features

This theme includes a few cool features:

- Responsive article summary blocks on homepage

- Thumbnails in summary blocks

- Magazine title in Blackletter (𝔅𝔏𝔄ℭ𝔎 𝔏𝔈𝔗𝔗𝔈ℜ)

- Github edit links

- Author info and site info at the bottom of an article

- Multiple authors of a single page

- MathJax for LaTeX math expressions

It also supports features that are probably not even worth mentioning:

- Google Analytics

- highlight.js for syntax highlighting of code blocks

- Display categories and tags on single pages

- Table of contents for single pages

Most features can be configured through `config.toml`, and a few can be enabled by custom layouts.

# config.toml

By default, your site title will be displayed at the top in Blackletter fonts if your web browser and operating system support Blackletter fonts. Essentially, for every English letter `X` in your site title, it is substituted with `𝔛`, e.g. the Blackletter version of `A` is `𝔄` (𝔄). Below are the letters from A to Z:

## 𝔄𝔅ℭ𝔇𝔈𝔉𝔊ℌℑ𝔍𝔎𝔏𝔐𝔑𝔒𝔓𝔔ℜ𝔖𝔗𝔘𝔙𝔚𝔛𝔜ℨ

Alternatively, you can provide a banner image:

```toml
[params.banner]
src = "/path/to/banner.png"
alt = "alternative text on image"
```

By default, each summary block on the homepage contains the first 200 letters extracted from all paragraphs of an article. I find Hugo's built in `.Summary` often unsatisfactory (e.g. it may contain headings and code blocks, which really should not go to the summary), so I wrote my own version. It works much better and the size of most summary blocks will be the same, unless certain articles are really short. The length 200 can be customized via `params.summary_length`.

If you are not satisfied with the automatic summary, you can specify the `description` option in the (YAML) metadata of your Markdown document, e.g.,

```yaml
title: "My Cool Post"
description: "Please use this as the summary."
```
Each summary block may contain a thumbnail, which is the first image in an article if exists. You can override it by providing the `thumbnail` option in the meta data of your Markdown document, e.g.,

```yaml
---
title: "My Cool Post"
thumbnail: "/url/of/the/image"
---
```

For each page, this theme adds an edit link to the top-right if a parameter `github_edit` is provided, so that your reader may easily help you edit a page and submit a pull request on Github.

The page footer can be defined in `.Params.footer`, and the text is treated as Markdown. Below are some sample configurations:

```toml
[params]
summary_length = 200
github_edit = "https://github.com/yihui/hugo-xmag/edit/master/exampleSite/content/"
footer = "© [Yihui Xie](https://yihui.name) 2017"
```

There are a few phrases that you can "translate" (I didn't use Hugo's multi-language feature just because I'm lazy):

```toml
[params.text]
about_author = "About the Author"
author_delimiter = ", "
back = "Back to Home"
edit = "Edit this page"
tags = "Tags: "
truncated = " …"
uncategorized = "Uncategorized"
```

You can define a data file under `data/` to store all authors information, e.g., you can use a TOML file `data/authors.toml` (or YAML/JSON):

```
"Alice Wonder" = "I'm Alice. More about me on [my homepage](http://example.com)."
"Yihui Xie" = "Hey this is Yihui. You don't want to follow me on Twitter @xieyihui."
```

Then for an article with an author name that can be found in `data/authors.toml`, the author info will be added to the bottom of a page. For example, on this page, you can find information about me. You can change the phrase "About the Author" by changing the parameter `about_author` in `config.toml`.

To add a table of contents to an article, you can add `toc: true` to the YAML metadata of the Markdown document.

# Custom layouts

Besides the custom layout^[If this is the first time you have heard about "customizing layouts", please read the Hugo documentation first: https://gohugo.io/themes/customizing/.] files `head_custom.html` and `foot_custom.html` supported in **XMin** (see [documentation](https://xmin.yihui.name/about/)), this theme added a few more layout files such as `banner.html`, `comments.html` and `info.html` under `layouts/partials/`. The first can be used to customize the banner. The second can be used to add a comment section, e.g., if you want to use Hugo's default Disqus template, just add this to `comments.html`:

```
{{ template "_internal/disqus.html" . }}
```

You can also append arbitrary text to each article through `info.html`. For example, you may declare copyrights or briefly introduce your site.

There are other partial templates in this theme and I encourage you to read the source code to figure out what they do.

# Final words

I feel the world has become so noisy that I'm often at a loss when looking at a web page, because there are so many things to distract me. I was heavily influenced by the book [_Amusing Ourselves to Death_](https://en.wikipedia.org/wiki/Amusing_Ourselves_to_Death) after I read it in early 2017. From then on, I was hoping to design a theme for a website that gives articles the top priority. Everything else must give way to articles. That is why the navigation menu is at the bottom instead of in the conventional position (top or sidebar). There isn't much to do other than reading an article when you open a page. By the way, this is a pure plain-text theme. You can certainly add images if you want, but this theme itself contains zero binary files. Out of my [OCD](https://en.wikipedia.org/wiki/Obsessive%E2%80%93compulsive_disorder), I was just trying to push the limits of web design without using any images or JavaScript libraries (I'm a totally amateur).^[I used MathJax and highlight.js anyway in this theme because they are helpful.]

I hope you can enjoy this theme. Again, the source code is [on Github](https://github.com/yihui/hugo-xmag). Happy hacking!
21 changes: 21 additions & 0 deletions content/post/2015-07-23-lorem-ipsum.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
title: Jeff Leek is the Uniformly Most Powerful Jeff
author: Michael Hoffman
date: '2015-07-23'
categories:
- Statistics
tags:
- Markdown
- Lorem Ipsum
thumbnail: https://db.yihui.name/images/saga7.gif
---

**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.
21 changes: 21 additions & 0 deletions content/post/2015-07-23-lorem-ipsum2.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
title: Jeff Leek always obtains unbiased estimators
author: Mauricio Vargas
date: '2015-07-24'
categories:
- Statistics
tags:
- Markdown
- Lorem Ipsum
thumbnail: https://db.yihui.name/imgur/4rHon0B.png
---

**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.
21 changes: 21 additions & 0 deletions content/post/2015-07-23-lorem-ipsum3.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
title: Git commits to Jeff Leek
author: Martin J Frigaard
date: '2015-07-25'
categories:
- Tech
tags:
- Markdown
- Lorem Ipsum
thumbnail: https://db.yihui.name/images/git-diff-gui.png
---

**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.
Loading

0 comments on commit 4d829de

Please sign in to comment.