Jekyll Themes •
Last updated: January 20, 2026

Tokyo Theme Content Sections Customization

Tokyo Jekyll Theme

Table of Contents

The Tokyo theme’s content is managed through data files in the _data/ directory. This guide explains how to customize each section’s content.

Site Data File

All main content is stored in _data/site_data.yml. This file contains data for all major sections of your site.

File Structure

home:          # Home section data
about:         # About section data
portfolio:     # Portfolio section data
news:          # News section data
contact:       # Contact section data

Home Section Customization

The home section displays your profile information and social links.

Configuration in _data/site_data.yml

home:
  profile_name: ADRIANO <span>SMITH</span>
  profile_img: "/assets/img/slider/1.jpg"
  bio: "Creative Photographer based in New York and happy to travel all over Europe to capture photos."
  social:
    facebook: "http://facebook.com"
    twitter: "http://twitter.com"
    instagram: "http://instagram.com"
    dribbble: "http://dribble.com"
    tiktok: "http://tiktok.com"

Customization Options

Profile Name:

  • Use HTML tags for styling (e.g., <span> for different colors)
  • Supports any valid HTML
  • Keep it concise (2-3 words recommended)

Profile Image:

  • Path relative to site root
  • Recommended size: 500x500px or square
  • Format: JPG, PNG, or WebP
  • Place in assets/img/slider/ or custom folder

Bio/Description:

  • Short professional tagline
  • 1-2 sentences recommended
  • Can include emojis or special characters

Social Links:

  • Add or remove social platforms
  • Use full URLs (including http:// or https://)
  • Supported platforms: Facebook, Twitter, Instagram, Dribbble, TikTok

Example Customization

home:
  profile_name: JOHN <span>DOE</span>
  profile_img: "/assets/img/profile/my-photo.jpg"
  bio: "Full-stack developer passionate about creating beautiful web experiences."
  social:
    facebook: "https://facebook.com/johndoe"
    twitter: "https://twitter.com/johndoe"
    instagram: "https://instagram.com/johndoe"
    dribbble: "https://dribbble.com/johndoe"
    tiktok: "https://tiktok.com/@johndoe"
    linkedin: "https://linkedin.com/in/johndoe"  # Custom addition

About Section Customization

The about section includes personal information, skills, and statistics.

Configuration in _data/site_data.yml

about:
  title: "Adriano Smith & <span>Photographer</span>"
  description: "Hello, I am a creative photographer based in New York and happy to travel all over Europe to capture your big day in candid and authentic photos. I will create a lasting memory of the people."
  img_src: "/assets/img/slider/1.jpg"
  learn_more: Learn More
  lm_url: #
  birthday: "01.07.1990"
  age: 31
  address: Ave 11, New York, USA
  email: mail@gmail.com
  phone: +77 022 177 05 05
  study: Univercity of Texas
  freelance: Available
  photography:
      - title: Wedding Photography
        expertise: 95
      - title: Lifestyle Photography
        expertise: 85
      - title: Family Photography
        expertise: 90
  languages:
      - title: English
        expertise: 95
      - title: Japanese
        expertise: 85
      - title: Arabic
        expertise: 90
  project_completed: 777+
  happy_clients: 3k+
  lines_of_code: 9k+
  our_partners:
    - name: one 
      img_src: "/assets/img/partners/1.png"
      url: #
    # ... more partners

Customization Options

Basic Information:

  • title: About section heading with HTML support
  • description: Detailed about text (2-3 paragraphs)
  • img_src: Profile image path
  • learn_more: Button text
  • lm_url: Button link destination

Personal Details:

  • birthday: Date format: DD.MM.YYYY
  • age: Current age
  • address: Full address
  • email: Contact email
  • phone: Phone number with country code
  • study: Education/degree
  • freelance: Availability status (Available/Busy/etc.)

Skills (Photography/Languages):

  • title: Skill name
  • expertise: Percentage (0-100)
  • Add or remove skills as needed

Statistics:

  • project_completed: Number of completed projects
  • happy_clients: Number of satisfied clients
  • lines_of_code: Any metric relevant to your field

Partners/Clients:

  • name: Partner name
  • img_src: Logo image path
  • url: Partner website link
  • Add unlimited partners

Example Customization

about:
  title: "John Doe & <span>Web Developer</span>"
  description: "I'm a passionate web developer with 5+ years of experience creating modern, responsive websites. I specialize in JavaScript frameworks and love turning complex problems into simple, beautiful solutions."
  img_src: "/assets/img/about/profile.jpg"
  learn_more: View Resume
  lm_url: "/resume"
  birthday: "15.03.1992"
  age: 32
  address: 123 Main St, San Francisco, CA
  email: john@example.com
  phone: +1 555 123 4567
  study: Stanford University
  freelance: Available for Projects
  photography:
      - title: Frontend Development
        expertise: 95
      - title: Backend Development
        expertise: 85
      - title: UI/UX Design
        expertise: 75
  languages:
      - title: JavaScript
        expertise: 95
      - title: Python
        expertise: 80
      - title: PHP
        expertise: 70
  project_completed: 150+
  happy_clients: 50+
  lines_of_code: 100k+
  our_partners:
    - name: Google
      img_src: "/assets/img/partners/google.png"
      url: https://google.com
    - name: Microsoft
      img_src: "/assets/img/partners/microsoft.png"
      url: https://microsoft.com

Portfolio Section Customization

The portfolio section is managed separately in _data/portfolio.yml.

Configuration in _data/portfolio.yml

- name: Joss Butler 
  img_src: /assets/img/portfolio/1.jpg
  project_url: https://vimeo.com/312334044
  filter_classes: 'vimeo'
  cat: Vimeo

- name: Ross Taylor
  img_src: /assets/img/portfolio/2.jpg
  project_url: https://www.youtube.com/watch?v=Amq-qlqbjYA
  filter_classes: 'youtube'
  cat: YouTube

- name: David Smith 
  img_src: /assets/img/portfolio/3.jpg
  project_url: https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/252739311&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true
  filter_classes: 'soundcloud'
  cat: SoundCloud

- name: Kiron Polard 
  img_src: /assets/img/portfolio/4.jpg
  project_url: /assets/img/portfolio/3.jpg
  filter_classes: 'image'
  cat: Image

Customization Options

Portfolio Item Properties:

  • name: Project title
  • img_src: Thumbnail image path
  • project_url: Link to project (video URL, image path, or website)
  • filter_classes: Category for filtering (vimeo, youtube, soundcloud, image)
  • cat: Display category name

Supported Media Types:

  1. Vimeo Videos: 
    filter_classes: 'vimeo'
project_url: https://vimeo.com/VIDEO_ID
  2. YouTube Videos: 
    filter_classes: 'youtube'
project_url: https://www.youtube.com/watch?v=VIDEO_ID
  3. SoundCloud Audio: 
    filter_classes: 'soundcloud'
project_url: https://w.soundcloud.com/player/?url=TRACK_URL
  4. Images: 
    filter_classes: 'image'
project_url: /path/to/full-size-image.jpg

Example Customization

- name: E-Commerce Website
  img_src: /assets/img/portfolio/ecommerce.jpg
  project_url: https://example-project.com
  filter_classes: 'image'
  cat: Web Design

- name: Mobile App Demo
  img_src: /assets/img/portfolio/mobile-app.jpg
  project_url: https://www.youtube.com/watch?v=dQw4w9WgXcQ
  filter_classes: 'youtube'
  cat: App Development

- name: Brand Identity
  img_src: /assets/img/portfolio/branding.jpg
  project_url: /assets/img/portfolio/branding-full.jpg
  filter_classes: 'image'
  cat: Branding

- name: Photography Portfolio
  img_src: /assets/img/portfolio/photo.jpg
  project_url: https://vimeo.com/123456789
  filter_classes: 'vimeo'
  cat: Photography

News Section Customization

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

Configuration in _data/site_data.yml

news:
  title: Latest News

Creating Blog Posts

Create new posts in the _posts/ folder with the following format:

File Naming: YYYY-MM-DD-post-title.md

Example: 2026-01-20-my-first-post.md

Post Front Matter:

---
layout: post
title: "Your Post Title"
date: 2026-01-20 10:00:00 +0600
post_image: /assets/img/news/1.jpg
tags: [tag1, tag2, tag3]
categories: [category-name]
author_id: 1
comments: true
excerpt: "Brief description of your post..."
---

Post Properties

  • layout: Use “post” for blog posts
  • title: Post title
  • date: Publication date and time
  • post_image: Featured image path
  • tags: Array of tags
  • categories: Array of categories
  • author_id: Link to author profile
  • comments: Enable/disable comments
  • excerpt: Short description for post cards

Example Post

---
layout: post
title: "Getting Started with Jekyll"
date: 2026-01-20 10:00:00 +0600
post_image: /assets/img/news/jekyll.jpg
tags: [Jekyll, Tutorial, Web Development]
categories: [Tutorials]
author_id: 1
comments: true
excerpt: "Learn how to set up your first Jekyll site and start creating static websites."
---

# Getting Started with Jekyll

Jekyll is a static site generator that's perfect for blogs and portfolios. In this post, we'll cover...

[Your post content here]

Contact Section Customization

The contact section configuration in _data/site_data.yml:

contact:
  title: Get in Touch

Customization Options

Title: Contact section heading

Additional Contact Information: You can add more fields to the contact section by modifying the include file _includes/right-parts/tk-contact.html.

Contact Form Configuration

The contact form typically uses a service like Formspree or Netlify Forms. To configure:

  1. Formspree: 
    <form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
    <!-- Form fields -->
</form>
  2. Netlify Forms: 
    <form name="contact" method="POST" data-netlify="true">
    <!-- Form fields -->
</form>

Adding Custom Content Sections

To add a new content section:

  1. Add data to _data/site_data.yml: 
    custom_section:
  title: "Custom Section"
  description: "Your custom content"
  # Add more fields as needed
  2. Create include file in _includes/right-parts/: 
       
<div id="custom" class="tokyo_tm_section">
    <div class="container">
        <h3></h3>
        <p></p>
    </div>
</div>
  3. Add to index.html: 
    include right-parts/tk-custom.html
  4. Add navigation item to _data/navigation.yml: ```yaml
    • text: Custom url: custom ```

Best Practices

  1. Use descriptive names for all data fields
  2. Keep images optimized (compress before uploading)
  3. Test all links before publishing
  4. Use consistent formatting in YAML files
  5. Backup your data files before making changes
  6. Validate YAML syntax using online validators
  7. Use relative paths for images and assets
  8. Keep descriptions concise for better readability

Troubleshooting

Content not displaying

Solution:

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

Images not loading

Solution:

  • Verify image paths are correct
  • Check that images exist in the specified folders
  • Ensure proper file permissions

Portfolio filtering not working

Solution:

  • Verify filter_classes values match filter buttons
  • Check JavaScript is loading properly
  • Ensure portfolio items have correct categories

Blog posts not appearing

Solution:

  • Verify post filename format (YYYY-MM-DD-title.md)
  • Check front matter is properly formatted
  • Ensure posts are in the _posts/ folder

The Tokyo theme’s data-driven approach makes it easy to customize content without touching any code. Simply update the YAML files and your changes will be reflected immediately.