关于博客的简单美化

关于博客的简单美化

之前曾经是有过一个基于\(Github\)的博客的，但是代码的操控不是特别熟悉，在就博客里面还发了关于\(Blog\)转移的文章Lomen，但是后来由于某种\(unfortunately\)的原因它挂掉了（我搞了一个星期的博客啊！！！），现在只有一个空荡荡的\(README\)文件挂在上面。

因此短时间内不考虑\(Github\)的博客了，转手进行博客园美化。

博客今本上是照着\(\_rqy\)的“Next”模式依葫芦画瓢的，但是因为\(cnblogs\)的功能并没有\(Hexo\)那么强，因此差距还是略微比较大，但是还是有比较独特的地方的。

先上页面定制\(CSS\)

整体框架

https://blog-static.cnblogs.com/files/Yeasio-Nein/Page_CSS.css

上面这个网站保存的是我本地的整个CSS。

可以看到最上面的一大坨叠到一起的是博客的整体框架。这里选用的基本皮肤是Custom，（可别勾上了禁用模板CSS）。

接下来的那个注释叫"\(comment~area\)"的是我评论框里面趴着的那个橙色头发的孩子，我觉得很有爱，就粘上了。

接下来是每篇文章都会有的背景里面的姑娘，当然如果有代码部分的话是会被遮住的。以上两个模块大家觉得不好看的话可以删掉。

接下来是侧边栏。

侧边栏

侧边栏是基本所有的代码类型都支持的，HTML和JS都支持，因此大多数的东西都放在这里面。首先是最上面的头像.

<img id="preview_large" alt="" src="https://example.png" class="preview-image" style=""/>

把上面的https://example.png换成你的头像地址就可以啦！有时可能照片比较大，建议用画图缩小一下。

下面各种东西的链接就很简单了..

<a target="_blank" href="https://example.com" style="text-decoration:none;">Example</a>

就是这种格式啦。

然后是鼠标特效，我觉得花花的颜色不是很好看，配上我得纯白背景，就改成了黑色的。

<div id="hitokoto"><script>hitokoto()</script></div>
<script type="text/javascript">
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array("Example1","Example2");
            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": 1,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "black"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            3000,
            function() {
                $i.remove();
            });
        });
    });
</script>

把里面的\("Example"\)换成你想要的文字就可以啦，下面的\(color\)可以修改文字颜色。

<script type="text/javascript" src="https://api.lwl12.com/hitokoto/main/get?encode=js&charset=utf-8"></script><div id="lwlhitokoto"><script>lwlhitokoto()</script></div>

上面这个是引用的一言~

<script src="https://blog-static.cnblogs.com/files/Yeasio-Nein/silence.min.js"></script>

<script type="text/javascript">
    $.silence();
</script>

少了上面这个代码你的侧边栏就没有啦~

<script type="taxt/javascript">
//浏览器标题切换
var OriginTitile = document.title;    // 保存之前页面标题
var titleTime;
document.addEventListener('visibilitychange', function(){
    if (document.hidden){
        document.title = '“苏浅呀” 我等你回来呢';
        clearTimeout(titleTime);
    }else{
        document.title = '呐，陪我去划船吧~';
        titleTime = setTimeout(function() {
            document.title = OriginTitile;
        }, 2000); // 2秒后恢复原标题
    }
});
</script>

如题~~

其实我没有再搞网站的头像，感觉不是很好看，博客园的默认还是可以的啦...

页首

首先是右上角的\(github\)的小插件，我给搞成了黑白色的，大家也可以改成自己喜欢的颜色~

<a href="https://github.com/Yeasion" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:black; color:white; 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>

然后下面这个就是背景的动画，会跟着你鼠标走的线条~

<canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
<script src="https://files.cnblogs.com/files/jingmoxukong/canvas-nest.min.js"></script>

下面这个东西是加载的线条，我不小心搞成了非常粗的黑线，感觉还行，就没再改。。。

<script>
{
function getElementsByClass(key){
var arr = new Array();
var tags=document.getElementsByTagName("*");
    for(var i=0;i<tags.length;i++){
        if(tags[i].className.match(new RegExp('(\\s|^)'+key+'(\\s|$)'))){
            arr.push(tags[i]);
        }
    }
return arr;
}
var timer = window.setInterval(function(){
    var el = getElementsByClass('pace');
    if(el.length>0){
        var a = document.createElement('div');
        a.setAttribute('class', 'spinner');
        var b = document.createElement('div');
        b.setAttribute('class', 'spinner-icon');
        el[0].appendChild(a);
        a.appendChild(b);
        window.clearInterval(timer);
    }
}, 3);
}
</script>
<style>
.pace .spinner {
position: fixed;
top: 15px;
right: 15px;
z-index: 2000;
display: block;
}
.pace .spinner-icon {
width: 18px;
height: 18px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: black;
border-left-color: black;
border-radius: 50%;
-webkit-animation: nprogress-spinner .4s linear infinite;
animation: nprogress-spinner .4s linear infinite;
}
@-webkit-keyframes nprogress-spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);    

}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes nprogress-spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-transition: opacity 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
.pace-inactive {
opacity:0;
filter: alpha(opacity=0);
}
.pace .pace-progress {
background: black;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 10px;
box-shadow: 0 0 3px #2299dd;
}
</style>
<!-- óòé???èy??

页脚

页脚没弄什么东西，本来是搞了一个小小的友链，后来觉得不好看，放在页脚也不大好，就删掉了，只保留了一个很可爱的\(live2d\)，里面的女孩子很有意思的，好像很多人都有这个玩意么...

<style type="text/css">@import url(//fonts.googleapis.com/css?family=Kelly+Slab|Raleway);</style>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D</title>

    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/kousak/waifu.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<body>
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/kousak/waifu.css">
    <div class="waifu" id="waifu">
        <div class="waifu-tips" style="opacity: 1;"></div>
        <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
        <div class="waifu-tool">
            <span class="fui-home"></span>
            <span class="fui-chat"></span>
            <span class="fui-eye"></span>
            <span class="fui-user"></span>
            <span class="fui-photo"></span>
            <span class="fui-info-circle"></span>
            <span class="fui-cross"></span>
        </div>
    </div>
    <script src="https://blog-static.cnblogs.com/files/Yeasio-Nein/live2d.js"></script>
    <script src="https://blog-static.cnblogs.com/files/Yeasio-Nein/waifu-tips.js"></script>
    <script type="text/javascript">initModel()</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>

直接粘上应该就能用了，但是有时候可能加载不出来，如果你那里的网速比较慢的话。

大概就是这些东西了，我没有添加很冗杂的插件，小仓鼠，挂钟什么的，感觉会比较乱...总的来说以简洁为主吧，希望能让有兴趣的人亮一亮眼睛。

\(SUE\)

原文地址：https://www.cnblogs.com/Yeasio-Nein/p/Blogs.html

时间： 2024-10-01 12:21:00

关于博客的简单美化的相关文章

博客园样式美化 II

前言 感谢大家对之前 博客园样式美化 的认可,我终于更新啦啦啦啦 更新内容 01 | 优化首页显示效果 优化前: 优化后: 有没有感觉瞬间立体起来了呢- 02 | 增加管理入口 这个很简单,就是导航条上加了个管理的入口 原本想设置为只有博主本人打开页面才能看到,后面发现只能判定有没有登录,不知道是不是博主本人,遂弃之- 03 | 可配置 这个大概是最重要的更新了吧... 将散落在各处的零散的和个人相关的链接,集中在一起,能自动获取的获取(如博主名称),不能自动获取的在页尾的js配置,达到开箱即用

博客园侧边栏美化及插件

博客园侧边栏美化及插件 1.vp计数 http://www.amazingcounters.com 2.来源地图 http://clustrmaps.com 原文地址:https://www.cnblogs.com/niuli1987/p/10306530.html

博客园的美化

前言 第一次写博客想从美化页面开始. 页首html代码 这里引入的是来自 https://www.cnblogs.com/jingmoxukong/p/7826982.html的 css文件 1 <!-- 自定制样式文件 --> 2 <link rel="stylesheet" href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.css" /> 3 4 <!-- 自

「奇技淫巧」博客园页面美化（差不多是划水

何为页面美化?永远没有止境的乱搞也.    ——hzz 教材: 博客园美化教程大集合----极致个性化你的专属博客(超详细,看这篇就够了) - 洪卫 - 博客园 原文地址:https://www.cnblogs.com/qwerta/p/9748410.html

博客园细节美化，打磨

原作者 感谢 @Summertime-Wu 巨佬写出这样漂亮简洁的主题,本蒟蒻是在原主题的基础上改的. 原主题地址:https://www.cnblogs.com/summertime-wu/p/9356736.html. 我的优化 添加 fork me on github 角标,节省菜单空间 在页首代码中添加了以下内容: <div class="forkme"> <a href="https://github.com/ethan-enhe">

关于此博客园及其美化

我的美化是从西窗夜雨\(dalao\)那里拿来二次开发的. 而这位\(dalao\)是这份美化的源头:自为风月马前卒. 我拿来之后修改了页首的部分参数,更换了所有的图片与链接/按钮. 同时去掉了一些本人认为意义不大的美化,所以我的博客看起来要相对简约一些. 我对自己的美化给出的\(label\)是\(Simple\:and\:light\).喜欢的小伙伴可以通过\(QQ\)私信或在本帖下评论索要. 当然也可以去找两位源头--终极源头和直接源头.至于博文嘛...我只能说博主水平不高...确实⑧太行

博客园页面美化

对以前的我来说,我觉得博客只有自己搭建的才有页面美化,像博客园这样的可能没有.但是,突然有一天在我查资料的时候,发现了一篇很好看的博客,我就留意了一下他的域名,发现竟然是博客园的.就开始决定把自己的博客弄的好看一点. 关于博客应该如何去美化,我就不讲了,自己去设置里面看的到,之后开启过JS权限之后就可以开始自己的美化了. 关于我为啥要写这篇博客,主要原因是,网上关于博客美化的博客太散了,没有那种比较全面的讲解,于是我就想弄一个,以便后面的人做个参考. 首先是选择博客的皮肤: 毕竟自己不能从零开始

Django 博客实现简单的全文搜索

作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 搜索是一个复杂的功能,但对于一些简单的搜索任务,我们可以使用 Django Model 层提供的一些内置方法来完成.现在我们来为我们的博客提供一个简单的搜索功能. 概述 博客文章通常包含标题和正文两个部分.当用户输入某个关键词进行搜索后,我们希望为用户显示标题和正文中含有被搜索关键词的全部文章.整个搜索的过程如下: 用户在搜素框中输入搜索关键词,假设为 "django",

博客个性化简单设置（1）

1.侧栏添加头像 修改下面代码中的图片地址为你个人头像的图片地址 <div class="head_img"><img width="120" height="120" alt="我的头像" src="//pic.cnblogs.com/avatar/1014286/20160824172911.png" class="img_avatar"><div>