记不得，憋不住 | Can't Remember, Can't Shut Up

群里有人讨论如何在blogger中使用markdown 思路 以前在 短链转markdown日记本 的方案中, 页面内容<textarea>中是markdown格式文本, 外面再挂一段简单的JS转换markdown到HTML.

上回书说到 , 我还是回到了用blockquote显示代码的方案. 那么, 没有复制按钮还是不方便呀.

除了 google 的  code-prettify , 其实我也尝试过 Prism 和 highlight.js Prism 用法 在blogspot的模板里添加 <link href='https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css' rel='stylesheet'/> <script src='https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js'/> <script src='https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js'/> 效果 Prism没有自动识别代码的功能. 需要写blog时, 切换到html模式手动写 pre code 以及指定代码类型 可以有下面这样的效果. (当然, 配色方案能找到很多选择) highlight.js 用法 <link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css' rel='stylesheet'/> <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'/> <script>hljs.initHighlightingOnLoad();</script> 效果 highlight.js可以自动识别代码类型, 不过也不怎么准, bash识别成 Ruby 如果想bash识别准确, 每行命令前面要打那个#号. 那这样又不方便直接复制之后在命令行里直接粘贴运行了. 对JS代码的判断还正常. 还有一个最大的问题, 我把blockquote替换为pre code之后, highlight.js总...

之前我们实现了给代码段添加高亮. https://zelikk.blogspot.com/2024/05/blogspot-code-prettify.html 但是如果一行太长, 就会这样. 用鼠标拖着去选择, 很不方便. 这时候如果有个复制按钮就好了. 之前一直以为很复杂. 今天既然又有冲动了, 就查一查吧.

最早的时候, 我是用 CSS定义blockquote来实现某种意义上的显示代码 . 这两天, 看到一个推荐google的code-prettify项目的博客 https://www.shushen.xyz/ 就想到怎么把这个引入到 blogger 里面来.

blogger的系统有一点点 "过时". 在编辑博文的时候, 我觉得编辑器的宽度有点太窄, 特别是在比较大的显示器上, 显得没有充分利用. 可以打开开发者工具, 找到这个页面元素, 把width属性改大一点. 但是这样修改的结果, 只要刷新页面就复原了. 为了能每次打开这个编辑器页面都可以自动修改. 可以使用插件实现.

得到你的 GA4 代码 登录 https://analytics.google.com/ ，点击 "全部网站数据" 选择 GA4 看到你需要添加的代码 G-XXXXXXXXXX 设置Blogger 效果

之前这个修改可以让 首页显示热门博文PopularPosts 但是在Blogger的 Notable 类模板下，首页的排版显得很奇怪。 经过分析，是"更多博文"的浮动排版造成的影响。 修改模板文件 修改前： .blog-pager{ float:$endSide; margin-$endSide:468px; margin-top:48px } .blog-pager .blog-pager-older-link{ color:$(feed.button.color); float:right; font:$(feed.button.font); text-transform:uppercase } 修改后： .blog-pager{ text-align: center; margin: 2em 0; } .blog-pager .blog-pager-older-link{ color:$(feed.button.color); font:$(feed.button.font); text-transform:uppercase } 效果： =========== 其它修改一并记录一下： 广告前后留空太多 修改前： .shown-ad {     margin-bottom: 85px;     margin-top: 85px; } 修改后： .shown-ad {     margin-bottom: 45px;     margin-top: 45px; } 博文之间广告宽度 修改前： .shown-ad .inline-ad{ display:block; max-width:$(feed.width - 604px) } 修改后： .shown-ad .inline-ad{ display:block; max-width:$(feed.width - 204px) }

 当在Blogger中使用Notable系列模板时，每篇文章的首字母会变大，占两行。如下： 在一些以文字为主的博客站也许很合适，但是放在技术类的站我个人觉得就不太适合了。

将Blogger页面添加为Telegram Instant View时，遇到 Element <img> is not supported in <a> 的错误 报错信息示例： [..after:119] @simplify Element <img> is not supported in <a>: <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF5Km8RG7WQw6aKDRVJdFno0hPg_m63nPEhO2beAVZvKtBNgdYecEOyKTyA6CFhrtaWc5c6BqWq2friOctVX2nI7IzjtBI9sTwFxw0N1P_S2DrZIIg5KBBKZ1X-p-IMjbHfywbRWQt1x_nzIh3KO9Rj2bRsr8SreJmxp4HWQnlvrTTykQ2KsOoVJqu/s16000/2022-05-31_23-56-43.jpg"/> 解决方案： # 将`<a>`和`<p>`标签下的`<img>`标签替换为`<figure>`，使子标签下的 <img> 正常显示 @replace_tag(<figure>): //a[.//img] @replace_tag(<figure>): //p[.//img] 感谢： https://www.10101.io/2019/05/23/telegtam-instant-view 

我的搭建节点的教程有个目标就是——爷爷奶奶也能成功，只要能认识字母，会操作键盘和鼠标，就能成功。 我设想的一个使用场景是——把教程的字体调大后打印出来, 读者照着纸质的教程操作. 那么超链接的可读性是需要得到保证的.

Blogger 模板 Essential 右边有2个长条状的Google Adsense区域. 我觉得我的页面会比较长, 所以足够添加第3个Adsense区域. 那么就要修改Blogger的模板文件了

写博客的产出不稳定的，如果出现了受欢迎的博文，希望能多持续一段时间，也想推荐给"过客"。所以我想在首页也显示热门博文。

换了一个新模板Essential，我觉得还是比较满意。不过进入博文页面的时候左上角有一个返回按钮，而菜单按钮"三"不见了。我希望用菜单按钮把左侧的Google翻译、RSS Feed呼出来、归档、标签云；如果想返回的话，使用浏览器自带的功能就可以了。

Google Analytics默认生成的统计ID是G-XXXXXXXXXX，填不到Blogger后台里面去。 我们要生成“老版本”的Google Analytics统计ID UA-XXXXXXXXX-X

作为个人博客, 希望能从Google AdSense挣到一点广告费. 但是Google添加的广告有些确实一眼看过去容易让读者误以为是网站正文插图. 

也许你有希望重点宣传的博文，或者你想置顶一篇声明，于是你在Blogger里设置了 精选博文。也许你觉得在首页显示“置顶”博文的摘要就够了，不用在打开某篇博文还要显示这个。那么……

添加<script src='https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js'/> 添加<script src='https://crazypeace.github.io/text-autospace.js/text-autospace.min.js'/>

修改Blogger模板 自定义CSS时 会发现添加的CSS代码没有全部生效。

起因是，有些教程里贴了比较多的图片，图片是在白色为底色的界面上截下来的，教程本身页面也是白色为底，如果有多个图片连续的时候，容易让读者分不清图片之间的分隔。