博客园主题定制

最新推荐文章于 2023-09-01 17:23:27 发布

weixin_30872671

最新推荐文章于 2023-09-01 17:23:27 发布

阅读量560

点赞数

文章标签： matlab javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/gshang/p/11526457.html

版权

写在前面

本次博客主题定制，主要参考了以下几位大佬的博客，在此表示衷心的感谢！

主题特色

本博客定制的主题，采取禁用 CSS 样式的方式，全面修改博客园默认样式，结合 JS 脚本实现元素的增删修改等，制作时间一共耗时三天。下面展示主题定制的主要内容：

整体风格

主题的整体风格为亮色，背景设为灰白色，板块之间统一间隔为20px，使得网页布局清晰明了，阅读体验感更舒适。

顶部导航栏

nav

顶部的导航栏采取和通常导航栏样式，即左右两边空出，主要宽度与内容宽度一致。在导航栏里，我还将搜索框移动到了里面，方便查询一些博客。

首页轮播

banner

首页轮播是我在其他网页素材网站找到的 demo 修改而成的，主要放置一些我想分享给园友的内容。比如视频解析、我喜欢的动漫、实用工具等等。

侧边板块

news

侧边的板块，我主要修改了公告部分，将个人信息整合到一起，看起来更直观。此外，根据我的个人喜好，添加了教学日历（其实也没上课了，就是想看下时间，懒得翻教务处的教学周），以及联系方式。

首页博文摘要

post_pic

post_text

这里主要适配了两种样式，即带图的和不带图的。之前做的主题用 js 调整图片文字位置，导致如果博文没有文字时，图片就会被挪错位置，这样很不好！因为毕竟不是每一篇博文都想插个图。

页脚

footer

页脚基本没改，但是加了一个站长工具，这个用来统计访问的。

博文正文

postbody

博文正文的风格定制样式为 Github 样式，看起来十分舒服。其中我还修复了表格不能居中滚动的问题。

博文代码复制

code

由于之前设计了 MATLAB 语法高亮导致代码不能复制，这里我重新设计了代码复制的功能以及布局。现在既可以复制用markdown格式写的代码，又可以复制用 <pre> 标签包裹的 MATLAB 定制的代码。

博文支持与反对

dig

之前的主题可以捐赠和收藏，在这里我就没有弄了，好像也没有人捐赠，用不着，来了留个言就可以的。

博客评论

comment

评论的样式和之前的代码一样，样式没有变。

博客目录

content

感觉这次最大的改进就是博客目录了，当前章节会随着页面滚动高亮，并且下滑时，直接置顶固定，阅读体验十分舒服。

主题配置

主题完全开源，但是很多东西都是我一点点往上加的，所以不具有那种全局性。具体要修改的地方你可以根据效果手动调整（主要是那些资源链接）。

页面定制CSS代码

粘贴代码，然后禁用主题。点击查看代码

博客侧边栏公告

<style>
.myprofile {
        margin: 20px 0 0 0;
        /*display: table;*/
        /*width:100%;*/
        height: auto;
    }

    .myprofile-bottom {
        padding: 20px 0;
        border-top: 1px solid #F4F4F4;
    }

    .myprofile-top {
        display: inline-flex;
        margin: 0px auto 20px auto;
        */
    }

    .avatar {
        width: 80px;
        float: left;
    }

    .avatar img {
        width: 100%;
        /*height: 100%;*/
        border: 1px solid #ddd;
        border-radius: 50%;
    }

    .profile-info {
        float: left;
        margin-left: 20px;
    }

    .nickname {
        font-size: 20px;
        line-height: 30px;
        font-weight: 600;
    }

    #mywords {
        line-height: 20px;
    }

    .myprofile ul {
        columns: 3;

    }

    .myprofile ul li {
        text-align: center;
        list-style-type: none;
        line-height: 20px;

    }


</style>

<script type="text/javascript">
    $('#navigator').append($('#widget_my_zzk'));
    $('#sidebar_search').remove();
    $("#profile_block a").each(function(idx) {
        if (idx == 1) {
            $('#myyear').html('园龄<br>' + $(this).context.innerText);
        }
        if (idx == 2) {
            $('#myfollower').html('粉丝<br>' + $(this).context.innerText);
        }
        if (idx == 3) {
            $('#myfollowee').html('关注<br>' + $(this).context.innerText);
        }
    });
    $('#profile_block').css('display', 'none');
    $('#mywords').html('Stay hungry，Stay foolish .');
    $('#mypost').html($('#stats_post_count').text().replace(/\-/g, "<br>"));
    $('#myarticle').html($('#stats_article_count').text().replace(/\-/g, "<br>"));
    $('#mycomment').html($('#stats-comment_count').text().replace(/\-/g, "<br>"));
</script>


<div class="myprofile">
    <div class="myprofile-top">
        <a class="avatar" href="https://home.cnblogs.com/u/gshang/">
            <img src="https://pic.cnblogs.com/avatar/1489774/20190708183140.png" alt="240">
        </a>
        <div class="profile-info">
            <a class="nickname" href="https://home.cnblogs.com/u/gshang/">
                GShang
            </a>
            <p id="mywords"></p>
        </div>
    </div>
    <div class="myprofile-bottom">
        <ul>
            <li><a href="https://home.cnblogs.com/u/gshang/" id="myyear">
                </a>
            </li>
            <li><a href="https://home.cnblogs.com/u/gshang/followers/" id="myfollower">
                </a>
            </li>
            <li><a href="https://home.cnblogs.com/u/gshang/followees/" id="myfollowee">
                </a>
            </li>
        </ul>
    </div>
    <div class="myprofile-bottom">
        <ul>
            <li id="mypost">
            </li>
            <li id="myarticle">
            </li>
            <li id="mycomment">
            </li>
        </ul>
    </div>
</div>

页脚Html代码

<!--主题脚本-->
<script src="https://gitee.com/j-x/home/raw/master/Theme.js"></script>
<!--代码复制-->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<!--文章目录-->
<script src="http://files.cnblogs.com/files/ctxsdhy/scrollspy.js"></script>
<script src="http://files.cnblogs.com/files/ctxsdhy/stickUp.min.js"></script>
<script src="http://files.cnblogs.com/files/jackson0714/Comments.js"></script>
<!--符号-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<!--语法高亮-->
<!--<script src="https://blog-static.cnblogs.com/files/gshang/highlight.pack.js"></script>
<script> hljs.initHighlightingOnLoad(); </script> -->

<script src="https://blog-static.cnblogs.com/files/gshang/matlab-highlight.js"></script>
<script>
    highlightMATLABCode();
</script>

<!--自定义语法-->
<script src="https://gitee.com/j-x/home/raw/master/mymd.js"></script>

<!--放大图片-->
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.9);z-index:999999999;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" src="" />
    </div>
</div>

<!--页脚站长工具-->
<div id="page_end_html">
    站长工具：<script src="https://js.users.51.la/20325957.js"></script>
</div>

写在最后

前端开发是一件十分有意思的事情，按照自己的喜好去实现个性化定制，这感觉太棒了！但是，话说回来，比起第一位大佬，我的这个主题太小儿科了，很多东西都是东拼西凑的，不够简洁，不够全局化，希望后期能慢慢改进把！

转载于:https://www.cnblogs.com/gshang/p/11526457.html

weixin_30872671

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
博客园主题定制

写在前面本次博客主题定制，主要参考了以下几位大佬的博客，在此表示衷心的感谢！@esofar@Dy1an@syxsdhy@Jackson0714主题特色本博客定制的主题，采取禁用 CSS 样式的方式，全面修改博客园默认样式，结合 JS 脚本实现元素的增删修改等，制作时间一共耗时三天。下面展示主题定制的主要内容：整体风格主题的整体风格为亮色，背景设为灰白色，板块之间统...
复制链接

扫一扫