Welcome to the comprehensive customization guide for the Sour theme! This guide will walk you through every aspect of customizing your Jekyll blog to match your personal style and needs.
Quick Start Customization
1. Basic Site Information
First, update your site’s basic information in _config.yml:
title: Your Amazing Blog
email: your-email@example.com
description: >-
Your blog description here. This appears in search results and social media.
baseurl: "" # Leave empty for root domain
url: "https://yourdomain.com"
twitter_username: yourusername
github_username: yourusername
author: Your Name
2. Change the Theme Colors
The easiest way to customize colors is by changing the DaisyUI theme. Edit _layouts/default.html:
<!-- Change from cyberpunk to another theme -->
<html lang="en" data-theme="dark">
Available themes:
-
light- Clean light theme -
dark- Modern dark theme -
cyberpunk- Neon cyberpunk theme -
cupcake- Soft pastel theme -
emerald- Green accent theme -
corporate- Professional theme -
retro- Vintage theme - And many more
Advanced Color Customization
Creating Custom Color Schemes
Create a custom theme by adding CSS to src/input.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Custom theme */
[data-theme="my-custom"] {
--p: 220 71% 56%; /* Primary color */
--s: 338 75% 64%; /* Secondary color */
--a: 199 89% 48%; /* Accent color */
--n: 220 13% 18%; /* Neutral color */
--b1: 0 0% 100%; /* Base background */
--b2: 0 0% 95%; /* Secondary background */
--b3: 0 0% 90%; /* Tertiary background */
--bc: 220 13% 18%; /* Base content color */
}
Then use your custom theme:
<html data-theme="my-custom">
Custom CSS Classes
Add your own utility classes:
/* Custom components */
.blog-card {
@apply bg-base-100 rounded-lg shadow-lg p-6 hover:shadow-xl transition-all duration-300;
}
.gradient-text {
@apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
}
.glow-effect {
box-shadow: 0 0 20px rgba(var(--p), 0.3);
}
/* Custom animations */
.fade-in {
animation: fadeIn 0.6s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
Typography Customization
Changing Fonts
-
Add Google Fonts to
_includes/head.html:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-
Configure fonts in
tailwind.config.js:
module.exports = {
content: ["_includes/**/*.html", "_layouts/**/*.html", "_posts/**/*.md", "*.html", "*.md"],
theme: {
extend: {
fontFamily: {
'sans': ['Inter', 'system-ui', 'sans-serif'],
'mono': ['JetBrains Mono', 'monospace'],
'heading': ['Inter', 'system-ui', 'sans-serif'],
}
}
},
plugins: [require("daisyui")],
daisyui: {
themes: ["light", "dark", "cyberpunk"]
}
}
- Apply fonts in your CSS:
/* Typography improvements */
.prose {
@apply font-sans text-base-content;
}
.prose h1, .prose h2, .prose h3 {
@apply font-heading font-semibold;
}
.prose code {
@apply font-mono text-sm bg-base-200 px-1 py-0.5 rounded;
}
Layout Customization
Modifying the Navigation
Edit _layouts/default.html to customize the navbar:
<!-- Custom navigation with dropdown -->
<nav class="bg-neutral text-neutral-content sticky top-0 z-50">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between py-4">
<!-- Logo -->
<a href="/jekyll-theme-sour/" class="text-xl font-bold">
<span class="text-primary">Your</span>Blog
</a>
<!-- Desktop Navigation -->
<ul class="hidden md:flex space-x-6">
<li><a href="/jekyll-theme-sour/" class="hover:text-primary transition-colors">Home</a></li>
<li><a href="/jekyll-theme-sour/about" class="hover:text-primary transition-colors">About</a></li>
<!-- Dropdown example -->
<li class="dropdown dropdown-hover">
<label tabindex="0" class="cursor-pointer hover:text-primary">Categories</label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a href="/category/tutorial/">Tutorials</a></li>
<li><a href="/category/review/">Reviews</a></li>
<li><a href="/category/news/">News</a></li>
</ul>
</li>
<li><a href="/jekyll-theme-sour/posts" class="hover:text-primary transition-colors">Archive</a></li>
</ul>
<!-- Mobile menu button -->
<button class="md:hidden btn btn-ghost btn-square">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</nav>
Custom Footer
Replace the footer section in _layouts/default.html:
<footer class="bg-base-200 mt-16">
<div class="container mx-auto px-4 py-12">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<!-- About Section -->
<div class="col-span-2">
<h3 class="font-bold text-lg mb-4">Sour Theme</h3>
<p class="text-base-content/80 mb-4">A template for a responsive and SEO-friendly Jekyll theme built with TailwindCSS and DaisyUI components. </p>
<div class="flex space-x-4">
<a href="https://twitter.com/" class="text-primary hover:text-primary-focus">Twitter</a>
<a href="https://github.com/jeremycardona" class="text-primary hover:text-primary-focus">GitHub</a>
</div>
</div>
<!-- Quick Links -->
<div>
<h4 class="font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="/jekyll-theme-sour/" class="hover:text-primary">Home</a></li>
<li><a href="/jekyll-theme-sour/about" class="hover:text-primary">About</a></li>
<li><a href="/jekyll-theme-sour/posts" class="hover:text-primary">Archive</a></li>
</ul>
</div>
<!-- Categories -->
<div>
<h4 class="font-semibold mb-4">Categories</h4>
<ul class="space-y-2">
<li><a href="/category/jekyll/" class="hover:text-primary">Jekyll</a></li>
<li><a href="/category/update/" class="hover:text-primary">Update</a></li>
<li><a href="/category/tutorial/" class="hover:text-primary">Tutorial</a></li>
</ul>
</div>
</div>
<!-- Copyright -->
<div class="border-t border-base-300 mt-8 pt-8 text-center">
<p>© 2025 Sour Theme. Built with Jekyll & Sour Theme.</p>
</div>
</div>
</footer>
Homepage Customization
Custom Hero Section
Edit _layouts/home.html to customize the homepage:
<!-- Custom hero with background -->
<section class="hero min-h-screen bg-gradient-to-br from-primary to-secondary">
<div class="hero-content text-center text-primary-content">
<div class="max-w-4xl">
<h1 class="text-5xl md:text-7xl font-bold mb-6">
Welcome to <span class="text-accent">Sour Theme</span>
</h1>
<p class="text-xl md:text-2xl mb-8 opacity-90">
A template for a responsive and SEO-friendly Jekyll theme built with TailwindCSS and DaisyUI components.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="/jekyll-theme-sour/posts" class="btn btn-accent btn-lg">
Read Latest Posts
</a>
<a href="/jekyll-theme-sour/about" class="btn btn-outline btn-lg text-white border-white hover:bg-white hover:text-primary">
About Me
</a>
</div>
</div>
</div>
</section>
<!-- Featured Content Section -->
<section class="py-16 bg-base-100">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Featured Content</h2>
<!-- Custom featured posts grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<article class="card bg-base-200 shadow-xl hover:shadow-2xl transition-all duration-300">
<!-- Custom post card content -->
<div class="card-body">
<h3 class="card-title text-lg">
<a href="/jekyll-theme-sour/tutorial/2024/01/25/deploy-to-github-pages.html" class="hover:text-primary">Deploy Sour Theme to GitHub Pages with GitHub Actions</a>
</h3>
<p class="text-base-content/70">Complete guide to deploying your Sour theme blog to GitHub Pages using GitHub Actions. Includes TailwindCSS build automation and custom...</p>
<div class="card-actions justify-between items-center mt-4">
<div class="text-sm text-base-content/60">
January 25, 2024
</div>
<a href="/jekyll-theme-sour/tutorial/2024/01/25/deploy-to-github-pages.html" class="btn btn-primary btn-sm">Read More</a>
</div>
</div>
</article>
<article class="card bg-base-200 shadow-xl hover:shadow-2xl transition-all duration-300">
<!-- Custom post card content -->
<div class="card-body">
<h3 class="card-title text-lg">
<a href="/jekyll-theme-sour/tutorial/2024/01/22/customization-guide.html" class="hover:text-primary">Complete Customization Guide for Sour Theme</a>
</h3>
<p class="text-base-content/70">Step-by-step guide to customizing every aspect of the Sour theme. From colors and fonts to layouts and components.</p>
<div class="card-actions justify-between items-center mt-4">
<div class="text-sm text-base-content/60">
January 22, 2024
</div>
<a href="/jekyll-theme-sour/tutorial/2024/01/22/customization-guide.html" class="btn btn-primary btn-sm">Read More</a>
</div>
</div>
</article>
<article class="card bg-base-200 shadow-xl hover:shadow-2xl transition-all duration-300">
<!-- Custom post card content -->
<div class="card-body">
<h3 class="card-title text-lg">
<a href="/jekyll-theme-sour/tutorial/2024/01/20/jekyll-plugin-showcase.html" class="hover:text-primary">Jekyll Plugin Showcase - Template Examples</a>
</h3>
<p class="text-base-content/70">Comprehensive examples of how to use all the Jekyll plugins included in the Sour theme. Perfect for learning and reference....</p>
<div class="card-actions justify-between items-center mt-4">
<div class="text-sm text-base-content/60">
January 20, 2024
</div>
<a href="/jekyll-theme-sour/tutorial/2024/01/20/jekyll-plugin-showcase.html" class="btn btn-primary btn-sm">Read More</a>
</div>
</div>
</article>
<article class="card bg-base-200 shadow-xl hover:shadow-2xl transition-all duration-300">
<!-- Custom post card content -->
<div class="card-body">
<h3 class="card-title text-lg">
<a href="/jekyll-theme-sour/jekyll/update/2024/01/01/welcome-to-jekyll.html" class="hover:text-primary">Welcome to Jekyll!</a>
</h3>
<p class="text-base-content/70">You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your...</p>
<div class="card-actions justify-between items-center mt-4">
<div class="text-sm text-base-content/60">
January 01, 2024
</div>
<a href="/jekyll-theme-sour/jekyll/update/2024/01/01/welcome-to-jekyll.html" class="btn btn-primary btn-sm">Read More</a>
</div>
</div>
</article>
</div>
</div>
</section>
Post Layout Customization
Enhanced Post Layout
Create a more detailed post layout in _layouts/post.html:
---
layout: default
---
<article class="max-w-4xl mx-auto px-4 py-8">
<!-- Post header -->
<header class="mb-12 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6 gradient-text">Complete Customization Guide for Sour Theme</h1>
<!-- Post meta -->
<div class="flex flex-wrap justify-center gap-6 text-base-content/70 mb-6">
<div class="flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
<time datetime="2024-01-22T14:30:00+00:00">January 22, 2024</time>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
<span>Sour Theme</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<span>5 minutes</span>
</div>
</div>
<!-- Tags -->
<div class="flex flex-wrap justify-center gap-2">
<a href="/tag/customization/" class="badge badge-primary badge-outline">Customization</a>
<a href="/tag/guide/" class="badge badge-primary badge-outline">Guide</a>
<a href="/tag/tailwindcss/" class="badge badge-primary badge-outline">TailwindCSS</a>
<a href="/tag/daisyui/" class="badge badge-primary badge-outline">DaisyUI</a>
<a href="/tag/tutorial/" class="badge badge-primary badge-outline">Tutorial</a>
</div>
</header>
<!-- Table of contents (if enabled) -->
<div class="toc-container mb-8 p-6 bg-base-200 rounded-lg">
<h2 class="text-xl font-semibold mb-4">Table of Contents</h2>
<ul id="toc" class="section-nav">
<li class="toc-entry toc-h3"><a href="#-sitetitle-">{{ site.title }}</a>
<ul>
<li class="toc-entry toc-h4"><a href="#quick-links">Quick Links</a></li>
<li class="toc-entry toc-h4"><a href="#categories">Categories</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#featured-content">Featured Content</a>
<ul>
<li class="toc-entry toc-h3"><a href="#-------------posttitle-----------">
{{ post.title }}
</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#table-of-contents">Table of Contents</a>
<ul>
<li class="toc-entry toc-h3"><a href="#share-this-post">Share this post</a></li>
<li class="toc-entry toc-h3"><a href="#search-posts">Search Posts</a></li>
</ul>
</li>
</ul>
</div>
<!-- Post content -->
<div class="prose prose-lg max-w-none">
<div class="container mx-auto px-4 py-8">
<div class="flex flex-col lg:flex-row gap-8">
<!-- Main Content -->
<article class="prose prose-lg flex-1 min-w-0 max-w-none">
<header class="mb-8">
<h1 class="text-4xl font-bold mb-4">Jekyll Plugin Showcase - Template Examples</h1>
<div class="text-base-content/60">
<time datetime="2024-01-20T10:00:00+00:00">January 20, 2024</time>
• Sour Theme
</div>
</header>
<div class="post-content">
<p>This post demonstrates all the Jekyll plugins included in the Sour theme. Use this as a reference guide and template for your own posts.</p>
<h2 id="table-of-contents-plugin">Table of Contents Plugin</h2>
<p>The table of contents is automatically generated from your headings when you add <code class="language-plaintext highlighter-rouge">toc: true</code> to your frontmatter.</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">layout</span><span class="pi">:</span> <span class="s">post</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Your</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">toc</span><span class="pi">:</span> <span class="kc">true</span>
<span class="nn">---</span>
</code></pre></div></div>
<h2 id="reading-time-plugin">Reading Time Plugin</h2>
<p>Reading time: 5 minutes</p>
<p>This is automatically calculated and can be displayed anywhere in your post using:</p>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>5 minutes
</code></pre></div></div>
<h2 id="youtube-plugin">YouTube Plugin</h2>
<p>Embed YouTube videos easily:</p>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'> <iframe title="YouTube video player" width="640" height="390" src="//www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe></div>
</code></pre></div></div>
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class="embed-container"> <iframe title="YouTube video player" width="640" height="390" src="//www.youtube.com/embed/" frameborder="0" allowfullscreen=""></iframe></div>
<h3 id="youtube-with-custom-parameters">YouTube with Custom Parameters</h3>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'> <iframe title="YouTube video player" width="640" height="390" src="//www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe></div>
</code></pre></div></div>
<h2 id="github-gist-plugin">GitHub Gist Plugin</h2>
<p>Embed GitHub gists directly:</p>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><noscript><pre>class HelloWorld
def initialize(name)
@name = name.capitalize
end
def sayHi
puts &quot;Hello #{@name}!&quot;
end
end
hello = HelloWorld.new(&quot;World&quot;)
hello.sayHi</pre></noscript><script src="https://gist.github.com/octocat/6cad326836d38bd3a7ae.js"> </script>
</code></pre></div></div>
<noscript><pre>class HelloWorld
def initialize(name)
@name = name.capitalize
end
def sayHi
puts "Hello #{@name}!"
end
end
hello = HelloWorld.new("World")
hello.sayHi</pre></noscript>
<script src="https://gist.github.com/octocat/6cad326836d38bd3a7ae.js"> </script>
<h3 id="gist-with-specific-file">Gist with Specific File</h3>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><noscript><pre>404: Not Found</pre></noscript><script src="https://gist.github.com/octocat/6cad326836d38bd3a7ae.js?file=hello.rb"> </script>
</code></pre></div></div>
<h2 id="seo-plugin-features">SEO Plugin Features</h2>
<h3 id="automatic-meta-tags">Automatic Meta Tags</h3>
<p>The <code class="language-plaintext highlighter-rouge">jekyll-seo-tag</code> plugin automatically generates:</p>
<ul>
<li>Title tags</li>
<li>Meta descriptions</li>
<li>Open Graph tags</li>
<li>Twitter Card tags</li>
<li>Canonical URLs</li>
<li>JSON-LD structured data</li>
</ul>
<h3 id="custom-seo-in-frontmatter">Custom SEO in Frontmatter</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Your</span><span class="nv"> </span><span class="s">Post</span><span class="nv"> </span><span class="s">Title"</span>
<span class="na">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Custom</span><span class="nv"> </span><span class="s">meta</span><span class="nv"> </span><span class="s">description</span><span class="nv"> </span><span class="s">for</span><span class="nv"> </span><span class="s">SEO"</span>
<span class="na">image</span><span class="pi">:</span> <span class="s2">"</span><span class="s">/assets/images/featured.jpg"</span>
<span class="nn">---</span>
</code></pre></div></div>
<h2 id="archives-plugin">Archives Plugin</h2>
<p>The theme automatically creates archive pages for:</p>
<ul>
<li><strong>Categories</strong>: <code class="language-plaintext highlighter-rouge">/category/tutorial/</code></li>
<li><strong>Tags</strong>: <code class="language-plaintext highlighter-rouge">/tag/jekyll/</code></li>
</ul>
<h3 id="using-categories-and-tags">Using Categories and Tags</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">category</span><span class="pi">:</span> <span class="s">tutorial</span>
<span class="na">tags</span><span class="pi">:</span> <span class="pi">[</span><span class="nv">Jekyll</span><span class="pi">,</span> <span class="nv">Web Development</span><span class="pi">,</span> <span class="nv">Tutorial</span><span class="pi">]</span>
<span class="nn">---</span>
</code></pre></div></div>
<h2 id="pagination-plugin">Pagination Plugin</h2>
<p>The advanced pagination plugin creates paginated post lists:</p>
<ul>
<li>Homepage shows latest 6 posts</li>
<li>Archive page shows all posts</li>
<li>Pagination links automatically generated</li>
</ul>
<p>Configuration in <code class="language-plaintext highlighter-rouge">_config.yml</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">pagination</span><span class="pi">:</span>
<span class="na">enabled</span><span class="pi">:</span> <span class="kc">true</span>
<span class="na">per_page</span><span class="pi">:</span> <span class="m">6</span>
<span class="na">permalink</span><span class="pi">:</span> <span class="s1">'</span><span class="s">/page/:num/'</span>
</code></pre></div></div>
<h2 id="redirect-plugin">Redirect Plugin</h2>
<p>Create redirects from old URLs:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">New</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">redirect_from</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">/old-url/</span>
<span class="pi">-</span> <span class="s">/another-old-url/</span>
<span class="nn">---</span>
</code></pre></div></div>
<h2 id="target-blank-plugin">Target Blank Plugin</h2>
<p>External links automatically open in new tabs with proper security attributes.</p>
<p><a href="https://github.com">External link example</a></p>
<h2 id="last-modified-plugin">Last Modified Plugin</h2>
<p>Show when content was last updated:</p>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Last modified: August 24, 2025
</code></pre></div></div>
<p>Last modified: August 24, 2025</p>
<h2 id="feed-plugin">Feed Plugin</h2>
<p>Automatic RSS feed generation at <code class="language-plaintext highlighter-rouge">/feed.xml</code></p>
<p>Subscribe to the feed: <a href="/jekyll-theme-sour/feed.xml">RSS Feed</a></p>
<h2 id="sitemap-plugin">Sitemap Plugin</h2>
<p>Automatic sitemap generation at <code class="language-plaintext highlighter-rouge">/sitemap.xml</code> for SEO.</p>
<h2 id="syntax-highlighting">Syntax Highlighting</h2>
<p>Using Rouge for syntax highlighting:</p>
<h3 id="javascript-example">JavaScript Example</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nf">greetUser</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="s2">`Hello, </span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">!`</span><span class="p">);</span>
<span class="k">return</span> <span class="s2">`Welcome to Sour Theme, </span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">`</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Developer</span><span class="dl">"</span><span class="p">;</span>
<span class="nf">greetUser</span><span class="p">(</span><span class="nx">user</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="css-example">CSS Example</h3>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.sour-theme</span> <span class="p">{</span>
<span class="err">@apply</span> <span class="err">bg-gradient-to-r</span> <span class="err">from-primary</span> <span class="err">to-secondary;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span>
<span class="nl">transition</span><span class="p">:</span> <span class="nb">all</span> <span class="m">0.3s</span> <span class="nb">ease</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.sour-theme</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="nl">transform</span><span class="p">:</span> <span class="nf">translateY</span><span class="p">(</span><span class="m">-2px</span><span class="p">);</span>
<span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">4px</span> <span class="m">12px</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0.15</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="ruby-example">Ruby Example</h3>
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="nc">SourTheme</span>
<span class="nb">attr_reader</span> <span class="ss">:name</span><span class="p">,</span> <span class="ss">:version</span>
<span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span><span class="nb">name</span><span class="p">,</span> <span class="n">version</span><span class="p">)</span>
<span class="vi">@name</span> <span class="o">=</span> <span class="nb">name</span>
<span class="vi">@version</span> <span class="o">=</span> <span class="n">version</span>
<span class="k">end</span>
<span class="k">def</span> <span class="nf">description</span>
<span class="s2">"</span><span class="si">#{</span><span class="vi">@name</span><span class="si">}</span><span class="s2"> v</span><span class="si">#{</span><span class="vi">@version</span><span class="si">}</span><span class="s2"> - A Jekyll theme with TailwindCSS"</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="n">theme</span> <span class="o">=</span> <span class="no">SourTheme</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="s2">"Sour"</span><span class="p">,</span> <span class="s2">"1.0.0"</span><span class="p">)</span>
<span class="nb">puts</span> <span class="n">theme</span><span class="p">.</span><span class="nf">description</span>
</code></pre></div></div>
<h2 id="advanced-markdown-features">Advanced Markdown Features</h2>
<h3 id="tables">Tables</h3>
<table>
<thead>
<tr>
<th>Plugin</th>
<th>Purpose</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td>jekyll-seo-tag</td>
<td>SEO optimization</td>
<td>Automatic</td>
</tr>
<tr>
<td>jekyll-sitemap</td>
<td>XML sitemap</td>
<td>Automatic</td>
</tr>
<tr>
<td>jekyll-feed</td>
<td>RSS feed</td>
<td>Automatic</td>
</tr>
<tr>
<td>jekyll-toc</td>
<td>Table of contents</td>
<td><code class="language-plaintext highlighter-rouge">toc: true</code></td>
</tr>
</tbody>
</table>
<h3 id="task-lists">Task Lists</h3>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Create comprehensive README</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Add plugin examples</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Document customization options</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Add more themes</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Create video tutorials</li>
</ul>
<h3 id="footnotes">Footnotes</h3>
<p>Here’s a statement that needs a citation<sup id="fnref:1"><a href="#fn:1" class="footnote" rel="footnote" role="doc-noteref">1</a></sup>.</p>
<h3 id="blockquotes">Blockquotes</h3>
<blockquote>
<p>“The best way to learn Jekyll is to build something with it. The Sour theme provides a perfect starting point with all the tools you need.”</p>
<p>— Sour Theme Documentation</p>
</blockquote>
<h3 id="code-blocks-with-line-numbers">Code Blocks with Line Numbers</h3>
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># app.rb</span>
<span class="nb">require</span> <span class="s1">'jekyll'</span>
<span class="k">class</span> <span class="nc">MyJekyllSite</span>
<span class="k">def</span> <span class="nf">initialize</span>
<span class="vi">@config</span> <span class="o">=</span> <span class="no">Jekyll</span><span class="p">.</span><span class="nf">configuration</span><span class="p">({</span>
<span class="s1">'source'</span> <span class="o">=></span> <span class="s1">'.'</span><span class="p">,</span>
<span class="s1">'destination'</span> <span class="o">=></span> <span class="s1">'./_site'</span>
<span class="p">})</span>
<span class="k">end</span>
<span class="k">def</span> <span class="nf">build</span>
<span class="n">site</span> <span class="o">=</span> <span class="no">Jekyll</span><span class="o">::</span><span class="no">Site</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="vi">@config</span><span class="p">)</span>
<span class="n">site</span><span class="p">.</span><span class="nf">process</span>
<span class="k">end</span>
<span class="k">end</span>
</code></pre></div></div>
<h2 id="image-examples">Image Examples</h2>
<h3 id="responsive-images">Responsive Images</h3>
<p><img src="/assets/images/screenshot.jpg" alt="Sour Theme Screenshot" title="Sour Theme Screenshot" /></p>
<h3 id="image-with-caption">Image with Caption</h3>
<figure>
<img src="https://via.placeholder.com/600x300/1a1a2e/eee?text=Sample+Image" alt="Sample image" />
<figcaption>This is a sample image with a caption demonstrating responsive design.</figcaption>
</figure>
<h2 id="custom-liquid-tags">Custom Liquid Tags</h2>
<h3 id="highlighting-important-information">Highlighting Important Information</h3>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">hello_world</span>
<span class="nb">puts</span> <span class="s2">"Hello, World!"</span>
<span class="k">end</span></code></pre></figure>
</code></pre></div></div>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">hello_world</span>
<span class="nb">puts</span> <span class="s2">"Hello, World!"</span>
<span class="k">end</span></code></pre></figure>
<h2 id="performance-tips">Performance Tips</h2>
<h3 id="lazy-loading">Lazy Loading</h3>
<p>Images can be lazy-loaded for better performance:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><img</span> <span class="na">src=</span><span class="s">"image.jpg"</span> <span class="na">loading=</span><span class="s">"lazy"</span> <span class="na">alt=</span><span class="s">"Description"</span><span class="nt">></span>
</code></pre></div></div>
<h3 id="optimized-assets">Optimized Assets</h3>
<p>The theme automatically:</p>
<ul>
<li>Minifies CSS in production</li>
<li>Optimizes images</li>
<li>Compresses HTML</li>
<li>Generates efficient navigation</li>
</ul>
<h2 id="customization-examples">Customization Examples</h2>
<h3 id="custom-variables">Custom Variables</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># _config.yml</span>
<span class="na">custom_variables</span><span class="pi">:</span>
<span class="na">brand_color</span><span class="pi">:</span> <span class="s2">"</span><span class="s">#00ff88"</span>
<span class="na">font_family</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Inter"</span>
<span class="na">enable_dark_mode</span><span class="pi">:</span> <span class="kc">true</span>
</code></pre></div></div>
<h3 id="custom-includes">Custom Includes</h3>
<p>Create reusable components in <code class="language-plaintext highlighter-rouge">_includes/</code>:</p>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><!-- _includes/alert.html -->
<div class="alert alert-info">
</div>
</code></pre></div></div>
<p>Usage:</p>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><!-- Alert Component - Customizable notification/warning box -->
<!-- Usage: include alert.html type="warning" message="Your message here" -->
<!-- Types: info, success, warning, error -->
<div class="alert alert-warning my-4">
<svg class="w-6 h-6 stroke-current shrink-0" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
</svg>
<span>This is a warning!</span>
</div>
</code></pre></div></div>
<!-- Alert Component - Customizable notification/warning box -->
<!-- Usage: include alert.html type="warning" message="Your message here" -->
<!-- Types: info, success, warning, error -->
<div class="alert alert-warning my-4">
<svg class="w-6 h-6 stroke-current shrink-0" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
<span>This is a warning!</span>
</div>
<h2 id="testing-your-setup">Testing Your Setup</h2>
<h3 id="development-checklist">Development Checklist</h3>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />All plugins loading correctly</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />CSS compiling without errors</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Search functionality working</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Navigation responsive on mobile</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />SEO tags generating properly</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Social media previews displaying</li>
</ul>
<h3 id="build-verification">Build Verification</h3>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># Test build</span>
make build
<span class="c"># Check for errors</span>
bundle <span class="nb">exec </span>jekyll doctor
<span class="c"># Validate HTML (optional)</span>
bundle <span class="nb">exec </span>htmlproofer ./_site
</code></pre></div></div>
<h2 id="next-steps">Next Steps</h2>
<p>Now that you’ve seen all the plugin examples, try:</p>
<ol>
<li><strong>Create your first post</strong> using these templates</li>
<li><strong>Customize the theme</strong> colors and layout</li>
<li><strong>Add your own content</strong> and pages</li>
<li><strong>Deploy to GitHub Pages</strong> or Netlify</li>
<li><strong>Share your blog</strong> with the world!</li>
</ol>
<h2 id="resources">Resources</h2>
<ul>
<li><a href="https://jekyllrb.com/docs/">Jekyll Documentation</a></li>
<li><a href="https://tailwindcss.com/docs">TailwindCSS Documentation</a></li>
<li><a href="https://daisyui.com/components/">DaisyUI Components</a></li>
<li><a href="https://github.com/your-username/jekyll-theme-sour">Sour Theme Repository</a></li>
</ul>
<hr />
<p><em>This post serves as both documentation and a template. Feel free to copy and modify these examples for your own content!</em></p>
<div class="footnotes" role="doc-endnotes">
<ol>
<li id="fn:1">
<p>This is the footnote explaining the citation. <a href="#fnref:1" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
</ol>
</div>
</div>
<footer class="mt-12 pt-8 border-t border-base-300">
<div class="flex justify-between">
<a href="/jekyll-theme-sour/jekyll/update/2024/01/01/welcome-to-jekyll.html" class="btn btn-outline">← Welcome to Jekyll!</a>
<a href="/jekyll-theme-sour/tutorial/2024/01/22/customization-guide.html" class="btn btn-outline">Complete Customization Guide for Sour Theme →</a>
</div>
</footer>
<!-- Comments Section -->
<div class="mt-12 pt-8">
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h3 class="card-title text-2xl mb-6 flex items-center gap-3">
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
</svg>
Comments
</h3>
<div class="prose max-w-none">
<p class="text-base-content/70 mb-6">
Comments are powered by
<a href="https://utteranc.es" class="link link-primary" target="_blank" rel="noopener">Utterances</a>.
You'll need a GitHub account to comment.
</p>
</div>
<!-- Utterances Comments -->
<div id="comments-container" class="min-h-[200px]">
<script src="https://utteranc.es/client.js"
repo="jeremycardona/jekyll-theme-sour"
issue-term="pathname"
theme="preferred-color-scheme"
crossorigin="anonymous"
async>
</script>
</div>
<!-- Loading State -->
<div id="comments-loading" class="flex items-center justify-center py-12">
<div class="loading loading-spinner loading-lg text-primary"></div>
<span class="ml-3 text-base-content/60">Loading comments...</span>
</div>
</div>
</div>
</div>
<!-- Comments Theme Sync Script -->
<script>
(function() {
// Hide loading state when utterances iframe loads
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList') {
const iframe = document.querySelector('#comments-container iframe');
if (iframe) {
// Hide loading state
const loading = document.getElementById('comments-loading');
if (loading) {
loading.style.display = 'none';
}
observer.disconnect();
}
}
});
});
const commentsContainer = document.getElementById('comments-container');
if (commentsContainer) {
observer.observe(commentsContainer, { childList: true, subtree: true });
}
// Sync theme changes with utterances
function syncUtterancesTheme() {
const iframe = document.querySelector('#comments-container iframe');
if (iframe) {
const theme = document.documentElement.getAttribute('data-theme');
let utterancesTheme = 'github-light';
if (theme === 'dark') {
utterancesTheme = 'github-dark';
} else if (theme === 'cyberpunk') {
utterancesTheme = 'github-dark-orange';
}
iframe.contentWindow.postMessage(
{ type: 'set-theme', theme: utterancesTheme },
'https://utteranc.es'
);
}
}
// Listen for theme changes
if (typeof window.themeChangeCallbacks === 'undefined') {
window.themeChangeCallbacks = [];
}
window.themeChangeCallbacks.push(syncUtterancesTheme);
})();
</script>
</article>
<!-- Sidebar -->
<aside class="lg:w-80 order-first lg:order-last">
<div class="sticky top-8 max-h-screen overflow-y-auto space-y-6 pb-8">
<!-- Reading Stats -->
<div class="card bg-base-200 shadow-lg">
<div class="card-body p-6">
<h3 class="card-title text-lg mb-4">Reading Info</h3>
<div class="space-y-3">
<div class="flex items-center gap-3">
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<span>3 minutes</span>
</div>
<div class="flex items-center gap-3">
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<span>1591 words</span>
</div>
</div>
</div>
</div>
<!-- Table of Contents -->
<div class="card bg-base-200 shadow-lg">
<div class="card-body p-6">
<h3 class="card-title text-lg mb-4">Table of Contents</h3>
<div class="toc-content text-sm">
<ul id="toc" class="section-nav">
<li class="toc-entry toc-h2"><a href="#table-of-contents-plugin">Table of Contents Plugin</a></li>
<li class="toc-entry toc-h2"><a href="#reading-time-plugin">Reading Time Plugin</a></li>
<li class="toc-entry toc-h2"><a href="#youtube-plugin">YouTube Plugin</a>
<ul>
<li class="toc-entry toc-h3"><a href="#youtube-with-custom-parameters">YouTube with Custom Parameters</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#github-gist-plugin">GitHub Gist Plugin</a>
<ul>
<li class="toc-entry toc-h3"><a href="#gist-with-specific-file">Gist with Specific File</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#seo-plugin-features">SEO Plugin Features</a>
<ul>
<li class="toc-entry toc-h3"><a href="#automatic-meta-tags">Automatic Meta Tags</a></li>
<li class="toc-entry toc-h3"><a href="#custom-seo-in-frontmatter">Custom SEO in Frontmatter</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#archives-plugin">Archives Plugin</a>
<ul>
<li class="toc-entry toc-h3"><a href="#using-categories-and-tags">Using Categories and Tags</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#pagination-plugin">Pagination Plugin</a></li>
<li class="toc-entry toc-h2"><a href="#redirect-plugin">Redirect Plugin</a></li>
<li class="toc-entry toc-h2"><a href="#target-blank-plugin">Target Blank Plugin</a></li>
<li class="toc-entry toc-h2"><a href="#last-modified-plugin">Last Modified Plugin</a></li>
<li class="toc-entry toc-h2"><a href="#feed-plugin">Feed Plugin</a></li>
<li class="toc-entry toc-h2"><a href="#sitemap-plugin">Sitemap Plugin</a></li>
<li class="toc-entry toc-h2"><a href="#syntax-highlighting">Syntax Highlighting</a>
<ul>
<li class="toc-entry toc-h3"><a href="#javascript-example">JavaScript Example</a></li>
<li class="toc-entry toc-h3"><a href="#css-example">CSS Example</a></li>
<li class="toc-entry toc-h3"><a href="#ruby-example">Ruby Example</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#advanced-markdown-features">Advanced Markdown Features</a>
<ul>
<li class="toc-entry toc-h3"><a href="#tables">Tables</a></li>
<li class="toc-entry toc-h3"><a href="#task-lists">Task Lists</a></li>
<li class="toc-entry toc-h3"><a href="#footnotes">Footnotes</a></li>
<li class="toc-entry toc-h3"><a href="#blockquotes">Blockquotes</a></li>
<li class="toc-entry toc-h3"><a href="#code-blocks-with-line-numbers">Code Blocks with Line Numbers</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#image-examples">Image Examples</a>
<ul>
<li class="toc-entry toc-h3"><a href="#responsive-images">Responsive Images</a></li>
<li class="toc-entry toc-h3"><a href="#image-with-caption">Image with Caption</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#custom-liquid-tags">Custom Liquid Tags</a>
<ul>
<li class="toc-entry toc-h3"><a href="#highlighting-important-information">Highlighting Important Information</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#performance-tips">Performance Tips</a>
<ul>
<li class="toc-entry toc-h3"><a href="#lazy-loading">Lazy Loading</a></li>
<li class="toc-entry toc-h3"><a href="#optimized-assets">Optimized Assets</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#customization-examples">Customization Examples</a>
<ul>
<li class="toc-entry toc-h3"><a href="#custom-variables">Custom Variables</a></li>
<li class="toc-entry toc-h3"><a href="#custom-includes">Custom Includes</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#testing-your-setup">Testing Your Setup</a>
<ul>
<li class="toc-entry toc-h3"><a href="#development-checklist">Development Checklist</a></li>
<li class="toc-entry toc-h3"><a href="#build-verification">Build Verification</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#next-steps">Next Steps</a></li>
<li class="toc-entry toc-h2"><a href="#resources">Resources</a></li>
</ul>
</div>
</div>
</div>
<!-- Categories -->
<div class="card bg-base-200 shadow-lg">
<div class="card-body p-6">
<h3 class="card-title text-lg mb-4">Categories</h3>
<div class="flex flex-wrap gap-2">
<a href="/category/tutorial/" class="badge badge-secondary badge-outline hover:badge-secondary transition-colors">
tutorial
</a>
<a href="/category/tutorial/" class="badge badge-secondary badge-outline hover:badge-secondary transition-colors">
tutorial
</a>
</div>
</div>
</div>
<!-- Tags -->
<div class="card bg-base-200 shadow-lg">
<div class="card-body p-6">
<h3 class="card-title text-lg mb-4">Tags</h3>
<div class="flex flex-wrap gap-2">
<a href="/tag/jekyll/" class="badge badge-primary badge-outline hover:badge-primary transition-colors">
Jekyll
</a>
<a href="/tag/plugins/" class="badge badge-primary badge-outline hover:badge-primary transition-colors">
Plugins
</a>
<a href="/tag/tutorial/" class="badge badge-primary badge-outline hover:badge-primary transition-colors">
Tutorial
</a>
<a href="/tag/examples/" class="badge badge-primary badge-outline hover:badge-primary transition-colors">
Examples
</a>
</div>
</div>
</div>
</div>
</aside>
</div>
</div>
</div>
<!-- Post footer -->
<footer class="mt-12 pt-8 border-t border-base-300">
<!-- Share buttons -->
<div class="mb-8">
<h3 class="text-lg font-semibold mb-4">Share this post</h3>
<div class="flex gap-4">
<a href="https://twitter.com/intent/tweet?text=Complete+Customization+Guide+for+Sour+Theme&url=https://jeremycardona.github.io/jekyll-theme-sour/tutorial/2024/01/22/customization-guide.html"
class="btn btn-primary btn-sm" target="_blank">
Twitter
</a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url=https://jeremycardona.github.io/jekyll-theme-sour/tutorial/2024/01/22/customization-guide.html"
class="btn btn-secondary btn-sm" target="_blank">
LinkedIn
</a>
</div>
</div>
<!-- Navigation -->
<div class="flex justify-between items-center">
<a href="/jekyll-theme-sour/tutorial/2024/01/20/jekyll-plugin-showcase.html" class="btn btn-outline">
← Jekyll Plugin Showcase - Te...
</a>
<a href="/jekyll-theme-sour/tutorial/2024/01/25/deploy-to-github-pages.html" class="btn btn-outline">
Deploy Sour Theme to GitHub... →
</a>
</div>
</footer>
</article>
Advanced Customizations
Adding Dark Mode Toggle
Create a theme switcher component:
<!-- Add to _includes/theme-toggle.html -->
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn btn-ghost btn-circle">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>
</label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a onclick="setTheme('light')">Light</a></li>
<li><a onclick="setTheme('dark')">Dark</a></li>
<li><a onclick="setTheme('cyberpunk')">Cyberpunk</a></li>
</ul>
</div>
<script>
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}
// Load saved theme
const savedTheme = localStorage.getItem('theme') || 'cyberpunk';
setTheme(savedTheme);
</script>
Custom Search Enhancement
Enhance the search functionality in _includes/search.html:
<div class="modal" id="search-modal">
<div class="modal-box max-w-2xl">
<h3 class="font-bold text-lg mb-4">Search Posts</h3>
<input type="text" id="search-input" placeholder="Search..." class="input input-bordered w-full mb-4">
<div id="search-results" class="max-h-96 overflow-y-auto">
<!-- Results will be populated here -->
</div>
<div class="modal-action">
<label for="search-modal" class="btn">Close</label>
</div>
</div>
</div>
<script>
// Enhanced search with fuzzy matching
let searchData = [];
fetch('/search.json')
.then(response => response.json())
.then(data => searchData = data);
document.getElementById('search-input').addEventListener('input', function(e) {
const query = e.target.value.toLowerCase();
const results = searchData.filter(post =>
post.title.toLowerCase().includes(query) ||
post.content.toLowerCase().includes(query) ||
post.tags.some(tag => tag.toLowerCase().includes(query))
);
displayResults(results);
});
function displayResults(results) {
const container = document.getElementById('search-results');
if (results.length === 0) {
container.innerHTML = '<p class="text-center text-base-content/60">No results found.</p>';
return;
}
container.innerHTML = results.map(post => `
<div class="card bg-base-200 mb-4">
<div class="card-body p-4">
<h4 class="card-title text-lg">
<a href="${post.url}" class="hover:text-primary">${post.title}</a>
</h4>
<p class="text-sm text-base-content/70">${post.excerpt}</p>
<div class="text-xs text-base-content/60">${post.date}</div>
</div>
</div>
`).join('');
}
</script>
Performance Optimizations
Image Optimization
Add responsive images with lazy loading:
<!-- Responsive image component -->
<picture>
<source media="(max-width: 640px)" srcset="image-small.jpg">
<source media="(max-width: 1024px)" srcset="image-medium.jpg">
<img src="image-large.jpg" alt="Description" loading="lazy" class="w-full h-auto rounded-lg">
</picture>
CSS Optimization
Configure TailwindCSS for optimal performance in tailwind.config.js:
module.exports = {
content: [
"_includes/**/*.html",
"_layouts/**/*.html",
"_posts/**/*.md",
"*.html",
"*.md"
],
theme: {
extend: {
// Your custom theme extensions
}
},
plugins: [require("daisyui")],
daisyui: {
themes: ["light", "dark", "cyberpunk"],
// Reduce CSS size by only including used themes
logs: false,
}
}
Testing Your Customizations
Development Workflow
- Make changes to your files
-
Test locally with
make serve - Check responsiveness on different screen sizes
-
Validate HTML with
bundle exec jekyll doctor - Test performance with browser dev tools
Browser Testing
Test your customizations across different browsers:
- Chrome/Chromium
- Firefox
- Safari
- Mobile browsers
Deployment Considerations
Production Build
Before deploying, ensure your build is optimized:
# Build for production
npm run build
# Test the built site
cd _site && python -m http.server 8000
Environment Variables
Set environment-specific variables in _config.yml:
# Development settings
development:
url: "http://localhost:4000"
# Production settings
production:
url: "https://yourdomain.com"
compress_html:
clippings: all
comments: all
endings: all
Troubleshooting Common Issues
CSS Not Loading
- Check
assets/css/main.cssexists - Verify TailwindCSS compilation:
npm run build:css - Clear Jekyll cache:
make clean
Plugin Errors
- Update gems:
bundle update - Check plugin compatibility in
Gemfile - Review
_config.ymlplugin configuration
Build Failures
- Check syntax in modified files
- Verify YAML frontmatter formatting
- Test with
bundle exec jekyll doctor
Next Steps
Now that you’ve customized your theme:
- Create quality content regularly
- Optimize for SEO with good meta descriptions
- Engage with your audience through comments/social media
- Monitor performance with analytics
- Keep the theme updated with new features
Remember to backup your customizations and consider contributing improvements back to the theme repository!
Have questions about customization? Check the GitHub repository or open an issue for help.