https://jarrekk.github.io/Jalpc/
http://www.jarrekk.com -- Personal website
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 and a wiki of how to add posts. If you have any questions please ask me at GitHub Issues.
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 ztool-backhend-mongo.
The landing page has multilingual support with the i18next plugin.
Languages are configured in the _data/index/language.yml
file.
Not everyone needs this feature, so I make it very easy to remove it, just clear content in file
_data/language.yml
and folderstatic/locales/
.
About how to custom multilingual page, please see wiki.
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 repository. Just use it.
All CSS and JS files are compressed at /static/assets
.
I use UglifyJS2, clean-css to compress CSS and JS files, customised CSS files are at _sass
folder which is feature of Jekyll. If you want to custom CSS and JS files, you need to do the following:
npm install -g uglify-js; npm install -g clean-css
, then run npm install
at root dir of project.npm run build
at root dir of project, link/src files will use new files.OR
Edit CSS files at _sass
folder.
If you want to give credit to the Jalpc theme with a link to my personal website http://www.jarrekk.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.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!
jekyll server --watch
mode need to use original CSS/JS filesIf this project let you enjoy your blog time, you can give me a cup of coffee :)