丢失的 Blogger 铅笔小图标

图片由 Google Gemini 阅读本文后生成，真是厉害

之前在自己折腾 Blogger，大概就是 2023 年或 2024 年把  Blogger 重新翻出来写的时候，一不小心，把每篇 Blog 下面的「铅笔」小图标给整没了。

这个小图标是管理员才能看到的。直接一点就可以进到编辑界面。对于我这种时常在回顾自己文章时发现错别字，需要马上去修改的人而言，真的是很方便。把它弄丢了以后，我每次就得根据文章的标题或标签再去 Blogger 后台找到那篇文章。有时候某些想法只是一瞬间的事情，过了就没了，对于我而言，更可怕的是「过了就忘了」，这也太可怕了！

我一开始还以为是自己之前在编辑主题的时候不小心把它给误删了。但今天想起这事，下决心解决，去看代码的时候，才发现好像不是这么一回事。代码都在里面，但就是不起作用了。

这是原来的代码：

<b:includable id="postQuickEdit" var="post">
  <b:if cond="data:post.editUrl">
    <span expr:class=""item-control " + data:post.adminClass">
      <a expr:href="data:post.editUrl" expr:title="data:top.editPostMsg">
        <img alt="" class="icon-action" height="18" src="https://resources.blogblog.com/img/icon18_edit_allbkg.gif" width="18" />
      </a>
    </span>
  </b:if>
</b:includable>

看到这里我就有点犯嘀咕。cond 明显是条件，该不会是 post.editUrl 没东西吧？
我把 cond 改成一个必定成立的条件，放到页面上一试，还真是。图标出来了，点击没用处，没能跳到编辑页面。问 Google Gemini，它说新一些的主题里面这个图标的确已经被隐藏了。看来 Google 是铁了心要把这个功能干掉了。

我想自己整，但发现真正的编辑页面的 URL 好像有两个 ID 我不知道哪里能拿到。Google Gemini 给出的修改方法语焉不详，而且看起来也没有说到点子上。算了还是求助于传统的 Google 吧。

搜到的第一个贴子是 Google 自己的页面，Blogger 的 Support 论坛：
https://support.google.com/blogger/thread/242102130/editurl-the-url-of-the-edit-form-for-this-article-deleted

里面有提到这位大神，是一个法语的 Blog：
https://bloggercode.orbiona.com/2021/10/faq.html

后面有个英语 Blog 也提到上面那篇：
https://too-clever-by-half.blogspot.com/2022/08/the-case-of-missing-pencil.html

法语对我而言有不少困难，还好有 Google Translate。
我翻到解决方案一节就知道了：看起来那个法语大神给出的就是我想要的东西。
简单地说，把原来的那段代码替换为：

<b:includable id='postQuickEdit' var='post'>
  <!-- /2021/10/faq.html -->
  <b:with value='data:view.isPage ? "blog/page/edit/" : "blog/post/edit/"' var='path'>
    <span expr:class='"item-control " + data:post.adminClass'>
      <a expr:href='data:blog.bloggerUrl path (data:path + data:blog.blogId + "/" + data:post.id)' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
  </b:with>
</b:includable>

就可以搞定了。

原因据说是 Google 慑于第三方 Cookies 的限制，没法让前台（blogspot.com）和后台（blogger.com）在域名不相同的情况下还能把管理员的登录会话串起来，索性就把整个功能废掉了。

解决方案的原理也很简单：你不让我跳编辑页面，我就自己组 URL。知道 BlogID，也知道 PostID，还有什么做不到的呢？

当然，这里头还有一些诸如「管理员权限的判断」等小东西。按照「八二原则」，真正花时间的往往是在这些事情上。掌握了核心技术，路只走了 20％ 而已。这位法语大神甚至已经把「页面」和「博文」的差别也搞定了。我就不折腾了，直接用她的吧。

照例吐槽一下：搜索结果中，简体中文的页面依然是一无所获，繁体中文有两篇讲到了这个事情，其中一篇涉及到了核心问题，不过最完整的解决方案还是法文以及英文的页面。简体中文在世界文化交流领域里面就是一个小角落，不管卖出了多少玩具电动车，都改变不了这个事实。不要再夜郎自大了。

调整了一下 Blogger

很怀念自己之前的旧 Drupal 站点，一直很遗憾 Blogger 没法像它那样「打扮」。

今天突然想起来，我又不是不会 HTML / CSS / Javscript，而且我也有 F12，Blogger 也让我自定义站点的页面，那我有什么做不到的？说干就干起来。

是你吗？

于是就有了现在这个 Header 部分。是的，我的大头像又回来了。

字体跟旧版还是有所不同，我当然也能做到改得一模一样，不过现在这个样子我觉得也 OK。先不去动了。

顺点也解决了一些问题，比如发现页面里面有一个失效的 js。回想了一下，发现是 Facebook 的 Like 按钮。没用的花哨玩意儿，何况我 Facebook 账号早就被杀了。

右侧的布局也调整了一下。联系方式和 Profile 什么的就去掉了，也是没用的玩意儿。
Blog 展示的细节也调整过了。发现有一篇 Blog 下面居然有「more」，回想起来是编辑器里面那个看似 <hr> 实则不是的功能在捣鬼。

最后，在顶部放了一个提示。通过自定义域名，我的站点在阿兹卡班也还是勉强能访问的。这件事情，跟我那十几年不变的标语一样，大家懂就懂，不懂也就算了。

把 Google Code Prettify 应用至 Blogger

图片来自网络

记得以前给自己的 Blogger 部署过 Google Code Prettify，不过后来可能是因为主题被重置过，效果没了。今天把它重新找了回来，日后也会逐渐套用至需要的 Blog 上。本文就作为相关内容的技术笔记吧。

部署

在 Blogger 后台中，点「主题背景」，然后进行「自定义」，去「修改 HTML」。
在 head 标签中放置：

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

然后用下列标签把代码括起来，就可以实现本文中的代码块效果：

<pre class="prettyprint">……</pre>

pre 标签中的代码按原始格式存放即可，不过小于号（<）和大于号（>）仍然要进行转义。

---

以下是一些常用到的 option，更多的内容烦请移驾 官方Github页面。

主题

在引用 run_prettify.js 的时候，URL 后面加一个参数 skin 即可。例如：

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert'/>

目前有五种主题，预览图点 这里。

不标记为代码

用一组带 nocode 样式的 span 标签括起来即可，还可以加上自己的样式。例如

<span class="nocode" style="color: red;">注意</span>

语言指定

在 pre 标签中指定 lang-* 样式，例如：

<pre class="prettyprint lang-sh">
if [ ! -d '/myfile' ]
then
    mkdir /myfile
fi
</pre>

<pre class="prettyprint lang-cpp">
class A
{
public:
    int a;
}
</pre>

内置支持的语言有 ["bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl"]，还有一些可以通过 extensions 进行支持，参见官网页面。

自动换行

有些代码有可能把屏幕宽度撑得很大。要想自动换行的话，在 head 标签中添加：

<style>
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
}
</style>

这里的效果是按字母换行，可能会切断单词。如果要按单词换行，去掉 word-break 这一行。详细的解释参见我的另一篇 Blog《关于表格内文字换行的再研究》。

Blogger 上的博客如何提交完整的 Sitemap

Blogger 现在可以输出 Atom 1.0 和 RSS 2.0 两种版本的 feed（参见 官方说明）。不过无论哪种 feed，都只包含最多 26 个 Post。

对于通常的 feed 订阅而言，最新 26 个 Post 应该是足够了。反正 RSS 阅读器只需要最新的那几个 Post 就行。但对于想把站点的 Sitemap 提交到 Google 的 网站站长工具 去做 SEO 的情况，26 个 Post 就太少了。既然是 Sitemap，当然希望是全部的页面了，那么有什么办法呢？

这里有个老外的 页面，说明了一种办法。大致说起来就是，Google 在提供 feed 订阅的 URL 中，还有两个未公开说明的参数：start-index 和 max-results。前者表示这次的 feed 输出从哪个（序号的）Post 开始，后者表示这次最多输出多少个 Post。于是如果要提交超过（默认的）26 个 Post 的 Sitemap，就可以用类似下面这种：

http://blogname.blogspot.com/feeds/posts/default?alt=rss&max-results=500

不过，看起来 max-results=500 应该是一个上限。本人是没有那个条件去试了，博文数量差着一个 0 哩！对于博文数量超过 500 的情况，上面那个老外的博文中也提到了一个办法，就是分段提交 Sitemap。比如：

http://blogname.blogspot.com/feeds/posts/default?alt=rss&start-index=1&max-results=500

http://blogname.blogspot.com/feeds/posts/default?alt=rss&start-index=501&max-results=500

http://blogname.blogspot.com/feeds/posts/default?alt=rss&start-index=1001&max-results=500

……

反正这些页面是都提交上去了，Google 会自己把它们合并起来的。