Tapestry Theme

Tapestry is a Hexo theme designed for tumblr style gallery blog feed.

I am using this theme for a personal blog, or you can check the official theme preview.

1. Installation

Clone the theme into your Hexo project:

cd your-hexo-project
git clone https://github.com/HackmanClub/tapestry.git themes/tapestry

Set the theme in Hexo’s main _config.yml:

theme: tapestry

Install dependencies:

npm install sharp

2. Configuration

The theme uses its own _config.yml inside themes/tapestry/. You will need to copy / rename _EXAMPLE_config.yml as a starting point:

cp themes/tapestry/_EXAMPLE_config.yml themes/tapestry/_config.yml

Important Sections

Site Settings

avatar, banner, favicon: paths to your images.
primary_color: main color for your theme.
tag_border: add borders around tags.
sidebar: show or hide the sidebar.
scarves: enable or disable scarves links.

Scarves

Scarf links appear at the top right. You can use an image or FontAwesome icon:

scarf:
  - url: tags/baking
    image: images/assets/scarves/scarf.png
    icon: false
    enable: true
    alt: Example
  - url: tags/photo
    image: false
    icon: fa-solid fa-heart
    enable: true
    alt: Example

url – link target
image – path to scarf image
icon – FontAwesome icon class
enable – show/hide scarf
alt – accessibility text

Add or remove social links easily:

social:
  - url: https://www.instagram.com/
    icon: fab fa-instagram
    enable: true

Configure links in the sidebar:

sidebar_menu:
  - enable: true
    name: Home
    url: /
  - enable: true
    name: Get Hexo
    url: https://hexo.io/docs/setup

enable – show/hide
name – link text
url – destination

3. Using Thumbnails

Put post images in source/images/
The theme generates thumbnails automatically in source/thumbnails/
Use small- or large- in templates depending on your layout.

Example in a template:

<% if (post.photos && post.photos.length) { %>
  <img class="gallery" src="<%- config.root %>thumbnails/small-<%- post.photos[0].replace(/^images\//,'') %>" alt="<%- post.title %>">
<% } %>

⚠️ Only shows image if post.photos exists.

4. Running Locally

Start a local Hexo server to preview:

hexo clean
hexo s

Visit http://localhost:4000
Changes in templates or CSS are reflected immediately.

2.5 KiB Raw Blame History Unescape Escape