• Submit Ticket
  • My Tickets
Themeix Support Portal
  • Submit Ticket
  • My Tickets

Docs: Tokyo Jekyll Theme

/Jekyll Themes / Tokyo Jekyll Theme /
  • Tokyo – Personal Portfolio Jekyll Theme Introduction
  • How to set the dark version permanently in Tokyo Jekyll Theme?
  • How to change homepage data in Tokyo Jekyll Theme?
  • How to update portfolio content in Tokyo Jekyll theme?
  • How to create navigation in jekyll ( tokyo ) theme?
  • Tokyo Jekyll Theme Changelog
  • Jekyll Theme Deployment

Tokyo – Personal Portfolio Jekyll Theme Introduction

Tokyo – Personal Portfolio Jekyll Theme is for many purposes. It’s a creative, minimal, and clean design. It has all of the features of the business website. It’s suitable for any startup business, companies, agencies, and freelancers who need a professional way to showcase their projects and services with a 100% super responsive experience.

Key features

  • Fully Responsive Design
  • CSS3 Animations
  • SEO optimized
  • Mobile Navigations
  • Developer Friendly Coding
  • Sticky Navigation
  • Very Well Documented
  • Multiple Color Variation Options
  • Site Data Settings to control content

Get the Personal Portfolio Jekyll Theme Now!


Open in New Tab

How to set the dark version permanently in Tokyo Jekyll Theme?

To set the dark version in Tokyo jekyll theme, You just need to add class dark with the body tag.

Example

<body class="dark">

Open the theme file and then go to _layouts/default.html

Now file the following code

<body>

and replace with

<body class="dark">


You will get the dark version activated.

Jekyll Dark Version

Open in New Tab

How to change homepage data in Tokyo Jekyll Theme?

To change the data in the homepage, open Tokyo Jekyll Theme file and then you will find the following code there :

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"

There you can change the profile name, image, bio and others social link. I you want to add custom social links there, feel free to contact us. We will add it for you free.


Open in New Tab

How to update portfolio content in Tokyo Jekyll theme?

In Tokyo Jekyll theme, there has a nice style portfolio section. You can change the content for that section easily form the _data/portfolio.yml file.

Here following the structure of the portfolio data :

- 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 youtube'
  cat: Image

You can update the name, image URL, project URL, filter class and category name there.

We strongly recommend to use the filter_classes value in 1 word. Example : youtube not you tube. Because that filter_classes will automatically attach as the filterable ID in code.


Open in New Tab

How to create navigation in jekyll ( tokyo ) theme?

Creating navigation in jekyll theme is very easy. You can change the navigation menu items easily from the _data/navigation.yml file

Here following the navigation code structure :


- text: Home
  url: home
- text: About
  url: about
- text: Portfolio
  url: portfolio
- text: News
  url: news
- text: Contact
  url: contact

You can use any custom URL there and also text can be change there.


Open in New Tab

Tokyo Jekyll Theme Changelog

Here following the changelog for Tokyo Jekyll Theme

v1.0.2 ( 14 August 21 )
* Dark mode is set by default


v1.0.1 ( 14 July 21 )
* Fix Console Error
* Favion Issue
* Setting Visibility Updated
* Fix W3C Validation
* Updated Intro Page


v1.0.0 ( 13 July 21 )
* Initial Release 




Open in New Tab

Jekyll Theme Deployment

To run our jekyll theme locally, navigate to the theme directory from your PC and run bundle install command in git client app. to install the dependencies, then run bundle exec jekyll serve to start the Jekyll server.

Here following some good resources to deploy jekyll :

  • Manual Deployment
  • Automated Deployment (Example: Travis CI, Circle CI, Buddy etc)
  • 3rd Party Deployment  (Example : Aerobatic, CloudCannon, Github Pages, Kickster, Netlify, Static Publisher)


Open in New Tab

©2016 - 2021 Themeix. All Rights Reserved.
Loading...

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.