Theme Features on Tian Zhao

A first post

Fri, 01 Jan 2021 00:00:00 +0000

Hi, I'm the here-bot cat!

Use me to find your way in your website.

Here I am:: content/blog/spoonful-series/01-spoonful.md

To remove me, delete this line inside that file: {{< here >}}

My content section is:: blog

My layout is:: single-series

does this work?

or this?

Let’s start.

A second post

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

Hi, I'm the here-bot cat!

Use me to find your way in your website.

Here I am:: content/blog/spoonful-series/02-spoonful/index.md

To remove me, delete this line inside that file: {{< here >}}

My content section is:: blog

My layout is:: single-series

Images in this page bundle:: /blog/spoonful-series/02-spoonful/sidebar-inverse.jpg

part 2!

does this work?

now for some very cool things

get ready!

A third post

Sun, 03 Jan 2021 00:00:00 +0000

Hi, I'm the here-bot cat!

Use me to find your way in your website.

Here I am:: content/blog/spoonful-series/03-spoonful/index.markdown

Here is my R Markdown source file:: blog/spoonful-series/03-spoonful/index.Rmarkdown

To remove me, delete this line inside that file: {{< here >}}

My content section is:: blog

My layout is:: single-series

Images in this page bundle:: /blog/spoonful-series/03-spoonful/featured-photo.jpg

are you still here?

does this work?

final stretch!

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?

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:?

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.

Bakeoff

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.

Built-in Contact Form

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

Theme Features on Tian Zhao

A first post

does this work?

or this?

A second post

part 2!

does this work?

now for some very cool things

more

get ready!

A third post

are you still here?

does this work?

final stretch!

Set up your social

Configure social

Style your site colors

Use a color theme

Style your site typography

Embedded fonts

Using panelsets

CSS Grid Scaffold

“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.”

Overview

Bakeoff

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

Functional Form

Built-in Contact Form

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

Functional Form