将 GitHub gist 添加到我的博客时出现问题（使用 Google blogger）

问题描述 投票：0回答：7

我正在尝试将 gist 添加到我的 blog 以了解它是如何工作的，并使用它来分享一些与代码相关的博客。

我已按照此博客中提到的步骤进行操作，但我无法使其正常工作。我不知道我错过了什么，任何有关我可能错过的内容的指示将不胜感激。

我的博客相关代码的 HTML 编辑器如下所示：

<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>

更新

（我也更改了上面的代码）。

我发现有一件事让我困惑了一段时间，为什么我应该在博客的“Compose”部分粘贴一个div标签，毕竟它是HTML代码，所以我将它移动到博客的HTML编辑器部分。最初让我感到困惑的是当博客中提到它时：

现在要包含任何要点模板，只需将以下内容添加到 你的博文。

但无论如何，现在，我只得到“正在加载”..错误仍然存在..

github embed blogs gist code-editor
7个回答
7
投票

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

另外，我犯的另一个错误是在我的代码中，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>

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

干杯..:)

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)
1
投票

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

  1. 我将 

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

  2. 将

    <div class="gistLoad" data-id="GistID" id="gist-GistID">Loading ....</div> 

     放在您要放置原始 github gist 代码的位置。例如 -
    this 是我想在帖子中显示的要点。这是原始代码：<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 源代码。

这篇

博客文章是一个效果很好的例子。

0
投票
我不知道，您是否正在尝试将要点内容设为私有或公开。以下是如何在您的博客中实施 PUBLIC gist 代码的几个步骤。

1）在 gist.github.com 创建一个 gist 文件（保存文件时只需选择“创建公共 Gist”

2) 获取/复制代码“嵌入 URL”文本框（几乎完成）。

3）登录您的博客并将复制的代码添加到您想要的帖子中。就这样。您的公共要点代码将显示在您的页面中。

实际文章来自这里

0
投票
对我来说，这是因为我在谷歌博客上使用动态视图模板。当我将其更改为简单时，JavaScript 就开始工作并显示了要点。

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
    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
请查找要点的
Embed代码，我发现它是


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



只需使用上面的脚本在 
blogger.com 创建一篇博客文章，就这么简单
    

	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.