https://jarrekk.github.io/Jalpc/
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.
Here is a document of how to setup this theme with 3 steps.
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.
This yml file is about blog page navbar
The following is mapping between yml files to donation
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.
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>
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.
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.
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 folderstatic/locales/
.
Add a new language entry
languages:
- locale: 'en'
flag: 'static/img/flags/United-States.png'
- locale: '<language_locale>'
flag: '<language_flag_url>'
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"
}
}
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>
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();
});
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
.
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.
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
.
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.
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:
npm install -g uglifyjs; npm install -g clean-css
, then run npm install
at root dir of project.404 page are
other pages are
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.
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.
Jalpc is always being improved by its users, so sometimes one may need to upgrade.
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
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!
git checkout -b my-new-feature
)git commit -am 'Add some feature'
)git push origin my-new-feature
)jekyll server --watch
mode need to use original CSS/JS files