124 lines
2.4 KiB
Markdown
124 lines
2.4 KiB
Markdown
# Tapestry-Code Theme
|
||
|
||
Tapestry-Code is a Hexo theme derrived from Tapestry theme I am using for personal blog.
|
||
|
||
I am using Tapestry-Code for my [technical blog](https://blog.hackman.club/).
|
||
|
||
---
|
||
|
||
## 1. Installation
|
||
|
||
1. Clone the theme into your Hexo project:
|
||
|
||
```bash
|
||
cd your-hexo-project
|
||
git clone https://github.com/HackmanClub/tapestry-code.git themes/tapestry-code
|
||
```
|
||
|
||
1. Set the theme in Hexo’s main `_config.yml`:
|
||
|
||
```yaml
|
||
theme: tapestry-code
|
||
```
|
||
|
||
---
|
||
|
||
## 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:
|
||
|
||
```bash
|
||
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 - it's used for links and avatar border.
|
||
- `secondary_color`: secondary color for your theme - it's used for links (mostly hover).
|
||
- `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:
|
||
|
||
```yaml
|
||
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
|
||
|
||
#### Social Links
|
||
|
||
Add or remove social links easily:
|
||
|
||
```yaml
|
||
social:
|
||
- url: https://www.instagram.com/
|
||
icon: fab fa-instagram
|
||
relme: true
|
||
enable: true
|
||
```
|
||
|
||
If `relme: true` in config, the corresponding social media entry will have `rel="me"`, that you need for verifying sites (eg, mastodon).
|
||
|
||
---
|
||
|
||
### Sidebar Menu
|
||
|
||
Configure links in the sidebar:
|
||
|
||
```yaml
|
||
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
|
||
|
||
---
|
||
|
||
### Blog images
|
||
|
||
Define image as:
|
||
|
||
`photos: images/image.png`
|
||
|
||
> ⚠️ Image shows only if `post.photos` exists, and only first image will be shown.
|
||
|
||
---
|
||
|
||
## 4. Running Locally
|
||
|
||
Start a local Hexo server to preview:
|
||
|
||
```bash
|
||
hexo clean
|
||
hexo s
|
||
```
|
||
|
||
- Visit `http://localhost:4000`
|
||
- Changes in templates or CSS are reflected immediately.
|