6

I'm trying to add a gist to my blog to see how it works and use it to share some code related blogs going forward.

I've followed the steps mentioned form this blog, but I'm not able to get it to work. I don't know what I'm missing, any pointers on what I could be missing would be really appreciated.

My HTML Editor of blog related code looks like this:-

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Hi<br />
<br />
test<br />
<br />
<br />
<div class="gistLoad" data-id="4132084" id="gist-4132084">
Loading ....</div>
<br />
<br />
<br />
<br />
<pre style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; word-wrap: break-word;"></pre>
</div>
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script> </div>

Thanks.

UPDATE (including, changing the code above)

I found one thing confusing for a while, why should I actually paste a div tag in the "Compose" Section of the Blog, it's afterall HTML code, so I moved it to the HTML editor part of the Blog. What was confusing to me initially was when it was mentioned in the blog:-

Now to include any gist template just add the following anywhere in your blog post.

But anyways, now, I only get "Loading" .., The error still persists..

4

7 回答 7

7

这是为我正确完成的代码。我必须确保在 div中，当您在Github上真正看到一个人的真正要点（例如，这个要点）时，我复制了作为“嵌入要点”一部分的代码。

此外，我犯的另一个错误是在我的代码中，JS 并不完全在帖子之外（如果你仔细观察，它实际上在最后一个 div 内（我的错））。无论如何，一切都很好，结局很好:)。所以这是对我有用的代码 -

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Hi<br />
<br />
test<br />
<br />
<br />
<div class="gistLoad" data-id="4132084" id="gist-4132084">
<script src="https://gist.github.com/boddhisattva/4132084.js"></script>

In case you want to see how I was able to embed the gist in my blog, you can have a look
at the stackoverflow question that I <a href="http://stackoverflow.com/questions/18788724/issues-adding-github-gist-to-my-blogusing-google-blogger/21355714#21355714">posted here</a> on the same when I had initially faced issues to get this to work for me.

Credits to the original <a href="http://blog.moski.me/2012/01/gist-with-bloggers-dynamic-views.html">blogger's post</a>. 
</div>
<br />
<br />
<br />
<br />
<pre style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; word-wrap: break-word;"></pre>
</div>
</div>
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>

这是使用上述代码的实际博客链接。

干杯.. :)

于 2014-01-25T20:14:53.867 回答
3

一个更简单的解决方案（自 2014 年 10 月起）：www.gistfy.com：

Gistfy 是一种从 GitHub 和 Bitbucket 存储库或 GitHub Gist 创建可嵌入代码片段的简单方法。

例如：

<script type='text/javascript' src='http://www.gistfy.com/github/gist/10666727'></script>
                                                                         ^
                                                                  (id of a GitHub Gist)
于 2014-10-21T20:25:33.717 回答
1

您提到的博客文章清楚地解释了一切，这就是您所要做的。我将描述我所做的：

  1. 我将它复制<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>到一个动态加载到每个博客页面（帖子、页面、所有内容）的小部件中。这是行不通的，因为如前所述，在您的每篇博文末尾包含以下代码。这意味着您必须将其单独包含在您的所有帖子中。是的，我也不喜欢它，但是博客条目是动态加载的，所以您必须在加载原始博客条目后加载 gists。

  2. 把<div class="gistLoad" data-id="GistID" id="gist-GistID">Loading ....</div> 你放原始 github gist 代码的地方放。例如 -这是我想在我的帖子中展示的一个要点。这是原始代码：<script src="https://gist.github.com/tkoomzaaskz/6235219.js"></script>. gistID 是6235219. 所以，相反，我把<div class="gistLoad" data-id="6235219" id="gist-6235219">Loading ....</div>. 在帖子的最后，我将第 1 点的 javascript 源代码放入其中。

这篇博文就是一个很好的例子。

于 2014-01-19T16:06:49.067 回答
0

I dont know, whether your are trying gist content made it as private or public. Here are the few steps for how to implement PUBLIC gist code into your blogger.

1) Create a gist file in gist.github.com(While you save the file just choose as "Create Public Gist"

2) Take/copy the code "Embed URL" text box(almost you done).

3) Login to your blogger and add copied code into your desired posts. Thats all. Your public gist code will display in your page.

Actual article from here

于 2014-08-08T07:16:46.353 回答
0

对我来说，这是因为我在谷歌博客上使用动态视图模板。当我将其更改为简单时，javascript 正在工作并显示要点。

于 2016-03-19T16:56:41.943 回答
0

请寻找要点的嵌入代码，我发现它是

<script src="https://gist.github.com/boddhisattva/4132084.js"></script>

只需使用上述脚本在blogger.com中创建博客文章，就这么简单

于 2019-07-03T12:46:55.697 回答
0

第 3 方 github 托管的文件标签根本不适合我。-<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>

在 chrome 中失败了Refused to execute script from 'https://raw.github.com/moski/gist-Blogger/master/public/gis‌​tLoader.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

github 网站上的嵌入链接可以工作，但对于那些想要避免依赖脚本链接的人，我编写了代码来拉下嵌入链接提供的内容并将其解码以粘贴到博客中。LinqPad 代码位于https://github.com/ImaginaryDevelopment/LinqPad/blob/master/LINQPad%20Queries/LanguageTranslators/fetch%20then%20parse%20gist%20html.linq

于 2017-01-05T22:23:10.917 回答