A Blog That Works on Tieli Huang

Set up your social

Thu, 28 Jan 2021 00:00:00 +0000

There are five places where you can choose to show social icons. Here is the tl;dr:

site header (set in config.toml),
site footer (set in config.toml),
homepage (set in content/_index.md),
about page in the sidebar (set in content/about/sidebar/index.md), and
contact page (set in content/form/contact.md).

Read on to learn how to set up your social icons, and how to show/hide them.

Wherever you end up wanting to show your social icons, you’ll need to start by setting up the links in your site config.toml file. Open that up and scroll down to the [[params.social]] section. The start of it looks like this:

Style your site colors

Wed, 27 Jan 2021 00:00:00 +0000

You can totally customize your site’s theme colors within minutes of creating a new site. Read on to find out how, and decide which of the three options meets your needs.

Use a color theme

Hugo Apéro includes 8 built-in color themes that work “out of the box.” This means you can use a color theme to quickly customize the look of your site without needing to write any CSS. You can select the color theme in your config.toml file. Scroll down to find:

Style your site typography

Wed, 27 Jan 2021 00:00:00 +0000

As with color themes, you can completely customize your site’s fonts within minutes of creating a new site. How you do it depends on how much control and customization you need.

Embedded fonts

Hugo Apéro includes 6 embedded fonts that work “out of the box.” We selected 3 serif and 3 sans-serif options that we thought looked good with this theme, in our humble opinions. All embedded fonts include real italics so you may emphasize to your heart’s content :heart:! How to choose?

An evergreen post

Wed, 20 Jan 2021 00:00:00 +0000

Rendering mathematical equations

Examples from the mathjax demo. But they work with katex as well.

Rmarkdown

In .Rmarkdown documents, you can use either

Using panelsets

Sat, 02 Jan 2021 00:00:00 +0000

Courtesy of panelset.js by Garrick Aden-Buie, from his xaringanExtra package: https://pkg.garrickadenbuie.com/xaringanExtra/#/panelset

For example, this panelset:

Hello! 👋

hello

Goodbye 💨

goodbye

Was created by combining this theme’s panelset and panel shortcodes:

{{< panelset class="greetings" >}}
{{< panel name="Hello! :wave:" >}}
  hello
{{< /panel >}}
{{< panel name="Goodbye :dash:" >}}
  goodbye
{{< /panel >}}
{{< /panelset >}}

You could also revert to HTML as well. For example, this panelset:

Question

Which came first: the :chicken: or the :egg:?

An Rmarkdown post

Wed, 30 Dec 2020 00:00:00 +0000

Air quality

with(airquality, boxplot(Temp ~ Month))

with(airquality, plot(Ozone ~ Temp))

mlev <- levels(with(airquality, as.factor(Month)))
with(airquality, plot(Ozone ~ Temp, 
                      pch = as.numeric(mlev), 
                      col = mlev))

Hello R Markdown

Tue, 01 Dec 2020 21:13:14 -0500

R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see http://rmarkdown.rstudio.com.

You can embed an R code chunk like this:

summary(cars)
##      speed           dist       
##  Min.   : 4.0   Min.   :  2.00  
##  1st Qu.:12.0   1st Qu.: 26.00  
##  Median :15.0   Median : 36.00  
##  Mean   :15.4   Mean   : 42.98  
##  3rd Qu.:19.0   3rd Qu.: 56.00  
##  Max.   :25.0   Max.   :120.00
fit <- lm(dist ~ speed, data = cars)
fit
## 
## Call:
## lm(formula = dist ~ speed, data = cars)
## 
## Coefficients:
## (Intercept)        speed  
##     -17.579        3.932

Including Plots

You can also embed plots. See Figure 1 for example:

CSS Grid Scaffold

Tue, 02 Jul 2019 00:00:00 +0000

“Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.”

— Chris House, A Complete Guide to CSS Grid Layout ¹

Overview

Since I began building websites in Y2K, I’ve lost count how many times the phrase “…there’s got to be a better way to do this” has passed my lips. Most times, while fighting with floats and widths of content and sidebars or just basically trying to get something beside something else without using a stupid TABLE.

Built-in Contact Form

Mon, 01 Jul 2019 00:00:00 +0000

Formspree makes it easy to receive submissions from HTML forms on your static website.

Functional Form

This theme has a form-to-email feature built in, thanks to the simple Formspree integration. All you need to activate the form is a valid recipient email address saved in the front matter of the form (/content/forms/contact.md). Of course, the example shown below (your@email.here) must not be used. Please use your actual email address.