An open API service indexing awesome lists of open source software.

https://github.com/blackaly/shika_hugo_theme

Shika Hugo Theme is a lightweight, fast and highly customizable theme for bloggers who want a blank page to write. Performance, simplicity and flexibility for personal blogs, tech writers and content creators.
https://github.com/blackaly/shika_hugo_theme

go html html-css html-css-javascript html-template html5 hugo hugo-blog hugo-blog-theme hugo-site hugo-theme javascript js

Last synced: 8 months ago
JSON representation

Shika Hugo Theme is a lightweight, fast and highly customizable theme for bloggers who want a blank page to write. Performance, simplicity and flexibility for personal blogs, tech writers and content creators.

Awesome Lists containing this project

README

          

# 🌟 Shika Hugo Theme

**Shika** is a modern, elegant Hugo theme designed for bloggers, writers, and content creators. With its clean design and feature-rich layout, Shika makes your content shine while providing an excellent user experience.

## ✨ Features

- **Beautiful Design** - Clean, modern aesthetics with attention to typography and spacing
- **Fully Responsive** - Looks perfect on all devices from mobile to desktop
- **Customizable Home Page** - Showcase your content with various layouts
- **Content Types** - Optimized templates for blog posts and tutorials
- **Split-article Shortcode** - Create beautiful side-by-side content comparisons
- **Fast Performance** - Optimized for speed and SEO

## 📋 Quick Start

### Option 1: With Git (Recommended)

```bash
# Create a new Hugo site
hugo new site my-blog
cd my-blog

# Initialize git and add the Shika theme
git init
git submodule add https://github.com/blackaly/shika_hugo_theme.git themes/Shika

# Create a config file
cat > config.toml < **Note**: The `weight` parameter determines the order in which tutorials appear on the page. Lower values appear first.

### Translation Management

For the best user experience, create matching content in both languages:

1. When creating a new post or tutorial, create both English and Arabic versions.
2. Keep the same filename in both language directories for easier management.
3. Use the same `weight` parameter in both language versions to maintain consistent ordering.

Example of corresponding files:
- `content/en/posts/welcome.md`
- `content/ar/posts/welcome.md`

## 🧩 Shortcodes

### Split Article Shortcode

This theme includes a powerful split-article shortcode that allows you to create side-by-side comparisons:

```
{{< split-article
left="### Left Side Content"
right="### Right Side Content"
leftPoint="Left Label"
rightPoint="Right Label"
note="A connecting note between the two sides"
direction="horizontal"
>}}
```

For detailed documentation and examples, see the [Split Article Documentation](/tutorials/theme-documentation/).

## 🎨 Customization

### CSS Customization

The theme's appearance can be customized by modifying the CSS files in `static/css/`:

- `style.css`: Core styles
- `home.css`: Home page styles
- `article.css`: Article page styles
- `list_article.css`: Listing page styles

## 🔍 Troubleshooting

### Common Issues

- **Theme Not Working**: Make sure the theme name is set to "Shika" (case-sensitive) in your config.toml
- **Missing Styles**: Check that all CSS files are properly loaded in the head partial
- **Images Not Displaying**: Ensure image paths are correct and files exist in the static directory
- **Language Switching**: Verify that your multilingual configuration is correct in config.toml

If you encounter any issues, please [open an issue](https://github.com/blackaly/shika_hugo_theme/issues) on GitHub.

## 🤝 Contributing

Contributions are welcome! Here's how you can contribute:

1. Fork the repository
2. Create your feature branch: `git checkout -b feature/amazing-feature`
3. Commit your changes: `git commit -m 'Add some amazing feature'`
4. Push to the branch: `git push origin feature/amazing-feature`
5. Open a Pull Request

## 📜 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 💖 Acknowledgements

- [Hugo](https://gohugo.io/) for the amazing static site generator.