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.
- 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 sharpThe 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.ymlavatar,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.
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: Exampleurl– link targetimage– path to scarf imageicon– FontAwesome icon classenable– show/hide scarfalt– accessibility text
Add or remove social links easily:
social:
- url: https://www.instagram.com/
icon: fab fa-instagram
enable: trueConfigure links in the sidebar:
sidebar_menu:
- enable: true
name: Home
url: /
- enable: true
name: Get Hexo
url: https://hexo.io/docs/setupenable– show/hidename– link texturl– destination
- Put post images in
source/images/ - The theme generates thumbnails automatically in
source/thumbnails/
Example in a template:
<% if (post.photos && post.photos.length) { %>
<img class="gallery" src="<%- config.root %>thumbnails/<%- post.photos[0].replace(/^images\//, '') %>" alt="<%- post.title || 'Untitled' %>">
<% } %>
⚠️ Only shows image ifpost.photosexists, and it will only show the first image.
Start a local Hexo server to preview:
hexo clean
hexo s- Visit
http://localhost:4000 - Changes in templates or CSS are reflected immediately.