为WordPress添加Github的小挂件

Github小挂件

  要显示一段代码的最新的提交信息,这样的功能可以在很多地方见到,特别是开源社区需要引用各种项目的时候,这个也是依据那些东西改过来的。

  第一步:为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的小工具

  第二步:在写文章的过程中添加这样一段标记,即可显示短标签,其中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> &mdash; <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查询更多API就好了,同时这里可以直接替换为OSCHINA的API,印象中兼容不错。

13条评论在“为WordPress添加Github的小挂件”

    1. 我反正都是自己写,一般就是增加几次SQL查询。再说了这个插件不占啥内存基本就是个输出钩子

  1. 你好, 我尝试了下, 好像还是有点问题.
    效果如此 https://argcv.com/articles/4107.c
    它的各种logo没有显示.
    可以注意到,关键内容是如下的css定义.
    .github-box .watchers:before{content:’\f403′;}
    悲剧的是我并不知道\f403是哪个font集里面的…

      1. 多谢!

        我做成了一个简单的插件,可以开关它.
        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

        1. 实际上最开始我的也是一个插件,后来因为需要整合大量的内容到主题中去,干掉了N个插件,这就是其中一个。你的那个数值我看看,一直没注意。

写下你最简单的想法