翻译

站内搜索

Blogger使用可复制blockquote模块的最终模式

一如既往,我在网络上一直寻找更好用的code使用方法,在blockquote的基础上找到更多的功能。

于是我找到了。

我删除了了footer中的JS小工具。并在CSS中增加了code的外观

从一位博主的贴文中,找到了修改blockquote和code外观的代码。于是我把该博主的代码无脑放在了原CSS代码的前面,刷新,通过。

然后我把blockquote外观的图片链接删除掉了。相比来说我更喜欢通过修改background颜色进行区分,图片堪称鸡肋,或许对加载也有影响。

我对此总结以下所有需要添加的代码

在HTML中的</head>前面我增加了以下内容

<script src='https://crazypeace.github.io/blogger-replace-blockquote-to-pre/blockquote-add-copy-button.js'/>

在CSS中我增加了以下内容 

/* Code And Blockquote

----------------------------------------------- */

CODE {

display: block; /* fixes a strange ie margin bug */

font-family: Courier New;

font-size: 8pt;

overflow:auto;

background: #f0f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzy9JxC4opvhqrjZXvYMIaKyAGb9fe9O5v8FuyfqrJcv_6aUpaG-djnj1jKqU2oRKXtx5FveWr08St5ufi9CT2PdbqJbYg29eYPWBU1dr9Cyyj4ncGTDpa_bFxer5RXcCxvdr0E8iCFmY/) left top repeat-y;

border: 1px solid #ccc;

padding: 10px 10px 10px 21px;

max-height:200px;

line-height: 1.2em;

}


.post blockquote {margin:1em 20px;padding-left:8px;background: #babfc4

}

.copy-button {

    position: absolute;


    display: none;

    cursor: pointer;

    inset: 5px 5px auto auto;

    width: 1em;

    height: 1em;

    border: 1px solid;

    box-shadow: -3px 3px #999

}

:hover>.copy-button {

    display: inline-block

}

.copy-success {

    box-shadow: none;

    background-color: #ff5768;

    transition: box-shadow .3s ease-out,background-color .3s ease-out

}

.copy-fail {

    border-style: dotted

}

pre, pre:hover {

  white-space: pre-wrap;

  word-break: break-all;

}

pre code {

  display: block;

  overflow-x: auto;

}

@media only screen and (min-width: 992px) {

  pre { white-space: pre; }

}

因为code模块依旧没有相应的复制按钮,在使用输入需要使用的脚本代码,我在Blogger中将一直使用Blogger的引用,同时我舍弃了刚刚试用不久的markdown工具StackEdit。

这些功能对博客来说,已经非常够用了。

以下为增加模块的参考网站

为Blogger添加引用和代码引用功能

^