Tokyo Theme Layout Structure and Customization

The Tokyo Jekyll Theme features a unique split-layout design with a fixed left sidebar and scrollable right content area. This guide explains the layout structure and how to customize it.

Layout Overview

The Tokyo theme uses a two-column layout:

• Left Sidebar tk-left-part.html Fixed navigation and branding
• Right Content Area: Scrollable sections (Home, About, Portfolio, News, Contact)

Layout Components

┌─────────────────────────────────────────┐
│  LEFT SIDEBAR (Fixed)                    │
│  ┌─────────────────────────────────┐    │
│  │ Logo                            │    │
│  │ Navigation Menu                 │    │
│  │ Copyright                       │    │
│  └─────────────────────────────────┘    │
├─────────────────────────────────────────┤
│  RIGHT CONTENT (Scrollable)             │
│  ┌─────────────────────────────────┐    │
│  │ Home Section                    │    │
│  ├─────────────────────────────────┤    │
│  │ About Section                   │    │
│  ├─────────────────────────────────┤    │
│  │ Portfolio Section              │    │
│  ├─────────────────────────────────┤    │
│  │ News/Blog Section               │    │
│  ├─────────────────────────────────┤    │
│  │ Contact Section                 │    │
│  └─────────────────────────────────┘    │
└─────────────────────────────────────────┘

Left Sidebar Customization

The left sidebar is defined in _includes/tk-left-part.html

Logo Configuration

Update the logo images:

<div class="logo">
    <a href="/">
        <img class="logo-dark" src="/assets/img/logo/dark.png" alt="Themeix Documentation Website" />
        <img class="logo-light" src="/assets/img/logo/logo.png" alt="Themeix Documentation Website" />
    </a>
</div>

To customize:

1. Replace logo images in assets/img/logo/
2. Update alt text for accessibility
3. Modify the link destination if needed

Navigation Menu

The navigation is dynamically generated from _data/navigation.yml

To customize:

• Edit navigation items in _data/navigation.yml
• The first item automatically gets the active class
• Links use anchor tags for smooth scrolling

Copyright Section

Update the copyright information:

<div class="copyright">
   <p>
      &copy; 2026 Themeix Documentation Website<br>
      Created by <a href="https://themeix.com" target="_blank" rel="nofollow">Themeix</a>
   </p>
</div>

To customize:

• The year is automatically generated
• Change “Created by” link to your own
• Modify the copyright text as needed

Right Content Sections

Each section is a separate include file in _includes/right-parts/

Home Section

File: _includes/right-parts/tk-home.html

The home section displays your profile information:

<div id="home" class="tokyo_tm_section active">
    <div class="container">
        <div class="tokyo_tm_home">
            <div class="home_content">
                <div class="avatar">
                    <div class="image" data-img-url=""></div>
                </div>
                <div class="details">
                    <h3 class="name"></h3>
                    <p class="job"></p>
                    <div class="social">
                        <!-- Social media links -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Customization options:

• Profile image from _data/site_data.yml
• Profile name with HTML support for styling
• Bio/description text
• Social media links (Facebook, Twitter, Instagram, Dribbble, TikTok)

About Section

File: _includes/right-parts/tk-about.html

The about section includes personal information and skills:

Main About Display:

• Profile image
• Title and description
• Personal details (birthday, age, address, email, phone, study, freelance status)
• “Learn More” button

Modal Box (Click “Learn More”):

• Photography skills with progress bars
• Language skills with progress bars
• Fun facts counter (projects completed, happy clients, lines of code)
• Partners/clients carousel

To customize the about section:

1. Update data in _data/site_data.yml under the about key
2. Modify skill percentages
3. Add or remove partners
4. Change personal information fields

Portfolio Section

File: _includes/right-parts/tk-portfolio.html

The portfolio section displays your work with filtering:

Features:

• Filter categories (All, Vimeo, YouTube, SoundCloud, Image)
• Portfolio grid layout
• Popup functionality for different media types
• Responsive design

To customize:

1. Update portfolio items in _data/portfolio.yml
2. Modify filter categories in the HTML
3. Change portfolio title in _data/site_data.yml

News Section

File: _includes/right-parts/tk-news.html

The news section displays blog posts from the _posts/ folder.

To customize:

• Add posts to _posts/ folder
• Posts are automatically displayed
• Customize post card layout in _includes/post-card.html

Contact Section

File: _includes/right-parts/tk-contact.html

The contact section provides a way for visitors to reach you.

To customize:

• Update contact form fields
• Configure email settings
• Add social media links
• Modify contact information

Page Layouts

The theme includes several layout files in _layouts/:

Default Layout

File: _layouts/default.html

The base layout that wraps all pages with the left sidebar and right content structure.

Post Layout

File: _layouts/post.html

Used for individual blog posts with:

• Post title and metadata
• Post content
• Author information
• Related posts (optional)
• Comments section (optional)

Author Layout

File: _layouts/author.html

Displays author profile pages with:

• Author bio and image
• Author’s posts list
• Social media links

Category and Tag Layouts

Files: _layouts/category.html, _layouts/tag.html

Display posts grouped by category or tag.

Customizing Section Order

To change the order of sections on your page:

1. Open index.html
2. Locate the section includes
3. Reorder them as desired

Example:

<!-- Current order -->
{% include right-parts/tk-home.html %}
{% include right-parts/tk-about.html %}
{% include right-parts/tk-portfolio.html %}
{% include right-parts/tk-news.html %}
{% include right-parts/tk-contact.html %}

<!-- Reorder as needed -->
{% include right-parts/tk-home.html %}
{% include right-parts/tk-portfolio.html %}
{% include right-parts/tk-about.html %}
{% include right-parts/tk-news.html %}
{% include right-parts/tk-contact.html %}

Adding Custom Sections

To add a new section:

1. Create a new include file in _includes/right-parts/
2. Add your section HTML with the tokyo_tm_section class
3. Include it in index.html
4. Add navigation item to _data/navigation.yml

Example:

<!-- _includes/right-parts/tk-services.html -->
<div id="services" class="tokyo_tm_section">
    <div class="container">
        <div class="tokyo_tm_services">
            <!-- Your services content -->
        </div>
    </div>
</div>

Responsive Behavior

The layout is fully responsive:

• Desktop (> 992px): Two-column layout with fixed sidebar
• Tablet (768px - 992px): Adjusted sidebar width
• Mobile (< 768px): Stacked layout with hamburger menu

Best Practices

1. Keep includes modular: Each section should be self-contained
2. Use data files: Store content in _data/ files for easy editing
3. Maintain consistency: Follow the existing naming conventions
4. Test responsiveness: Check layout on all screen sizes
5. Backup changes: Keep backups before modifying layout files

Troubleshooting

Section not appearing

Solution:

• Verify the include file exists in _includes/right-parts/
• Check that the section is included in index.html
• Ensure navigation item has matching URL

Layout broken on mobile

Solution:

• Check CSS media queries in assets/css/style.css
• Verify responsive classes are applied
• Test on actual mobile devices

Data not displaying

Solution:

• Check YAML syntax in data files
• Verify variable names match between data files and templates
• Ensure data files are in the correct location (_data/)

The Tokyo theme’s modular structure makes it easy to customize while maintaining a clean, organized codebase.