博客园皮肤修改与页面定制

前言

定制主要是加入一些实用的功能:添加代码复制按钮、添加目录导航、添加 GitHub 角标、添加网站图标 Favicon、添加版权说明、添加 “返回顶部” 按钮等。文章无图,因为很多内容都来自网友,文中附有原文链接。阅读起来可能有些单调,但内容比较精炼。

矛盾的对立统一

  1. 皮肤丑,但允许用户自定义 CSS 皮肤。

    刚开始用博客园,觉得皮肤好丑,对网页布局和字体大小很不适应。但博客园最绝妙的地方在于可自定义 CSS,因为别家不提供此功能。新手可以使用博客园的 找找看 搜索相关文章,参考网友写的教程进行自定义,通常可以做出符合自己需求的界面。

    当我逛博客模板时,我对「模板」两个字有了更深的理解,模板是让我们可以在上面进行个性化定制的东西,就好比将一块粗糙的石头雕刻成实用美观的石凳。博客园的标语为「代码改变世界」,其主要使用人群为程序员和计算机专业人士。对于这群人,对皮肤界面进行魔改不是什么麻烦事,甚至是乐趣的源泉。

    也许很多人会觉得,定制后的界面还是丑啊,为什么用户还愿意呆在博客园?

  2. 阅读体验差,可功能很实用

    自定义 CSS 最大的受益者是使用者,而非阅读者。简书提供一个统一的界面,保证了读者的阅读体验;可是博客园的界面却百花齐放,说白了就是使用者自己舒服就行,不用关心外来的阅读者,所以阅读体验差。

    一个问题摆在面前,必须要平衡美观性(阅读体验)和实用性(功能需求)。

    美观性包括博客界面和文章排版。界面要美观,并符合博客的主题;排版要符合规范,比如正确使用标点符号等。美观性就是提升阅读体验。

    实用性要求功能以实用为先。也就是说,为了实用有时候不得不牺牲掉美观。就好比,刘海屏或者挖孔屏手机就是比升降式镜头手机更实用。所以当通过博客园管理大量知识的时候,要牺牲阅读体验将更多的屏幕空间留给文章内容。

    博客园很多功能很实用:加密文章,很多公司内网也可访问,更改文章发表时间,容易发文章,广告少等。

    举例说明一下这些功能。当文章中涉及到隐私安全的时候,就需要加密。比如你给女朋友写了一封电子情书。很多公司无法访问很多外部网站,如果能访问博客园,就意味着你可以查看自己的博客。如果你博客搬家到博客园,那么你可能需要修改文章的发表时间。简书发文章审核比较严格,有时候无法过审,在博客园这种情况就很少。

  3. 尽量开设自己的独立博客网站

    我之所以使用博客园,是因为它比 CSDN、简书更实用,但我最喜欢用 Hugo + Coding 写自己的静态博客。因为自己开设的独立博客网站,在内容管理上胜过所有第三方博客平台。

经验分享

  1. 放大网页,保持合适的屏幕距离

    如果觉得页面字体小,可以使用 Ctrl + 放大网页。相反的,使用 Ctrl - 可以缩小网页。自己的博客,可以在 CSS 里面调整字体大小,留意皮肤使用的首选字体,没有的话要安装。当觉得字体模糊时,就尽量使用粗细差不多的无衬线字体,参考 如何选择字体(font-family),或者升级电脑的分辨率。不同浏览器渲染字体的效果不同,可以分别在 Firefox 和 Chrome 上测试一下效果。刚开始,看到小字密密麻麻一大坨,就没有读下去的兴趣,可当我静下心来认真阅读的时候,我竟然发现了小字的优点,小字可以让我阅读速度更快。另外,标题与段落之间要有足够的外边距(margin),便于快速区分标题。

    一批用户喜欢 维基百科 的风格,另一批喜欢 简书 的风格。作为实用派,我更推荐使用维基百科风格,网页可以显示更多内容,看图表、代码等非常方便,同时也便于回顾内容。另外你的眼睛与屏幕要保持合适的距离,这样你的视野会更宽广。

  2. 优雅定制界面,拒绝画蛇添足

    很多新博主把自己的博客弄得花里胡哨,界面看上去乱七八糟,阅读体验相当差。大家都喜欢做加法,因为谁都想与众不同,问题在于加太多可能就变丑了。应该学会做减法,减掉那些没用的东西。发博客其实就是自我总结,顺道分享和传播知识。既然分享给他人看,定制界面时就应该照顾阅读体验,不要添加不实用的东西。

  3. 提升写作能力

    导致阅读体验差的因素,除了糟糕的界面,还在于糟糕的文章排版。要写出好博客,就要提升自己的写作能力。

第三方皮肤

先看一下他人制作的皮肤是否喜欢:

如果有喜欢的,直接使用就行了。如果不满意,那就自定义吧。比如 weiyinfu 的博客园:当你在工作中失去动力时该怎么办? 界面简洁,阅读时目录会滚动;按 ESC 显示控制面板,再按 ESC 取消显示;支持快捷键,Ctrl+N 进入随笔,Ctrl+E 进入编辑。我个人非常喜欢。

博客 CSS 简单定制

编辑器使用 Markdown

选择博客布局

这里罗列 维基百科 风格的布局。

左边侧边栏的布局:

其中 MTClean 给我留下了深刻印象,比如可可西的文章 全面理解UE4委托,虽然深奥的内容无法看懂,但宽图宽表宽代码,真是一览无遗。对于看不懂的东西,我总是会心生崇拜。

右边侧边栏的布局:

获取皮肤的 CSS

Chrome 上获取博客皮肤 MTClean 的 CSS:

  • 进入 MTClean 点击「立刻应用该模板」,默认会自动进入「我的博客」。
  • 右键选择 Inspect(ctrl-shift-I)进入开发工具,然后选择 Sources => www.cnblogs.com => css => 右键另存为文件 blog-common.min.css
  • skins/mtclean => 另存为文件 bundle-mtclean.min.css
  • 利用开发工具(F12)审查网页上的元素,再对照 CSS 文件进行定制。CSS 代码默认没有对齐,不方便查看,你可以用 VSCodium 编辑器打开皮肤 CSS,然后选中所有代码,右键选择「格式化选定内容」对齐代码。

MTClean 简单定制

注意:定制后,需要在 Chrome 和 Firefox 上测试效果,并利用开发工具(F12)测试页面在手机上的效果。

view code(风格:wiki 居中)
/* 调整界面 */
html,
body {
    font-family: "PingFang SC", "Lantinghei SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHeiUI", "MicrosoftYaHei", "Microsoft Sans Serif", "Noto Sans", Arial, sans-serif;
    color: #24292e;
    background-color: #f4f4f4;
}

#main {
    background-color: #fff;
    padding: 4px 32px 8px;
    max-width: 1080px !important;
    margin: 0 auto;
    border: 0px solid #E5E8ED;
    border-top: 0px solid #666;
    border-radius: 0px;
    margin-top: 0px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
}

div.post {
    font-family: "PingFang SC", "Lantinghei SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHeiUI", "MicrosoftYaHei", "Microsoft Sans Serif", "Noto Sans", Arial, sans-serif;
    background: #fff;
}

div.post h2 {
    font-family: "PingFang SC", "Lantinghei SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHeiUI", "MicrosoftYaHei", "Microsoft Sans Serif", "Noto Sans", Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 1.65;
    margin-top: 1rem;
    margin-bottom: .5rem;
    color: #333;
    background: #fff;
}

div.post h2 a:link {
    font-family: "PingFang SC", "Lantinghei SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHeiUI", "MicrosoftYaHei", "Microsoft Sans Serif", "Noto Sans", Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 1.65;
    margin-top: 1rem;
    margin-bottom: .5rem;
    color: #333;
    background: #fff;
}

div.post h2 a:hover {
    color: #0681d0;
}

#myposts .postTitle2 {
    font-size: 16.5px;
    color: #2aa198;
    background: #fff;
}

.c_b_p_desc {
    font-family: "Hiragino Sans GB", "MicrosoftYaHeiUI", "Microsoft Yahei", sans-serif;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    line-height: 1.5;
    font-size: 14px;
    padding: 0;
}

p.postfoot {
    font-size: .75rem !important;
    color: #666;
    margin-top: 0rem !important;
    padding: 8px 0 16px;
    border-bottom: 1px solid rgba(190, 190, 190, 0.5);
}

/* 调整主页内容列表的时间戳 */
p.date img {
    vertical-align: middle
}

p.date {
    display: none;
    text-align: right;
    font-size: 0.75rem;
    color: #808080;
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
    border-bottom: 0px dotted #cccccc;
}

input.btn_my_zzk {
    vertical-align: middle;
    height: 22px;
    font-size: 0.75rem;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 15px;
}

#top {
    background-color: #f4f4f4;
    padding: 15px 15px 0px 10px;
    border-top: 0px double #666;
    border-radius: -8px;
    height: 20px;
}

#leftmenu {
    top: 70px;
    margin-top: 0px;
    margin-bottom: 16px;
    background-color: #f4f4f4;
}

#leftmenu h3 {
    font-family: "Noto Sans", "Noto Sans SC", "Noto Sans CJK SC", "Arial", sans-serif !important;
    font-size: 0.75rem;
    color: gray;
    background-color: #f4f4f4;
    text-transform: uppercase;
    margin-bottom: 2px;
}

/* Leftbar Color */
element {
    fill: hsla(0, 0%, 100%, .5);
    color: #313131 !important;
}

#leftmenu ul {
    list-style: none;
    color: #313131 !important;
    font-size: 0.875rem;
}

@media only screen and (max-width:1580px) {
    #main {
        margin: 0 auto;
        padding: 2px 32px
    }

    #top {
        height: 39px
    }

    #leftmenu {
        position: static;
        padding: 0 10px;
        width: auto
    }

    #leftmenu h3 {
        font-size: 1rem
    }

    #leftmenu ul {
        font-size: .8rem
    }
}



/* 调整链接 */
a,
a:visited,
a:active,
a:link {
    color: #313131;
}

a:hover {
    color: #0681d0
}

#top a,
#top a:link,
#top a:visited,
#top a:active {
    color: #333;
}

#top a:hover {
    color: #0681d0;
}



/* 调整文章内容 */
#cnblogs_post_body {
    font-family: "Hiragino Sans GB", "MicrosoftYaHeiUI", "Microsoft Yahei", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #313131;
    background: #fff;
    padding: 0 0 20px;
}

#cnblogs_post_body p {
    margin-bottom: 1rem;
}

h1 {
    font-size: 1.8rem
}

#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6 {
    font-family: "verdana", "Noto Sans", "PingFang SC", "Lantinghei SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHeiUI", "MicrosoftYaHei", "Microsoft Sans Serif", Arial, sans-serif;
    margin: 1.2rem 0 1rem;
}

#cnblogs_post_body h1 {
    color: #c41a16;
}

#cnblogs_post_body h2 {
    margin: 2rem 0 1.2rem;
    font-size: 1.5rem;
    color: #333;
}

#cnblogs_post_body h3 {
    font-size: 1.25rem;
}

#cnblogs_post_body h4 {
    font-size: 1.1rem;
}

#cnblogs_post_body h5 {
    font-style: italic;
    font-size: 1rem;
}

#cnblogs_post_body h6 {
    color: #777;
    font-style: normal;
    font-size: 1rem;
    padding-top: 0px;
}

#cnblogs_post_body a {
    font-style: normal;
    color: #0681d0;
    text-decoration: none;

    -webkit-tap-highlight-color: transparent;
    -webkit-text-decoration-skip: objects;
    -moz-text-decoration-skip: objects;
    text-decoration-skip: objects;
    cursor: pointer;
}

#cnblogs_post_body a:hover {
    text-decoration: underline;
}



/* 代码块 */
.cnblogs-markdown .hljs,
.cnblogs-post-body .hljs {
    font-family: "Roboto Mono", "Source Code Pro", "Anonymous Pro", "Fira Mono", "DejaVu Sans Mono", "Ubuntu Mono", "Droid Sans Mono", "Menlo", "Monaco", "Consolas", "Inconsolata", "Courier New", "Courier", "Monospace", sans-serif !important;
    font-size: 0.93em !important;
    line-height: 1.5 !important;
    padding: 16px !important;
    background: #f8f8f8;
}

.cnblogs-markdown code,
.cnblogs-post-body code {
    font-family: "Roboto Mono", "Source Code Pro", "Anonymous Pro", "Fira Mono", "DejaVu Sans Mono", "Ubuntu Mono", "Droid Sans Mono", "Menlo", "Monaco", "Consolas", "Inconsolata", "Monospace", sans-serif !important;
    font-size: 0.93em !important;
    line-height: 1.5 !important;
    color: #000;
    background-color: #f7f7f9 !important;
    border: 1px solid #e1e1e8;
    border-radius: 3px !important;
    padding: 0px 4px !important;
    margin: 0px 0px !important;
}

.cnblogs-markdown pre {
    font-size: 0.875em;
    line-height: 1.45;
    background-color: #f5f5f5 !important;
    color: #555;
    border-radius: 3px !important;
    border: 0px solid #cccccc;
    margin-bottom: 1rem;
}

.cnblogs-markdown pre code,
.cnblogs-post-body pre code {
    font-size: 0.875em !important;
    background-color: rgb(248, 248, 248) !important;
    border-color: rgb(248, 248, 248);
}



/**
 * Markdown 文档加入代码复制按钮
 * 请阅读原文:https://www.cnblogs.com/wuliytTaotao/p/11752754.html
 */

.cnblogs-markdown pre {
    position: relative;
}

.cnblogs-markdown pre>span {
    position: absolute;
    right: 0px;
    top: 1px;
    font-size: 12px;
    color: #4d4d4d;
    background: hsla(0, 0%, 100%, 1);
    padding: 1px 8px;
    border-radius: 0 0 20% 20%;
    border-top: darkred;
    margin-right: 4px;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: none;
}

.cnblogs-markdown pre:hover>span {
    display: block;
}

.cnblogs-markdown pre>.copyed {
    background: white;
    color: #00bcd4;
    background: hsla(0, 0%, 100%, 1);
}



/* 定制 Markdown 折叠效果 */
#cnblogs_post_body details summary:hover {
    cursor: pointer;
}



/* 块/段落引用 */
blockquote {
    color: #6a737d !important;
    border: none;
    border-left: .25em solid #dfe2e5;
    word-break: break-word;
    position: relative;
    font-style: normal !important;
    padding: 0 1em !important;
    margin: 1em 3em 1rem 2em;
}



/* Tables */
#cnblogs_post_body table,
.cnblogs-post-body table {
    font-size: 0.9rem;
    border-collapse: collapse;
    border-spacing: 0 !important;
    word-break: break-word;
    margin-bottom: 1rem;
}

#cnblogs_post_body th,
.cnblogs-post-body th {
    border: none;
    padding: 0;
    color: inherit;
}

#cnblogs_post_body th,
#cnblogs_post_body td,
.cnblogs-post-body th,
.cnblogs-post-body td {
    border: 1px solid #eaeaea;
    border-collapse: collapse;
    padding: 0.5em 1em;
    color: #404040;
}



/* 限制图片最大宽度 */
#cnblogs_post_body img {
    max-width: 75% !important;
    display: block;
}



/**
 * 返回顶部按钮
 * 参考本文「添加 “返回顶部” 按钮」部分
 */
#back-to-top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    width: 48px;
    height: 58px;
    border-radius: 6px;
    color: #8c8c8c;
    font-size: 16px;
    background-color: none;
    position: fixed;
    right: 15px;
    bottom: 3%;
    z-index: 1001;
}



/**
 * 生成博客目录 
 * 参考本文「添加目录导航」部分
 */
#uprightsideBar {
    font-size: 18px;
    font-family: "PingFang SC", "Lantinghei SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHeiUI", "MicrosoftYaHei", "Microsoft Sans Serif", "Noto Sans", Arial, sans-serif;
    position: fixed;

    width: auto;
    height: auto;
    right: 6px;
    top: 10.5%;

    border: 0px solid #D9DBE1;
    border-radius: 5px;
    margin: 0;
    padding: 0;
}

#sideBarTab {
    float: right;
    width: 23px;
    border: 0px solid #0a0a0a;
    padding: 6px 1px;
    text-align: center;
    background-color: #4169E1;
    background-color: #0681d0;
    background-color: rgba(6, 129, 208, 0.5);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
}

#sideBarContents {
    font-size: 15px;
    float: left;
    overflow: auto;
    overflow-x: hidden !important;
    width: 220px;
    min-height: 108px;
    max-height: 500px;
    border-left: 1px solid #4169E1;
    border-left: 1px solid #ddd;
    border-radius: 6px 0px 6px 6px;
    padding: 5px 16px 20px;
    color: #000;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
}

#sideBarContents dl {
    margin: 0;
    padding: 0;
}

#sideBarContents dt {
    margin-top: 5px;
    margin-left: 5px;
}

#sideBarContents dd,
dt {
    cursor: pointer;
}

#sideBarContents dd:hover,
dt:hover {
    color: #0681d0;
    background: #f2f8fc;
    font-style: normal;
    font-weight: 400;
}



/**
 * 显示推荐按钮 

#div_digg {
    padding: 10px;
    position: fixed;
    max-width: 46px;
    _position: absolute;
    z-index: 1000;
    bottom: 20px;
    right: 10px;
    _right: 5px;
    border: 1px solid #D9DBE1;
    background-color: hsla(0, 0%, 100%, .3);
    border-radius: 5px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
    text-align: center;
}

 */


/**
 * 不显示反对按钮
 * 别人的反馈至关重要,反对,说明自己有问题
 * 自己没问题,又何必在乎反对?

.buryit{display:none;}

 */

添加快速访问链接

博客侧边栏公告:

<a href="https://i-beta.cnblogs.com/diaries"  aria-label="写日记"  style="fill:hsla(0,0%,100%,.3); color:#313131; " aria-hidden="true">日记</a>
<a href="https://i-beta.cnblogs.com/articles" aria-label="写文章"  style="fill:hsla(0,0%,100%,.3); color:#313131; " aria-hidden="true">文章</a>
<a href="https://i-beta.cnblogs.com/posts"  aria-label="写随笔"  style="fill:hsla(0,0%,100%,.3); color:#313131; " aria-hidden="true">随笔</a><br>

<a href="https://i-beta.cnblogs.com/settings"  aria-label="settings"  style="fill:hsla(0,0%,100%,.3); color:#313131; " aria-hidden="true">设置</a>

<a href="https://github.com/YOURNAME" aria-label="GitHub"  style="fill:hsla(0,0%,100%,.3); color:#313131; " aria-hidden="true">GitHub</a>
<a href="https://YOURNAME.coding.net/user"  aria-label="Coding"  style="fill:hsla(0,0%,100%,.3); color:#313131; " aria-hidden="true">Coding</a>

SimpleClear 简单定制

注意:定制后,需要在 Chrome 和 Firefox 上测试效果,并利用开发工具(F12)测试页面在手机上的效果。

view code
/* 调整界面 */
body {
    font-size: 14px;
}

#main {
    top: 5px;
    padding: 2px 16px;
}

#rightmenu,
#rightmenu h3 {
    font-size: 13px;
}



/* 调整下划线 */
a:link,
a:hover,
div.post h2,
div.post h2 a:link,
div.post h2 a:hover {
    text-decoration: none;
}

.postFoot {
    border-bottom: 1px solid #ddd;
}



/* 调整标题 */
#header {
    font-size: 14px;
}

h1,
h1 a:visited,
h1 a:active,
h1 a:link {
    font-size: 16px;
    color: gray;
}

div.post h2,
div.post h2 a:link {
    font-size: 1.6rem;
}

/* 标题与其他块区分,margin 值要优化 */
#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6 {
    margin: 1.2rem 0 1rem;
}

#cnblogs_post_body h1 {
    color: #c41a16;
    font-size: 1.8rem;
}

#cnblogs_post_body h2 {
    margin: 1.6rem 0 1rem;
}



/* 引用 */
blockquote {
    padding: .5em 1em;
    margin: .8rem 0;
    color: #7a7a7a;
    border: none;
    border-left: .25rem solid #e5e5e5;
}

blockquote p:last-child {
    margin-bottom: 0;
}

@media (min-width: 30em) {
    blockquote {
        padding-right: 5rem;
        padding-left: 1.25rem;
    }
}



/* 代码块 */
.cnblogs-markdown .hljs,
.cnblogs-post-body .hljs {
    font-family: "Roboto Mono", "Source Code Pro", "Anonymous Pro", "Fira Mono", "DejaVu Sans Mono", "Ubuntu Mono", "Droid Sans Mono", "Menlo", "Monaco", "Consolas", "Inconsolata", "Courier New", "Courier", "Monospace", sans-serif !important;
    font-size: 0.93em !important;
    line-height: 1.5 !important;
    padding: 16px !important;
    background: #f8f8f8;
}

.cnblogs-markdown code,
.cnblogs-markdown pre {
    color: #c7254e;
    background-color: #f9f2f4;
}

.cnblogs-markdown code,
.cnblogs-post-body code {
    font-family: "Roboto Mono", "Source Code Pro", "Anonymous Pro", "Fira Mono", "DejaVu Sans Mono", "Ubuntu Mono", "Droid Sans Mono", "Menlo", "Monaco", "Consolas", "Inconsolata", "Monospace", sans-serif !important;
    font-size: 0.93em !important;
    line-height: 1.5 !important;
    color: #c7254e;
    background-color: #f9f2f4 !important;
    border: 0px solid #f9f2f4 !important;
    border-radius: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
}

.cnblogs-markdown pre {
    font-size: 0.93em;
    line-height: 1.45;
    color: #c7254e;
    background-color: rgb(248, 248, 248) !important;
    border-radius: 3px !important;
    border: 0px solid #cccccc;
}

.cnblogs-markdown pre code,
.cnblogs-post-body pre code {
    font-size: 0.93em !important;
    background-color: rgb(248, 248, 248) !important;
    border-color: rgb(248, 248, 248);
}



/**
  * Markdown 文档加入代码复制按钮
  * 原文:https://www.cnblogs.com/wuliytTaotao/p/11752754.html
  */
.cnblogs-markdown pre {
    position: relative;
}

.cnblogs-markdown pre>span {
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 12px;
    color: #4d4d4d;
    background: hsla(0, 0%, 100%, .6);
    padding: 1px 8px;
    border-radius: 0 0 20% 20%;
    margin-right: 4px;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    display: none;
}

.cnblogs-markdown pre:hover>span {
    display: block;
}

.cnblogs-markdown pre>.copyed {
    background: white;
    color: #00bcd4;
    background: hsla(0, 0%, 100%, .6);
}



/* 定制 Markdown 折叠效果 */
#cnblogs_post_body details summary:hover {
    cursor: pointer;
}

/* 限制图片最大宽度 */
#cnblogs_post_body img {
    max-width: 80% !important;
}


/**
 * 返回顶部按钮
 * 参考本文「添加 “返回顶部” 按钮」部分
 */
#back-to-top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    width: 48px;
    height: 58px;
    border-radius: 6px;
    color: #8c8c8c;
    font-size: 16px;
    background-color: none;
    position: fixed;
    right: 15px;
    bottom: 3%;
    z-index: 1001;
}



/**
 * 生成博客目录 
 * 参考本文「添加目录导航」部分
 */
 #uprightsideBar {
    font-size: 16px;
    font-family: "Helvetica Neue", "Helvetica", "Noto Sans", "PingFang SC", "Lantinghei SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "Microsoft Sans Serif", "WenQuanYi Micro Hei", Arial, sans-serif;
    position: fixed;

    width: auto;
    height: auto;
    left: 0px;
    top: 10.5%;

    border: 0px solid #D9DBE1;
    border-radius: 5px;
    margin: 0;
    padding: 0;
}

#sideBarTab {
    float: left;
    width: 23px;
    border: 0px solid #0a0a0a;
    padding: 6px 1px;
    text-align: center;
    background-color: hsla(0, 0%, 100%, .7);
    background-color: #4169E1;
    color: #fff;
}

#sideBarContents {
    font-size: 14px;
    float: right;
    overflow: auto;
    overflow-x: hidden !important;
    width: 220px;
    min-height: 108px;
    max-height: 500px;
    border: 1px solid #4169E1;
    border-radius: 0px 6px 6px 6px;
    padding: 0 16px;
    color: #000;
    background: #fff;
}

#sideBarContents dl {
    margin: 0;
    padding: 0;
}

#sideBarContents dt {
    margin-top: 5px;
    margin-left: 5px;
}

#sideBarContents dd,
dt {
    cursor: pointer;
}

#sideBarContents dd:hover,
dt:hover {
    background: #f4f4f4;
    color: #075db3;
    font-style: normal;
    font-weight: 400;
}

添加快速访问链接

博客侧边栏公告:

<a href="https://i-beta.cnblogs.com/posts"  aria-label="写随笔"  style="fill:hsla(0,0%,100%,.3); color:#075db3; " aria-hidden="true">随笔</a>
<a href="https://i-beta.cnblogs.com/articles" aria-label="写文章"  style="fill:hsla(0,0%,100%,.3); color:#075db3; " aria-hidden="true">文章</a>
<a href="https://i-beta.cnblogs.com/diaries"  aria-label="写日记"  style="fill:hsla(0,0%,100%,.3); color:#075db3; " aria-hidden="true">日记</a><br>

<a href="https://github.com/YOURNAME" aria-label="GitHub"  style="fill:hsla(0,0%,100%,.3); color:#075db3; " aria-hidden="true">GitHub</a>
<a href="https://YOURNAME.coding.net/user"  aria-label="Coding"  style="fill:hsla(0,0%,100%,.3); color:#075db3; " aria-hidden="true">Coding</a>

<a href="https://i-beta.cnblogs.com/settings"  aria-label="settings"  style="fill:hsla(0,0%,100%,.3); color:#075db3; " aria-hidden="true">设置</a>

Markdown 代码复制按钮

参见 博客园 Markdown 编辑模式下代码复制功能。记得申请 JS 权限(我的博客 => 管理 => 设置 => 博客侧边栏公告,点击页面上的 js 权限申请。)

页面定制 CSS 代码:

/*添加按钮*/
.cnblogs-markdown pre {
  position: relative;
}
.cnblogs-markdown pre > span {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 2px;
  padding: 0 10px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
}
.cnblogs-markdown pre > .copyed {
  background: #67c23a;
}

页脚 HTML 代码:

<!-- Markdown 代码复制按钮 -->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/wuliytTaotao/cp.js"></script>

最好将文件 cp.jsclipboard.min.js 拷贝到自己的博客园文件下(我的博客 => 管理 => 文件 => 上传文件)。右键复制文件链接,然后替换。

Markdown 折叠代码块

方案一

来自文章 博客园 markdown 编辑器代码折叠。会与上面复制按钮冲突。所以我弃用这个方案。

博客侧边栏公告:

<script type="text/javascript">
        $(document).ready(function () {
            var pres = $("pre");
            for (var i = 0; i < pres.length; i++) {
                $(pres[i]).attr('id', 'pre' + i);
                $(pres[i]).children('code').hide();
                $(pres[i]).prepend('<button id="btn'+ i +'" onclick="view_code(\'pre'+ i +'\');">view code</button>');
            }
        });
        function view_code (id) {
            var btn_text =  document.getElementById(id).children[0].innerText;
            var style;
            var status;
            if(btn_text == 'view code') {
                style = '""';
                status = 'hide code';
            } else {
                style = 'display: none;';
                status = 'view code';
            }
            document.getElementById(id).children[0].innerText = status;
            document.getElementById(id).children[1].style = style;
        }
</script>

方案二

来自文章 博客园 Markdown 语法折叠代码块,并支持内嵌 Markdown 语法+HTML

写文章的时候,手动加入 Markdown 的折叠标签:

 <details> <summary>view code</summary>
​```css
code ...
​```
</details>

注意!「博客园 Markdown」的 <details> 标签前面不能为空,要有字符或者空格(不知道为什么,纯粹的 Markdown 不需要这么做)。里面可以嵌套使用 Markdown 语法和 HTML 语法。

根据自己的需求自定义 CSS 样式:

/* 定制 Markdown 折叠效果 */
#cnblogs_post_body details summary {
    background: #F0F8FF;
}
#cnblogs_post_body details summary:hover {
    cursor: pointer;
    background: #F0F8FF;
}

添加目录导航

方案一

来自文章 博客园随笔中添加目录导航悬浮框

页面定制 CSS 代码:

view code
 /*  侧边栏  */
 /*生成博客目录的CSS*/
 #uprightsideBar{
     font-size:12px;
     font-family:Arial, Helvetica, sans-serif;
     text-align:left;
     position:fixed;/*将div的位置固定到距离top:50px,right:0px的位置,这样div就会处在最右边的位置,距离顶部50px*/
     top:250px;
     //right:265px;
     width: auto;
     height: auto; 
 }
 #sideBarTab{
     float:left;
     width:30px; 
     border:1px solid #0a0a0a;
     //border-right:none;
     text-align:center;
     background:#ffffff;
 }
 #sideBarContents{
     float:left;
     overflow:auto; 
     overflow-x:hidden;!important;
     width:200px;
     min-height:108px;
     max-height:460px;
     border:1px solid #000;
     //border-right:none; 
     background:#ffffff;
 }
 #sideBarContents dl{
     margin:0;
     padding:0;
 }
 #sideBarContents dt{
     margin-top:5px;
     margin-left:5px;
 }
 #sideBarContents dd, dt {
     cursor: pointer;
 }
 #sideBarContents dd:hover, dt:hover {
     color:#A7995A;
 }

页首 HTML 代码:

view code
<!-- 目录导航 -->
<script type="text/javascript">
 var BlogDirectory = {
     /*
         获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top)
     */
     getElementPosition:function (ele) {        
         var topPosition = 0;
         var leftPosition = 0;
         while (ele){              
             topPosition += ele.offsetTop;
             leftPosition += ele.offsetLeft;        
             ele = ele.offsetParent;     
         }  
         return {top:topPosition, left:leftPosition}; 
     },

     /*
     获取滚动条当前位置
     */
     getScrollBarPosition:function () {
         var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
         return  scrollBarPosition;
     },

     /*
     移动滚动条,finalPos 为目的位置,internal 为移动速度
     */
     moveScrollBar:function(finalpos, interval) {

         //若不支持此方法,则退出
         if(!window.scrollTo) {
             return false;
         }

         //窗体滚动时,禁用鼠标滚轮
         window.onmousewheel = function(){
             return false;
         };

         //清除计时
         if (document.body.movement) { 
             clearTimeout(document.body.movement); 
         } 

         var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

         var dist = 0; 
         if (currentpos == finalpos) {//到达预定位置,则解禁鼠标滚轮,并退出
             window.onmousewheel = function(){
                 return true;
             }
             return true; 
         } 
         if (currentpos < finalpos) {//未到达,则计算下一步所要移动的距离
             dist = Math.ceil((finalpos - currentpos)/10); 
             currentpos += dist; 
         } 
         if (currentpos > finalpos) { 
             dist = Math.ceil((currentpos - finalpos)/10); 
             currentpos -= dist; 
         }

         var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
         window.scrollTo(0, currentpos);//移动窗口
         if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部,则解禁鼠标滚轮,并退出
         {
             window.onmousewheel = function(){
                 return true;
             }
             return true;
         }

         //进行下一步移动
         var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 
         document.body.movement = setTimeout(repeat, interval); 
     },

     htmlDecode:function (text){
         var temp = document.createElement("div");
         temp.innerHTML = text;
         var output = temp.innerText || temp.textContent;
         temp = null;
         return output;
     },

     /*
     创建博客目录,
     id表示包含博文正文的 div 容器的 id,
     mt 和 st 分别表示主标题和次级标题的标签名称(如 H2、H3,大写或小写都可以!),
     interval 表示移动的速度
     */
     createBlogDirectory:function (id, mt, st, interval){
          //获取博文正文div容器
         var elem = document.getElementById(id);
         if(!elem) return false;
         //获取div中所有元素结点
         var nodes = elem.getElementsByTagName("*");
         //创建博客目录的div容器
         var divSideBar = document.createElement('DIV');
         divSideBar.className = 'uprightsideBar';
         divSideBar.setAttribute('id', 'uprightsideBar');
         var divSideBarTab = document.createElement('DIV');
         divSideBarTab.setAttribute('id', 'sideBarTab');
         divSideBar.appendChild(divSideBarTab);
         var h2 = document.createElement('H2');
         divSideBarTab.appendChild(h2);
         var txt = document.createTextNode(''︻目  录︼');
         h2.appendChild(txt);
         var divSideBarContents = document.createElement('DIV');
         divSideBarContents.style.display = 'none';
         divSideBarContents.setAttribute('id', 'sideBarContents');
         divSideBar.appendChild(divSideBarContents);
         //创建自定义列表
         var dlist = document.createElement("dl");
         divSideBarContents.appendChild(dlist);
         var num = 0;//统计找到的mt和st
         mt = mt.toUpperCase();//转化成大写
         st = st.toUpperCase();//转化成大写
         //遍历所有元素结点
         for(var i=0; i<nodes.length; i++)
         {
             if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)    
             {
                 //获取标题文本
                 var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签,所以用正则表达式去除HTML的标签
                 nodetext = nodetext.replace(/&nbsp;/ig, "");//替换掉所有的&nbsp;
                 nodetext = BlogDirectory.htmlDecode(nodetext);
                 //插入锚        
                 nodes[i].setAttribute("id", "blogTitle" + num);
                 var item;
                 switch(nodes[i].nodeName)
                 {
                     case mt:    //若为主标题 
                         item = document.createElement("dt");
                         break;
                     case st:    //若为子标题
                         item = document.createElement("dd");
                         break;
                 }

                 //创建锚链接
                 var itemtext = document.createTextNode(nodetext);
                 item.appendChild(itemtext);
                 item.setAttribute("name", num);
                 item.onclick = function(){        //添加鼠标点击触发函数
                     var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
                     if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;
                 };            

                 //将自定义表项加入自定义列表中
                 dlist.appendChild(item);
                 num++;
             }
         }

         if(num == 0) return false; 
         /*鼠标进入时的事件处理*/
         divSideBarTab.onmouseenter = function(){
             divSideBarContents.style.display = 'block';
         }
         /*鼠标离开时的事件处理*/
         divSideBar.onmouseleave = function() {
             divSideBarContents.style.display = 'none';
         }

         document.body.appendChild(divSideBar);
     }

 };

 window.onload=function(){
     /*页面加载完成之后生成博客目录*/
     BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);
 }
 </script>

方案二

来自文章 博客园设置目录:版本1。被我抛弃了,显示的目录效果不尽人意。

页首 HTML 代码:

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://files.cnblogs.com/files/mingjiatang/mystyle.css" rel="stylesheet">
<script type="text/javascript" src="https://files.cnblogs.com/files/mingjiatang/mycnblogs.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/files/mingjiatang/mystyle.js"></script>

页面定制 CSS 代码:

#sideCatalog-catalog{
    overflow: auto!important;
}

#sideCatalog-catalog::-webkit-scrollbar {
    display: none;
}

/*目录默认是在右边的,把它移到左边 */
#sideToolbar{
    right: auto!important;
}

方案三

来自文章 [学习交流]博客园 cnblog 添加 github 链接和自定义美化学习

<script src="https://files.cnblogs.com/files/ECJTUACM-873284962/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/ECJTUACM-873284962/marvin.nav.css">
<script type="text/javascript" src="https://files.cnblogs.com/files/ECJTUACM-873284962/marvic.nav.js"></script>

添加 GitHub 角标

进入 GitHub Corners,选择自己钟意的样式,拷贝对应的代码。将超链接 ahref 属性替换为你的 GitHub 地址。然后将代码粘贴到 页首 HTML 代码

<!-- GitHub 角标 -->
<a href="https://github.com/YourGithubID" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:hsla(0,0%,100%,.3); color:#999; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

说明:

<a href="https://github.com/YourGithubID">
// 替换为自己的 GitHub 地址。

<svg style="fill:hsla(0,0%,100%,.3); color:#999; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
// 背景颜色:fill:hsla(0,0%,100%,.3);
// 图标颜色:color:#999;
// 位置:top: 0; right: 0;

右上角黑底白图标:

<a href="https://your-url" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

左上角黑底白图标:

<a href="https://your-url" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style></a>

添加网站图标 Favicon

来自文章 cnblog 博客园自定义样式修改标签页的 icon 图标

获取博客园的颜色

每个人可能有多个站点,比如自己的静态博客和博客园,可以使用不同颜色的图标加以区分。利用 Chrome 扩展 Site Palette – Get the essential colours from a website,获取博客园的站点颜色。最终我选择 #306694 作为图标的背景色。至于图标,可以使用 字母头像生成器,或者使用 哈希头像生成器 生成一个头像,或者下载一个别人制作的图标。

调整图标文件

对图标文件进行颜色的修改后,将文件后缀改为 .ico。图标尺寸 256px 或者 512px。如果 png 文件体积太大,可以上传至 https://tinypng.com/ 压缩。

设置网站图标

我的博客 => 管理 => 文件 => 上传文件,上传图标,右键复制链接。

替换代码中 linkObject.href 为自己的图标地址,然后粘贴到 页脚 HTML 代码

<!-- 网站图标 Favicon -->
<script type="text/javascript" language="javascript">
  //Setting ico for cnblogs
  var linkObject = document.createElement('link');
  linkObject.rel = "shortcut icon";
  linkObject.href = "https://files.cnblogs.com/files/lingyejun/yanzi.ico";
  document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>

博客签名 / 版权说明

设置博客签名

我的博客 => 管理 => 博客签名 => 签名管理,标题随意,在内容中加入下面代码,然后 设为默认

<p style="background: rgb(230, 250, 230); padding: 10px 10px 10px 10px; border: 1px dashed rgb(224, 224, 224); font-family: 微软雅黑; font-size: 13px; text-indent: 0em">
作者:<a href="http://www.cnblogs.com/keatonlao/" target="_blank">keatonlao</a>
<br>
出处:<a href="http://www.cnblogs.com/keatonlao/" target="_blank">http://www.cnblogs.com/keatonlao/</a>
<br>
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
</p>

添加版权说明

代码来自 cnblogs_markdown_optimize_footer.js

显示在文章前面,将以下代码放在 页脚 HTML 代码

<script type="text/javascript">  
    var setMyBlog = {
        setCopyright: function() {
            //设置版权信息,转载出处自动根据页面url生成
            var info_str = '<p>作者:<a target="_blank">@gzdaijie</a><br>'+
                '本文为作者原创,转载请注明出处:<a class="uri"></a></p><hr></hr>', 
                info = $(info_str),
                info_a = info.find("a"),
                url = window.location.href;
            $(info_a[0]).attr("href","https://github.com/gzdaijie");
            $(info_a[1]).attr("href",url).text(url);
            $("#cnblogs_post_body").prepend(info);
        },
        
        runAll: function() {
            /* 运行所有方法
             * setCopyright() 设置版权信息
             */ 
            this.setCopyright();
        }
    }
    setMyBlog.runAll();
</script>

注意:

代码中 博客内链接在新窗口打开 的功能,会把 Markdown 目录导航也在新窗口打开,所以被我弃用。

显示在文章末尾,只需将 prepend 换为 append,然后在前面添加一条分割线 <hr></hr>

<script type="text/javascript">  
    var setMyBlog = {
        setCopyright: function() {
            //设置版权信息,转载出处自动根据页面url生成
            var info_str = '<hr></hr><p>作者:<a target="_blank">@gzdaijie</a><br>'+
                '本文为作者原创,转载请注明出处:<a class="uri"></a></p><hr></hr>', 
                info = $(info_str),
                info_a = info.find("a"),
                url = window.location.href;
            $(info_a[0]).attr("href","https://github.com/gzdaijie");
            $(info_a[1]).attr("href",url).text(url);
            $("#cnblogs_post_body").append(info);
        },
        
        runAll: function() {
            /* 运行所有方法
             * setCopyright() 设置版权信息
             */ 
            this.setCopyright();
        }
    }
    setMyBlog.runAll();
</script>

你可以把版权信息替换为一些自己想说的话展示。

添加 “返回顶部” 按钮

来自文章 博客园 添加 “返回顶部” 按钮。玩键盘的人可能更习惯 Home 一下。当然,如果在移动浏览器上访问的话,这个按钮还是很有用的。

页首 HTML 代码:

<!-- 返回顶部 -->
<span id="back-to-top"><a href="#top">返回顶部</a></span>

页面定制 CSS 代码:

#back-to-top {
    position: fixed;
    right:80px;
    bottom: 20px;
    z-index: 1001;
    padding: 5px 10px;
    border: 1px solid #D9DBE1;
    border-radius: 5px !important;
    background-color: hsla(0, 0%, 100%, .3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
}

简书版

仿照简书网的返回按钮。

页首 HTML 代码:

<!-- 回到顶部 -->
<span id="back-to-top"><a href="#top">
        <div id="back-to-top">
            <div class="back-to-top" role="button" tabindex="-1" aria-label="回到顶部"><i aria-label="icon: caret-up"
                    class="anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" focusable="false" class=""
                        data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                        <path
                            d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z">
                        </path>
                    </svg></i></div>
        </div>
    </a></span>

页面定制 CSS 代码:

/* 回到顶部按钮 */
#back-to-top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #8c8c8c;
    font-size: 18px;
    box-shadow: 0 1px 3px rgba(26,26,26,.1);
    background-color: #fff;

    position: fixed;
    right: 10%;
    bottom: 3%;
    z-index: 1001;
}

被我抛弃的功能

显示推荐按钮

让推荐和反对按钮一直显示。页面定制 CSS 代码:

/* 显示推荐按钮 */
#div_digg {
    padding: 10px;
    position: fixed;
    max-width: 46px;
    _position: absolute;
    z-index: 1000;
    bottom: 20px;
    right: 10px;
    _right: 5px;
    border: 1px solid #D9DBE1;
    background-color: hsla(0, 0%, 100%, .3);
    border-radius: 5px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
    text-align: center;
}

实现鼠标点击效果

仅供娱乐,不建议使用,影响阅读,会分散注意力。当你点击每个链接,都跳出一个东西来干扰你的时候,你就会认为,设置鼠标点击效果是一件多么操(不)蛋(好)的事情。

来自文章 实现鼠标点击效果和页首效果

中国特色化社会主义核心价值观 效果,将代码帖入 博客侧边栏公告

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    var a_idx = 0; jQuery(document).ready(function ($) {
        $("body").click(function (e) {
            var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"); var $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 100000000, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#ff6651" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function () { $i.remove(); });
        });
    });
</script>

css3 实现下划线动画效果

参考文章 css3 实现下划线动画效果

See also

posted on 2019-12-12 17:23  keatonlao  阅读(3189)  评论(0编辑  收藏  举报

导航