Jalpc.

https://jarrekk.github.io/Jalpc/

• 3 steps to setup this theme at your website!
• Features
  • Index page
  • _data/*.yml
  • Chart Skills
  • Categories in blog page
  • Pagination
  • Page views counter
  • Multilingual Page
  • Web analytics
  • Comment
  • Share
  • Search engines
  • Compress CSS and JS files
• Put in a Jalpc Plug
• Upgrading Jalpc
  • Ensure there's an upstream remote
  • Pull in the latest changes
• Thanks to the following
• Contributing
• Todo
• Change Log
• Ad

This is a simple, beautiful and swift theme for Jekyll. It's mobile first, fluidly responsive, and delightfully lightweight.

If you're completely new to Jekyll, I recommend checking out the documentation at http://jekyllrb.com or there's a tutorial by Smashing Magazine.

3 steps to setup this theme at your website!

Here is a document of how to setup this theme with 3 steps.

Features

Index page

The index page is seprated into several sections and they are located in _includes/sections,the configuration is in _data/landing.yml and section's detail configuration is in _data/*.yml.

_data/*.yml

These files are used to dynamically render pages, so you almost don't have to edit html files to change your own theme, besides you can use jekyll serve --watch to reload changes.

The following is mapping between yml files to sections.

• landing.yml ==> index.html
• index/language.yml ==> index.html
• index/careers.yml ==> _includes/sections/career.html
• index/skills.yml ==> _includes/sections/skills.html
• index/projects.yml ==> _includes/sections/projects.html
• index/links.yml ==> _includes/sections/links.html

This yml file is about blog page navbar

• blog.yml ==> _includes/header.html

The following is mapping between yml files to donation

• donation/donationlist.yml ==> blog/donate.html
• donation/alipay.yml ==> blog/donate.html
• donation/wechat_pay.yml ==> blog/donate.yml

Chart Skills

I use Chart.js to show skills, the type of skills' chart is radar, if you want to custom, please read document of Chart.js and edit _includes/sections/skills.html and _data/index/skills.yml.

Categories in blog page

In blog page, we categorize posts into several categories by url, all category pages use same template html file - _includes/category.html.

For example: URL is http://127.0.0.1:4000/python/. In _data/blog.yml, we define this category named Python, so in _includes/category.html we get this URL(/python/) and change it to my category(Python), then this page are posts about Python. The following code is about how to get url and display corresponding posts in _includes/category.html.

<div class="row">
    <div class="col-lg-12 text-center">
        <div class="navy-line"></div>
        {% assign category = page.url | remove:'/' | capitalize %}
        {% if category == 'Html' %}
        {% assign category = category | upcase %}
        {% endif %}
        <h1>{{ category }}</h1>
    </div>
</div>
<div class="wrapper wrapper-content  animated fadeInRight blog">
    <div class="row">
        <ul id="pag-itemContainer" style="list-style:none;">
            {% assign counter = 0 %}
            {% for post in site.categories[category] %}
            {% assign counter = counter | plus: 1 %}
            <li>

Pagination

The pagination in jekyll is not very perfect,so I use front-end web method,there is a blog about the method and you can refer to jPages.

Page views counter

Many third party page counter platforms are too slow,so I count my website page view myself,the javascript file is static/js/count.min.js (static/js/count.js),the backend API is written with flask on Vultr VPS, detail code please see jalpc-flask.

Multilingual Page

The landing page has multilingual support with the i18next plugin.

Languages are configured in the _data/index/language.yml file.

If you don't need this feature, please clear content in file _data/language.yml and folder static/locales/.

Step 1

Add a new language entry

languages:
  - locale: 'en'
    flag: 'static/img/flags/United-States.png'
  - locale: '<language_locale>'
    flag: '<language_flag_url>'

Step 2

Add a new json (static/locales/<language_locale>.json) file that contains the translations for the new locale.

Example en.json

{
  "website":{
    "title": "Jalpc"
  },
  "nav":{
    "home": "Home",
    "about_me": "About",
    "skills": "Skills",
    "career": "Career",
    "blog": "Blog",
    "contact": "Contact"
  }
}

Step 3

Next you need to add html indicators in all place you want to use i18n.(_includes/sections/*.html and index.html)

Example:

<a class="navbar-brand" href="#page-top" id="i18_title"><span data-i18n="website.title">{{ site.title }}</span></a>

Step 4

Next you need to initialise the i18next plugin(index.html):

$.i18n.init(
    resGetPath: 'locales/__lng__.json',
    load: 'unspecific',
    fallbackLng: false,
    lng: 'en'
}, function (t)
    $('#i18_title').i18n();
});

Web analytics

I use Google analytics and GrowingIO to do web analytics, you can choose either to realize it,just register a account and replace id in _config.yml.

Comment

I use Disqus to realize comment. You should set disqus_shortname and get public key and then, in _config.yml, edit the disqus value to enable Disqus.

Share

I use AddToAny to share my blog on other social network platform. You can go to this website to custom your share buttons and paste code at _includes/share.html.

Search engines

I use javascript to realize blog search,you can double click Ctrl or click the icon at lower right corner of the page,the detail you can got to this repo: https://github.com/androiddevelop/jekyll-search.

Just use it.

Compress CSS and JS files

All CSS and JS files are compressed at /static/assets.

I use UglifyJS2, clean-css and purifycss to compress/purify CSS and JS files. If you want to custom CSS and JS files, you need to do the following:

1. Install UglifyJS2 and clean-css: npm install -g uglifyjs; npm install -g clean-css, then run npm install at root dir of project.
2. Compress script is build.js, index page has its own CSS and JS compressed files, they are :

• app-index-xxx.min.css
• app-index-xxx.min.js
• i18-xxx.min.js

404 page are

• fof-xxx.min.css
• fof-xxx.min.js

other pages are

• app-xxx.min.css
• app-xxx.min.js
• jPage-xxx.min.js

xxx is date when you compress your files. 3. If you want to add/remove CSS/JS files, just edit build/build.js and build/files.conf.js, then run npm run build at root dir of project, link/src files will use new files.

Put in a Jalpc Plug

If you want to give credit to the Jalpc theme with a link to my personal website http://www.jack003.com, that'd be awesome. No worries if you don't.

Upgrading Jalpc

Jalpc is always being improved by its users, so sometimes one may need to upgrade.

Ensure there's an upstream remote

If git remote -v doesn't have an upstream listed, you can do the following to add it:

git remote add upstream https://github.com/jarrekk/jalpc_jekyll_theme.git

Pull in the latest changes

git pull upstream gh-pages

There may be merge conflicts, so be sure to fix the files that git lists if they occur. That's it!

Thanks to the following

• Jekyll
• Bootstrap
• jPages
• i18next
• pixyll
• androiddevelop
• UglifyJS2
• clean-css
• Chart.js
• shelljs
• colors

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Todo

1. jekyll server --watch mode need to use original CSS/JS files

Change Log

• v1.1.2
  • purify style.css
• v1.1.1
  • display skills with Chart.js
  • add shelljs and colors
  • compress CSS/JS file with build.js automatically
• v1.1.0
  • Speed up!! reduce request times and file size
  • change bower to npm
  • compress CSS/JS files with uglifyjs and clean-css
• v1.0.5
  • add donation page
  • fix basuurl and url bug
• v1.0.4
  • use _data to config index page
  • separate index page by sections
• v1.0.3
  • change color
  • remove unused css code
• v1.0.2
  • use jPages to realize pagination
• v1.0.1
  • first release

Ad

Jalpc-A: another Jekyll theme written by AngularJS.