要显示一段代码的最新的提交信息,这样的功能可以在很多地方见到,特别是开源社区需要引用各种项目的时候,这个也是依据那些东西改过来的。
第一步:为wordpress添加一个短标签用于支持github_widget的引用。
/**
* Github 短标签
* @param $attr
* @return string
*/
function wpr_github_widget($attr){
/**
* @var $repo
* @var $class
*/
extract(shortcode_atts(array(
"repo" => '',
"class" => 'github-widget'), $attr));
if(!$repo){
return '';
}
return '<div class="' . $class . '" data-repo="' . $repo . '"><p>Github:<a href="https://github.com/' . $repo . '" rel="nofollow">https://github.com/' . $repo . '</a></p></div>';
}
add_shortcode("github_widget", "wpr_github_widget");//这句就是注册了一个名为github_widget的小工具
* Github 短标签
* @param $attr
* @return string
*/
function wpr_github_widget($attr){
/**
* @var $repo
* @var $class
*/
extract(shortcode_atts(array(
"repo" => '',
"class" => 'github-widget'), $attr));
if(!$repo){
return '';
}
return '<div class="' . $class . '" data-repo="' . $repo . '"><p>Github:<a href="https://github.com/' . $repo . '" rel="nofollow">https://github.com/' . $repo . '</a></p></div>';
}
add_shortcode("github_widget", "wpr_github_widget");//这句就是注册了一个名为github_widget的小工具
第二步:在写文章的过程中添加这样一段标记,即可显示短标签,其中repo字段为仓库。
[github_widget repo="loveyu/xxxx"]
第三步:上面的操作,只是输出可一段HTML到页面中,并没有任何效果,接下来需要在主题的JS文件中添加这么一段,来加载相关信息。上面输出的样式为github-widget,具体对该对象操作。
/**
* 添加Github 挂件
*/
jQuery(document).ready(function ($) {
$('.github-widget').each(function () {
var $container = $(this), $widget, repo = $container.data('repo'), vendorName = repo.split('/')[0], repoName = repo.split('/')[1], vendorUrl = "http://github.com/" +
vendorName, repoUrl = "https://github.com/" + vendorName + '/' + repoName;
$widget = $('<div class="github-box repo">' + '<div class="github-box-title">' + '<h3>' +
'<a class="owner" href="' + vendorUrl + '" title="' + vendorUrl + '">' + vendorName + '</a>' + '/' +
'<a class="repo" href="' + repoUrl + '" title="' + repoUrl + '">' + repoName + '</a>' + '</h3>' +
'<div class="github-stats">' + '<a class="watchers" href="' + repoUrl +
'/watchers" title="查看 watchers">?</a>' + '<a class="forks" href="' + repoUrl +
'/network/members" title="查看 forkers">?</a>' + '</div>' + '</div>' + '<div class="github-box-content">' +
'<p class="description"><span></span> — <a href="' + repoUrl + '#readme">查看详情</a></p>' +
'<p class="link"></p>' + '</div>' + '<div class="github-box-download">' + '<div class="updated"></div>' +
'<a class="download" href="' + repoUrl + '/zipball/master" title="获取压缩文件">下载ZIP压缩文件</a>' + '</div>' +
'</div>');
$container.html("");
$widget.appendTo($container);
var repo_path = repo;
$.ajax({
url: 'https://api.github.com/repos/' + repo,
dataType: 'jsonp',
success: function (results) {
if (results.meta.status != 200) {
$widget.find('.description').html(results.data.message);
$widget.find(".github-box-download").remove();
$widget.find(".link").remove();
$widget.find(".github-stats").remove();
return;
}
var repo = results.data, date, pushed_at = 'unknown';
if (repo.pushed_at) {
date = new Date(repo.pushed_at);
pushed_at = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
}
$widget.find('.watchers').text(repo.watchers);
$widget.find('.forks').text(repo.forks);
$widget.find('.description span').text(repo.description);
$widget.find('.updated').html('最后提交到 <strong>' + repo.default_branch + '</strong> 分支在 ' + pushed_at);
// Don't show "null" if the repo has no homepage URL.
if (repo.homepage != null) {
$widget.find('.link').append($('<a />').attr('href', repo.homepage).text(repo.homepage));
}
$.ajax({
url: 'https://api.github.com/repos/' + repo_path + '/commits',
dataType: 'jsonp',
success: function (results) {
if (typeof results.meta == "undefined" || results.meta.status != 200) {
return;
}
var length = results.data.length;
if (length < 1) {
return;
}
$widget.find('.description').after("<ul class='repo_commits'></ul>");
var repo = $widget.find(".repo_commits");
for (var i = 0; i < length; i++) {
if (i > 4)break;
var d = new Date(results.data[i].commit.committer.date);
repo.append("<li><span>" + results.data[i].commit.committer.name + "</span><span>" + results.data[i].commit.message + "</span><span>" + d.toLocaleString() + "</span></li>");
}
}
});
}
});
});
});
* 添加Github 挂件
*/
jQuery(document).ready(function ($) {
$('.github-widget').each(function () {
var $container = $(this), $widget, repo = $container.data('repo'), vendorName = repo.split('/')[0], repoName = repo.split('/')[1], vendorUrl = "http://github.com/" +
vendorName, repoUrl = "https://github.com/" + vendorName + '/' + repoName;
$widget = $('<div class="github-box repo">' + '<div class="github-box-title">' + '<h3>' +
'<a class="owner" href="' + vendorUrl + '" title="' + vendorUrl + '">' + vendorName + '</a>' + '/' +
'<a class="repo" href="' + repoUrl + '" title="' + repoUrl + '">' + repoName + '</a>' + '</h3>' +
'<div class="github-stats">' + '<a class="watchers" href="' + repoUrl +
'/watchers" title="查看 watchers">?</a>' + '<a class="forks" href="' + repoUrl +
'/network/members" title="查看 forkers">?</a>' + '</div>' + '</div>' + '<div class="github-box-content">' +
'<p class="description"><span></span> — <a href="' + repoUrl + '#readme">查看详情</a></p>' +
'<p class="link"></p>' + '</div>' + '<div class="github-box-download">' + '<div class="updated"></div>' +
'<a class="download" href="' + repoUrl + '/zipball/master" title="获取压缩文件">下载ZIP压缩文件</a>' + '</div>' +
'</div>');
$container.html("");
$widget.appendTo($container);
var repo_path = repo;
$.ajax({
url: 'https://api.github.com/repos/' + repo,
dataType: 'jsonp',
success: function (results) {
if (results.meta.status != 200) {
$widget.find('.description').html(results.data.message);
$widget.find(".github-box-download").remove();
$widget.find(".link").remove();
$widget.find(".github-stats").remove();
return;
}
var repo = results.data, date, pushed_at = 'unknown';
if (repo.pushed_at) {
date = new Date(repo.pushed_at);
pushed_at = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
}
$widget.find('.watchers').text(repo.watchers);
$widget.find('.forks').text(repo.forks);
$widget.find('.description span').text(repo.description);
$widget.find('.updated').html('最后提交到 <strong>' + repo.default_branch + '</strong> 分支在 ' + pushed_at);
// Don't show "null" if the repo has no homepage URL.
if (repo.homepage != null) {
$widget.find('.link').append($('<a />').attr('href', repo.homepage).text(repo.homepage));
}
$.ajax({
url: 'https://api.github.com/repos/' + repo_path + '/commits',
dataType: 'jsonp',
success: function (results) {
if (typeof results.meta == "undefined" || results.meta.status != 200) {
return;
}
var length = results.data.length;
if (length < 1) {
return;
}
$widget.find('.description').after("<ul class='repo_commits'></ul>");
var repo = $widget.find(".repo_commits");
for (var i = 0; i < length; i++) {
if (i > 4)break;
var d = new Date(results.data[i].commit.committer.date);
repo.append("<li><span>" + results.data[i].commit.committer.name + "</span><span>" + results.data[i].commit.message + "</span><span>" + d.toLocaleString() + "</span></li>");
}
}
});
}
});
});
});
第四步:在我们添加了JS代码后需要对其实现特殊的效果,就是CSS布局的问题,这里是我使用的CSS代码,使用了部分第三方的图标,可以用其他的图标覆盖,如果你有的话。
/**
* Github box
*/
.github-box *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}
.github-box{font-size:13px;line-height:18px;background:#fff;border:1px solid #ddd;color:#666;}
.github-box .github-box-title{position:relative;border-bottom:1px solid #ddd;background:#f8f8f8;}
.github-box .github-box-title h3{font-weight:normal;font-size:16px;color:gray;margin:0 0 0 25px;padding:10px;width:auto;}
.github-box .github-box-title:before,.github-box .github-stats a:before{-webkit-font-smoothing:antialiased;display:inline-block;font:normal 16px/1 Genericons;text-decoration:inherit;vertical-align:text-bottom;margin-right:5px;}
.github-box .github-box-title:before{content:'\f200';font-size:25px;line-height:38px;position:absolute;left:5px;}
.github-box .watchers:before{content:'\f403';}
.github-box .forks:before{content:'\f408';}
.github-box .github-box-title h3 .repo{font-weight:bold;}
.github-box .github-box-title .github-stats{float:right;position:absolute;top:8px;right:10px;font-size:12px;font-weight:bold;line-height:21px;height:auto;min-height:21px;}
.github-box .github-box-title .github-stats a{display:inline-block;height:21px;line-height:21px;border-radius:3px;border:1px solid #ddd;padding:0 5px;}
.github-box .github-box-title .github-stats .forks{margin-left:5px;}
.github-box .github-box-content{padding:8px;font-weight:300;}
.github-box .github-box-content p{line-height:25px;}
.github-box .github-box-content .link{font-weight:bold;}
.github-box .github-box-download{position:relative;border-top:1px solid #ddd;background:white;border-radius:0 0 3px 3px;padding:10px;height:auto;min-height:24px;}
.github-box .github-box-download .updated{word-wrap:break-word;margin:0;font-size:11px;color:#666;line-height:24px;font-weight:300;width:auto;}
.github-box .github-box-download .updated strong{font-weight:bold;color:#000;}
.github-box .github-box-download .download{float:right;position:absolute;top:10px;right:10px;height:24px;line-height:24px;font-size:12px;color:#666;font-weight:bold;padding:0 10px;border:1px solid #ddd;border-bottom-color:#bbb;background:#f5f5f5;}
.github-box .github-box-download .download:hover{color:#fff;border:1px solid #fb7125;background-color:#ff7326;}
.github-box .repo_commits{padding: 5px;}
.github-box .repo_commits li{line-height: 1.5em;list-style: none;margin-left: 5px;}
.github-box .repo_commits li span{margin-right: 10px;}
.github-box .repo_commits li span:first-child{text-transform: capitalize;}
.github-box .repo_commits li span:last-child{font-style: italic;}
@media (max-width:767px){
.github-box .github-box-title{height:auto;min-height:60px;padding:5px 10px;}
.github-box .github-box-title:before{font-size:30px;line-height:60px;}
.github-box .github-box-title h3{line-height:20px;}
.github-box .github-box-title h3 .repo{display:block;}
.github-box .github-box-title .github-stats a{display:block;clear:right;float:right;}
.github-box .github-box-title .github-stats a:first-child{margin-bottom:5px;}
.github-box .github-box-download{height:auto;min-height:46px;}
.github-box .github-box-download .download{top:32px;}
}
/*--------------GITHUB OVER-------------------------*/
* Github box
*/
.github-box *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}
.github-box{font-size:13px;line-height:18px;background:#fff;border:1px solid #ddd;color:#666;}
.github-box .github-box-title{position:relative;border-bottom:1px solid #ddd;background:#f8f8f8;}
.github-box .github-box-title h3{font-weight:normal;font-size:16px;color:gray;margin:0 0 0 25px;padding:10px;width:auto;}
.github-box .github-box-title:before,.github-box .github-stats a:before{-webkit-font-smoothing:antialiased;display:inline-block;font:normal 16px/1 Genericons;text-decoration:inherit;vertical-align:text-bottom;margin-right:5px;}
.github-box .github-box-title:before{content:'\f200';font-size:25px;line-height:38px;position:absolute;left:5px;}
.github-box .watchers:before{content:'\f403';}
.github-box .forks:before{content:'\f408';}
.github-box .github-box-title h3 .repo{font-weight:bold;}
.github-box .github-box-title .github-stats{float:right;position:absolute;top:8px;right:10px;font-size:12px;font-weight:bold;line-height:21px;height:auto;min-height:21px;}
.github-box .github-box-title .github-stats a{display:inline-block;height:21px;line-height:21px;border-radius:3px;border:1px solid #ddd;padding:0 5px;}
.github-box .github-box-title .github-stats .forks{margin-left:5px;}
.github-box .github-box-content{padding:8px;font-weight:300;}
.github-box .github-box-content p{line-height:25px;}
.github-box .github-box-content .link{font-weight:bold;}
.github-box .github-box-download{position:relative;border-top:1px solid #ddd;background:white;border-radius:0 0 3px 3px;padding:10px;height:auto;min-height:24px;}
.github-box .github-box-download .updated{word-wrap:break-word;margin:0;font-size:11px;color:#666;line-height:24px;font-weight:300;width:auto;}
.github-box .github-box-download .updated strong{font-weight:bold;color:#000;}
.github-box .github-box-download .download{float:right;position:absolute;top:10px;right:10px;height:24px;line-height:24px;font-size:12px;color:#666;font-weight:bold;padding:0 10px;border:1px solid #ddd;border-bottom-color:#bbb;background:#f5f5f5;}
.github-box .github-box-download .download:hover{color:#fff;border:1px solid #fb7125;background-color:#ff7326;}
.github-box .repo_commits{padding: 5px;}
.github-box .repo_commits li{line-height: 1.5em;list-style: none;margin-left: 5px;}
.github-box .repo_commits li span{margin-right: 10px;}
.github-box .repo_commits li span:first-child{text-transform: capitalize;}
.github-box .repo_commits li span:last-child{font-style: italic;}
@media (max-width:767px){
.github-box .github-box-title{height:auto;min-height:60px;padding:5px 10px;}
.github-box .github-box-title:before{font-size:30px;line-height:60px;}
.github-box .github-box-title h3{line-height:20px;}
.github-box .github-box-title h3 .repo{display:block;}
.github-box .github-box-title .github-stats a{display:block;clear:right;float:right;}
.github-box .github-box-title .github-stats a:first-child{margin-bottom:5px;}
.github-box .github-box-download{height:auto;min-height:46px;}
.github-box .github-box-download .download{top:32px;}
}
/*--------------GITHUB OVER-------------------------*/
最后,整个页面就差不多搞定了,如果需要更多更复杂的数据,直接去Github查询更多API就好了,同时这里可以直接替换为OSCHINA的API,印象中兼容不错。
好像不会弄哈
把内容复制到指定的地方就好了
写的非常详细
博主好啊,路过看一下~~
我是不敢再折腾WordPress插件了,之前因为插件过多网站首页占用内存太多。。
我反正都是自己写,一般就是增加几次SQL查询。再说了这个插件不占啥内存基本就是个输出钩子
这个插件干嘛用的?
在博客中显示Github代码的
经你解说,再百度一下,我懂了。。
你好, 我尝试了下, 好像还是有点问题.
效果如此 https://argcv.com/articles/4107.c
它的各种logo没有显示.
可以注意到,关键内容是如下的css定义.
.github-box .watchers:before{content:’\f403′;}
悲剧的是我并不知道\f403是哪个font集里面的…
你可以参考 http://genericons.com/ 我用的是这个,你也可以用其他的,自己替换下就好了。
多谢!
我做成了一个简单的插件,可以开关它.
FIY, 发现你这个数值好像有点问题(watch,star和fork), 我小fix了下,若有兴趣可以参考
https://dn-argcv.qbox.me/wp-content/plugins/github_widget/github_widget.css 和 https://dn-argcv.qbox.me/wp-content/plugins/github_widget/github_widget.js
效果如 https://argcv.com/articles/4019.c
实际上最开始我的也是一个插件,后来因为需要整合大量的内容到主题中去,干掉了N个插件,这就是其中一个。你的那个数值我看看,一直没注意。