10

GitHub Gists への URL を含むテキストがあります。これらの URL を探して、Gist をクライアント側のコンテンツにインラインで配置したいと思います。私が試したいくつかのこと：

GitHub の OEmbed API への直接参照。

の場合https://gist.github.com/733951、これは JSON-P ルックアップを 行い、オブジェクトhttps://github.com/api/oembed?format=json&url=https%3A%2F%2Fgist.github.com%2F733951のプロパティを抽出し、htmlそれをページに追加することを意味します。ここでの問題は、GitHub の OEmbed API が Gist の最初の 3 行しか返さないことです。

jQuery-embedly プラグインの使用。

通話中

jQuery('a.something').embedly({allowscripts: true})

動作しますが、Embedly は Gist から書式設定を取り除きます。<pre>改行がないため、タグで囲むことは役に立ちません。

GitHub の.jsバージョンの Gist を使用します。

https://gist.github.com/733951.jsを使用しdocument.writeているため、動的に必要なときにページ内のどこを制御することもできません。(HTML ソースに書き込むことができれば、適切な場所に表示されますが、これはすべてクライアント側で行われます。)

4

2 に答える 2

6

私はクライアント側の要点の埋め込みに触発され、script.jsそのためだけにハック ライブラリを構築しました (また、それを使用して埋め込みリンク スタイルを削除し、自分のページにより適した独自のスタイルを使用します) ...

Gist や Pasties を埋め込むだけではなく、より一般的なものです。実際には、サードパーティのウィジェット / Google マップ / Twitter の投稿を動的に読み込むために使用しています ...

https://github.com/kares/script.js

埋め込みの例は次のとおりです。

https://github.com/kares/script.js/blob/master/examples/gistsAndPasties.html

UPDATE : Gist の API はそれ以降、JSONP、jQuery のサンプルをサポートしています:

var printGist = function(gist) {
    console.log(gist.repo, ' (' + gist.description + ') :');
    console.log(gist.div);
};
$.ajax({ 
    url: 'https://gist.github.com/1641153.json', 
    dataType: 'jsonp', success: printGist 
});
于 2011-01-20T07:17:25.097 に答える
0

UrlSpoiler ( github ) というプロジェクトを開始しました。要点を動的に埋め込むのに役立ちます。無料/共有プラットフォームの Heroku でホストされているので、それを使って遊ぶことができますが、本番環境で使用するために必要なコードを独自のアプリにコピーすることをお勧めします。

于 2011-05-27T21:16:32.810 に答える