A Jekyll plugin for rendering GitHub avatars
Jekyll Avatar makes it easy to add GitHub avatars to your Jekyll site by specifying a username. If performance is a concern, Jekyll Avatar is deeply integrated with the GitHub avatar API, ensuring avatars are cached and load in parallel. It even automatically upgrades users to Retina images, when supported.
Add the following to your site's Gemfile
:
gem 'jekyll-avatar'
And add the following to your site's _config.yml
file:
plugins:
- jekyll-avatar
Note: If you are using a Jekyll version less than 3.5.0, use the gems
key instead of plugins
.
Simply add the following, anywhere you'd like a user's avatar to appear:
{% avatar [USERNAME] %}
With [USERNAME]
being the user's GitHub username:
{% avatar hubot %}
That will output:
<img class="avatar avatar-small" src="https://avatars3.githubusercontent.com/hubot?v=3&s=40" alt="hubot" srcset="https://avatars3.githubusercontent.com/hubot?v=3&s=40 1x, https://avatars3.githubusercontent.com/hubot?v=3&s=80 2x, https://avatars3.githubusercontent.com/hubot?v=3&s=120 3x, https://avatars3.githubusercontent.com/hubot?v=3&s=160 4x" width="40" height="40" />
You can customize the size of the resulting avatar by passing the size argument:
{% avatar hubot size=50 %}
That will output:
<img class="avatar" src="https://avatars3.githubusercontent.com/hubot?v=3&s=50" alt="hubot" srcset="https://avatars3.githubusercontent.com/hubot?v=3&s=50 1x, https://avatars3.githubusercontent.com/hubot?v=3&s=100 2x, https://avatars3.githubusercontent.com/hubot?v=3&s=150 3x, https://avatars3.githubusercontent.com/hubot?v=3&s=200 4x" width="50" height="50" />
You can also pass the username as a variable, like this:
{% assign user="hubot" %}
{% avatar {{ username }} %}
Or, if the variable is someplace a bit more complex, like a loop:
{% assign employees = "alice|bob" | split:"|" %}
{% for employee in employees %}
{% avatar user=employee %}
{% endfor %}
For pages showing a large number of avatars, you may want to load the images lazily.
{% avatar hubot lazy=true %}
This will set the data-src
and data-srcset
attributes on the <img>
tag, which is compatible with many lazy load JavaScript plugins, such as:
To use Jekyll Avatars with GitHub Enterprise, you must set the PAGES_AVATARS_URL
environmental variable.
This should be the full URL to the avatars subdomain or subpath. For example:
PAGES_AVATARS_URL="https://avatars.github.example.com"
PAGES_AVATARS_URL="https://github.example.com/avatars"
其实博客四月初的时候就建好了,当时自己是在vps上面使用LAMP配合WordPress来建的,后来由于种种原因,我把博客迁到了github重新开始。 好了,废话不多说,正题开始: 关于github的配置 准备工作:在github申请一个账号,然后创建一个名为<用户名>.github.io的仓库,比如我的用户名是ghccc,那么我的仓库名字就是ghccc.github.io 首先,下载配置git,我
Jekyll 是一个简单的免费的Blog生成工具,类似WordPress。但是和WordPress又有很大的不同,原因是jekyll只是一个生成静态网页的工具,不需要数据库支持。但是可以配合第三方服务,例如discuz。最关键的是jekyll可以免费部署在Github上,而且可以绑定自己的域名。 快速安装指令: gem install jekylljekyll new my-awesome-sit
中文网站 jekyllcn 快速开始 ~ $ gem install jekyll bundler ~ $ jekyll new my-awesome-site ~ $ cd my-awesome-site ~/my-awesome-site $ bundle install ~/my-awesome-site $ bundle exec jekyll serve # => 打开浏览器 http
jekyll-admin 是一个 jekyll 插件,为用户提供了传统 CMS(内容管理系统)风格的图形化界面来创作内容和管理 jekyll 网站。 该项目分为两部分。基于 Ruby 的 HTTP API 处理 jekyll 和文件系统的操作部分,以及在这个 API 基础上的基于 JavaScript 的前端部分。 安装: 就像安装其他插件一样,请参阅 jekyll 文档的插件安装部分安装 jek
Jekyll的增强版,使用Markdown来写日志。 Jekyll采用静态文件方式管理,不需要数据库即可支持一个独立博客站点,在github-pages平台上被普遍采用。Jekyll-Bootstrap在Jekyll基础上,集成了twitter-bootstrap界面风格和一些实用的插件,并且易于扩展。
Jekyll Docker Jekyll Docker is a software image that has Jekyll and many of its dependencies ready to use for you in an encapsulated format. It includes a default set of gems, different image types wi
jekyll-katex This is a Jekyll plugin for performing compile-time math rendering via the KaTeX library.KaTeX is a library for rending math on the web using LaTeX, similar to MathJax. KaTeX differs from
�� Jekyll Spaceship �� Jekyll plugin for Astronauts. Install | Config | Usage | Credits | License Built with ❤︎ by jeffreytse and contributors Spaceship is a minimalistic, powerful and extremely custo
reveal-jekyll Transforms Markdown files into presentation slides using reveal.js and Jekyll. The theme is based on Solarized Colors (by Ethan Schoonover) containing a light and a dark theme. reveal-je