快捷搜索:
来自 计算机编程 2019-12-30 00:59 的文章
当前位置: 67677新澳门手机版 > 计算机编程 > 正文

详谈如何定制自身的天涯论坛四肢,新浪页面优

返回目录页

页首Html代码

在这里添加代码会被嵌入到博客园页面的 body 标签 下。

67677新澳门手机版 1

页面定制CSS代码

背景色网址

67677新澳门手机版 267677新澳门手机版 3

<!--此处自定义标题背景色-->
#cnblogs_post_body h1 {
    background: #265B8A;
    border-radius: 6px 6px 6px 6px;
    color: #FFFFFF;
    font-family: FZShuTi;
    font-size: 23px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 12px 0 8px 5px;
    text-shadow: 2px 2px 3px #222222;
    text-align:center;
    margin-bottom: 20px;
}
#cnblogs_post_body h2 {
background-color: #008FC6;
    border-radius: 3px;
    text-align:center;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding-left: 15px;
    margin-bottom: 12px;
}
#cnblogs_post_body h3 {
background-color: #51C332;
    border-radius: 3px;
    text-align:center;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding: 5px 15px;
    margin-bottom: 10px;
    width:50%
}
#cnblogs_post_body h4 {
    background-color: #5bc0de;
    border-radius: 3px;
    text-align:center;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding: 5px 15px;
    margin-bottom: 10px;
    width:25%
}
code {
    padding: 1px 3px;
    margin: 0 3px;
    background: #ddd;
    border: 1px solid #ccc;
    font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
    word-wrap: break-word;
    font-size: 14px;
}
#cnblogs_post_body table {
    text-align: center;
    width: 100%;
    border: 1px solid #dedede;
    margin: 15px 0;
    border-collapse: collapse;
}
#cnblogs_post_body table thead tr {
    background: #f8f8f8;
}
#cnblogs_post_body table tbody tr:hover {
    background: #efefef;
}

页面定制CSS代码

文章内容样式定制

有关文章内容的样式定制,我都写入了 cnblog.js 和 cnblog.css。当然,为了提高访问速度,这两个文件被我压缩了。

使用方式:添加以下代码到页首Html代码

<!-- 自定制样式文件以及脚本 -->
<script src="http://www.k-haruka-m.com/uploads/allimg/191230/0059434151-3.jpg"></script>
<link rel="stylesheet" href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.css" />

由于,我实在是懒得一一讲解代码,所以仅在下面罗列这两个文件支持的特性。如果想在我的源码基础上作一些修改,可以在这里访问源码:

cnblog.js
cnblog.css

页脚Html代码

67677新澳门手机版 467677新澳门手机版 5

<script language="javascript" type="text/javascript">
// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{
    var mainContent = $('#cnblogs_post_body');
    var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if(mainContent.length < 1)
        return;

    if(h2_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content  = '<div id="navCategory" style="color:#152e97;">';
        content  = '<p style="font-size:18px;"><b>目录</b></p>';
        content  = '<ul>';
        for(var i=0; i<h2_list.length; i  )
        {
            var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">Top</a><a name="_label'   i   '"></a></div>';
            $(h2_list[i]).before(go_to_top);

            var h3_list = $(h2_list[i]).nextAll("h3");
            var li3_content = '';
            for(var j=0; j<h3_list.length; j  )
            {
                var tmp = $(h3_list[j]).prevAll('h2').first();
                if(!tmp.is(h2_list[i]))
                    break;
                var li3_anchor = '<a name="_label'   i   '_'   j   '"></a>';
                $(h3_list[j]).before(li3_anchor);
                li3_content  = '<li><a href="#_label'   i   '_'   j   '">'   $(h3_list[j]).text()   '</a></li>';
            }

            var li2_content = '';
            if(li3_content.length > 0)
                li2_content = '<li><a href="#_label'   i   '">'   $(h2_list[i]).text()   '</a><ul>'   li3_content   '</ul></li>';
            else
                li2_content = '<li><a href="#_label'   i   '">'   $(h2_list[i]).text()   '</a></li>';
            content  = li2_content;
        }
        content  = '</ul>';
        content  = '</div><p>&nbsp;</p>';
        content  = '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }   
}

GenerateContentList();
</script>

页脚Html代码

67677新澳门手机版 6

 

资料

github-corners

canvas-nest

codepen上的动画文字效果

美化博客园界面(让您的博客更加赏心悦目)希望对您有用

jQuery]3D效果的标签云

提示

方法一:有俩个文件需要自己上传到自己文件里(管理---文件---上传)

文件:

67677新澳门手机版 7.js文件

67677新澳门手机版 8.css文件

复制文件代码,在桌面新建文本文档,粘贴进去,修改文本文档名后缀为  .js    .css      

67677新澳门手机版 9

上传后分别点击文件,弹出新的页面后,页面内容就是你复制进去的内容,复制网址到页首、页脚html代码中替换我的网址就好了

 67677新澳门手机版 10

67677新澳门手机版 11

 

 67677新澳门手机版 12

 

百度分享栏

既然选择写博客,自然希望被更多人看到自己的文章。所以,添加一个分享栏,使得访客可以轻松将你的博客分享到各个社交平台是一个不错的功能。

效果图

67677新澳门手机版 13

进入 百度分享官方 页面,按照导航提示。

选择功能 > 设置按钮 > 设置图片按钮 > 获取代码。

将代码粘贴到博客园管理后台的博客侧边栏公告即可。

前言

本人小白一枚,弄这个也是查了好多资料,下面推荐几个网址,也就是我借鉴的网址

网址1    网址2    背景色网址

 

页面定制CSS代码

在这里添加的 css 代码会被博客园添加到一个临时 css 文件中,并用于渲染你的博客页面。

67677新澳门手机版 14

注意

如果勾选 禁用模板默认CSS ,则你选中的博客皮肤的 css 效果将失效。

方法一:右下角目录

页脚Html代码

在这里添加代码会被嵌入到博客园页面的 body 标签 下。

67677新澳门手机版 15

说明

从两个截图不难看出,在博客园管理后台的页首或页脚输入框写入代码,并无区别。

页首、页脚Html代码

67677新澳门手机版 1667677新澳门手机版 17

<link  type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/zss0520/zss.css">

67677新澳门手机版 ,页首Html代码

67677新澳门手机版 1867677新澳门手机版 19

<script src="http://www.k-haruka-m.com/uploads/allimg/191230/0059433412-20.jpg"></script>

页脚Html代码

67677新澳门手机版 20

Github 角

作为程序员,总该有个 github 账户吧。可以使用 GitHub Corners 将博客和 Github 账户关联起来。

效果图

67677新澳门手机版 21

点击右上角,就可以跳转到 Github,还是挺帅气的。

使用方式如下:

进入 GitHub Corners ,选择自己钟意的 Github 角样式,拷贝对应的代码。记得将超链接 ahref 属性替换为你的 github 地址。

然后将代码粘贴到页首Html代码

方法二:在顶部显示目录 

只有标题2、标题3.俩种分类

动态标题

闲逛 codepen 时找到的一个动态文字效果:codepen上的动画文字效果,觉得还挺炫的。我做了一个简单的移植。

效果图

67677新澳门手机版 22

使用方式:粘贴如下代码到页首Html代码即可。

<script src="http://www.k-haruka-m.com/uploads/allimg/191230/005943IV-24.jpg"></script>
<link rel="stylesheet" href="https://files.cnblogs.com/files/jingmoxukong/title.min.css" />

以上引用文件被我压缩了,源码在我的 Github 上:

  • title.js
  • title.css

如果你也想使用这种动态标题,需要对源码做一些修改

// 为了渲染 cavans 效果的标题,生成一个 title 列表
function generateBlogTitle() {
  var root=document.createElement("div");
  root.id='ui';
  for (var i=0; i < 50; i  ) {
    var node=document.createElement("div");
    node.className='text';
    node.innerHTML='静默虚空';
    root.appendChild(node);
  }
  document.getElementById("blogTitle").appendChild(root);

  var subTitle=document.createElement("h2");
  subTitle.innerHTML='Talk is cheap, show me the code.';
  document.getElementById("blogTitle").appendChild(subTitle);
}

将上面代码中的 node.innerHTML='静默虚空'; 替换为你的主标题;

subTitle.innerHTML='Talk is cheap, show me the code.'; 替换为你的子标题。

另外,需要将博客管理后台的主标题、子标题清空。

67677新澳门手机版 23

页面定制css代码

背景色网址

67677新澳门手机版 2467677新澳门手机版 25

<!--此处自定义标题背景色-->
#cnblogs_post_body h1 {
    background: #265B8A;
    border-radius: 6px 6px 6px 6px;
    color: #FFFFFF;
    font-family: FZShuTi;
    font-size: 23px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 12px 0 8px 5px;
    text-shadow: 2px 2px 3px #222222;
    text-align:center;
    margin-bottom: 20px;
}
#cnblogs_post_body h2 {
background-color: #008FC6;
    border-radius: 3px;
    text-align:center;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding-left: 15px;
    margin-bottom: 12px;
}
#cnblogs_post_body h3 {
background-color: #51C332;
    border-radius: 3px;
    text-align:center;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding: 5px 15px;
    margin-bottom: 10px;
    width:50%
}
#cnblogs_post_body h4 {
    background-color: #5bc0de;
    border-radius: 3px;
    text-align:center;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding: 5px 15px;
    margin-bottom: 10px;
    width:25%
}
code {
    padding: 1px 3px;
    margin: 0 3px;
    background: #ddd;
    border: 1px solid #ccc;
    font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
    word-wrap: break-word;
    font-size: 14px;
}
#cnblogs_post_body table {
    text-align: center;
    width: 100%;
    border: 1px solid #dedede;
    margin: 15px 0;
    border-collapse: collapse;
}
#cnblogs_post_body table thead tr {
    background: #f8f8f8;
}
#cnblogs_post_body table tbody tr:hover {
    background: #efefef;
}

页面定制css代码

67677新澳门手机版 26

背景动画

效果图就不上了,各位看官请直接看我的博客背景动画,还是挺有趣的吧。

我的背景动画是我在闲逛 Github 时找到的动画效果。其原理就是基于 HTML5 新特性 canvas,渲染的动画效果。有兴趣可以访问一下:动画库原地址

使用方法:

粘贴以下代码到页首Html代码

<!-- 背景动画 -->
<canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
<script src="http://www.k-haruka-m.com/uploads/allimg/191230/0059434495-29.jpg"></script>

这段代码的意思就是定义一个 canvas 元素,然后使用我下载的 canvas-nest.min.js 库文件去渲染动画。

 博客侧边栏公告(支持HTML代码)(支持JS代码)

67677新澳门手机版 2767677新澳门手机版 28

<script type="text/javascript">
      //以下是锚点JS
      var a = $(document);
      a.ready(function() {
        var b = $('body'),
          d = 'sideToolbar',
          e = 'sideCatalog',
          f = 'sideCatalog-catalog',
          g = 'sideCatalogBtn',
          h = 'sideToolbar-up',
          i = '<div id="sideToolbar"style="display:none;"><div class="sideCatalogBg"id="sideCatalog"><div id="sideCatalog-sidebar"><div class="sideCatalog-sidebar-top"></div><div class="sideCatalog-sidebar-bottom"></div></div><div id="sideCatalog-catalog"><ul class="nav"style="width:225px;zoom:1"></ul></div></div><a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable"></a></div>',
          j = '',
          k = 200,
          l = 0,
          m = 0,
          n = 0,
          //限制存在个数,如数量过多,则只显示h2,不显示h3
          //o, p = 13,
          o, p = 100,
          q = true,
          r = true,
          s = b;
        if(s.length === 0) {
          return
        };
        b.append(i);
        //指定获取目录的范围-------------这一点非常重要,因为每个人指定的范围都不一样,所以这是要修改的地方
        //o = s.find(':header');
        o = $('#cnblogs_post_body').find(':header')
        if(o.length > p) {
          r = false;
          var t = s.find('h2');
          var u = s.find('h3');
          if(t.length   u.length > p) {
            q = false
          }
        };
        o.each(function(t) {
          var u = $(this),
            v = u[0];

          var title = u.text();
          var text = u.text();

          u.attr('id', 'autoid-'   l   '-'   m   '-'   n)
          //if (!u.attr('id')) {
          //    u.attr('id', 'autoid-'   l   '-'   m   '-'   n)
          //};
          if(v.localName === 'h2') {
            l  ;
            m = 0;
            if(text.length > 14) text = text.substr(0, 20)   "...";
            j  = '<li>'   l   '&nbsp&nbsp<a href="#'   u.attr('id')   '" title="'   title   '">'   text   '</a></li>';
          } else if(v.localName === 'h3') {
            m  ;
            n = 0;
            if(q) {
              if(text.length > 12) text = text.substr(0, 16)   "...";
              j  = '<li class="h2Offset">'   l   '.'   m   '&nbsp&nbsp<a href="#'   u.attr('id')   '" title="'   title   '">'   text   '</a></li>';
            }
          } else if(v.localName === 'h4') {
            n  ;
            if(r) {
              j  = '<li class="h3Offset">'   l   '.'   m   '.'   n   '&nbsp&nbsp<a href="#'   u.attr('id')   '" title="'   title   '">'   u.text()   '</a></li>';
            }
          }
        });
        $('#'   f   '>ul').html(j);
        b.data('spy', 'scroll');
        b.data('target', '.sideCatalogBg');
        $('body').scrollspy({
          target: '.sideCatalogBg'
        });
        $sideCatelog = $('#'   e);
        $('#'   g).on('click', function() {
          if($(this).hasClass('sideCatalogBtnDisable')) {
            $sideCatelog.css('visibility', 'hidden')
          } else {
            $sideCatelog.css('visibility', 'visible')
          };
          $(this).toggleClass('sideCatalogBtnDisable')
        });
        $('#'   h).on('click', function() {
          $("html,body").animate({
            scrollTop: 0
          }, 500)
        });
        $sideToolbar = $('#'   d);

        //通过判断评论框是否存在显示索引目录
        var commentDiv = $("#blog-comments-placeholder");

        a.on('scroll', function() {
          //评论框存在才调用方法
          if(commentDiv.length > 0) {
            var t = a.scrollTop();
            if(t > k) {
              $sideToolbar.css('display', 'block');
              $('#gotop').show()
            } else {
              $sideToolbar.css('display', 'none')
              $('#gotop').hide()
            }
          }
        })
      });
      //以上是锚点JS
      //以下是返回顶部JS
      $(function() {
        $('body').append('<div id="gotop" onclick="goTop();"></div>');
      });

      function goTop(u, t, r) {
        var scrollActivate = !0;
        if(scrollActivate) {
          u = u || 0.1;
          t = t || 16;
          var s = 0,
            q = 0,
            o = 0,
            p = 0,
            n = 0,
            j = 0;
          document.documentElement && (s = document.documentElement.scrollLeft || 0, q = document.documentElement.scrollTop || 0);
          document.body && (o = document.body.scrollLeft || 0, p = document.body.scrollTop || 0);
          n = window.scrollX || 0;
          j = window.scrollY || 0;
          s = Math.max(s, Math.max(o, n));
          q = Math.max(q, Math.max(p, j));
          p = 1   u;
          window.scrollTo(Math.floor(s / p), Math.floor(q / p));
          0 < s || 0 < q ? window.setTimeout('goTop('   u   ', '   t   ')', t) : 'undefined' != typeof r && r()
        } else {
          scrollActivate = !0
        }
      }
      //以上是返回顶部JS
    </script>

博客侧边栏公告(支持HTML代码)(支持JS代码)

67677新澳门手机版 29

动画时钟

效果图

67677新澳门手机版 30

我在 学习来的。将以下代码粘贴到博客侧边栏公告即可。

<embed wmode="transparent" src="http://www.k-haruka-m.com/uploads/allimg/191230/0059434K5-34.jpg" quality="high" bgcolor="#FDF6E3" width="240" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

67677新澳门手机版 31

 

响应式布局

我对于博客做了一些简单的响应式布局处理。使得读者在移动端上访问时不至于有过于糟糕的体验。

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

@media only screen and (max-width: 736px) {
  #navigator {
    width: 90%;
    margin: auto;
    float: none;
  }

  #mainContent {
    width: 90%;
    margin: auto;
    float: none;
  }

  #sideBar {
    width: 90%;
    margin: auto;
    float: none;
  }

  ...

效果图

67677新澳门手机版 32

标签云

效果图

67677新澳门手机版 33

我从 学习的。

使用方式如下:

粘贴以下代码到页首Html代码

<!-- 标签云相关库 -->
<script src="http://www.k-haruka-m.com/uploads/allimg/191230/0059434944-38.jpg"></script>
<script src="http://www.k-haruka-m.com/uploads/allimg/191230/0059432c7-39.jpg" type="text/javascript" charset="utf-8"></script>
<script src="http://www.k-haruka-m.com/uploads/allimg/191230/0059435460-40.jpg" type="text/javascript" charset="utf-8"></script>
<script src="http://www.k-haruka-m.com/uploads/allimg/191230/0059435L4-41.jpg" type="text/javascript" charset="utf-8"></script>

<!-- 定时器 -->
<script>
function customTimer(inpId, fn) {
  if ($(inpId).length) {
    fn();
  }
  else {
    var intervalId = setInterval(function () {
      if ($(inpId).length) {  //如果存在了
        clearInterval(intervalId);  // 则关闭定时器
        customTimer(inpId, fn);              //执行自身
      }
    }, 100);
  }
}
function generateTagClouds() {
  $('.catListTag>ul').wrap('<div class='wrap' ></div>').parent().css({ 'width': '240px', 'height': '240px' });

  var options = {
    'range': [-200, 300],
    'gravity': -10,
    'xPos': 0.5,
    'yPos': 0.5,
    'gravityVector': [0, 0, 1],
    'interval': 100,
    'hoverGravityFactor': 0
  };

  $('div.wrap').starfieldTagCloud(options);
}
$(function () {
  ...
  customTimer('.catListTag', generateTagClouds);
  ...
});
</script>

定制博客园 CSS 的原理

为了帮助理解,说明这些输入框的作用时,我都截取了浏览器开发者工具的截图。

说明

市场上流行的浏览器基本上都支持开发者工具,一般快捷键为 F12。你可以在 Elements 栏看到你的页面中添加的元素。

本文由67677新澳门手机版发布于计算机编程,转载请注明出处:详谈如何定制自身的天涯论坛四肢,新浪页面优

关键词: