zoukankan      html  css  js  c++  java
  • 博客园基础环境配置

    作者按:折腾了几天,期间也请教了几次博客大牛,终于把博客园配置成自己喜欢的样子了。记录一下过程。

    1. 博客页面功能添加

    1.1 博客园标题底纹功能

    博客园默认写博客的时候,没有类似于下图的标题底纹,需要自己设置

    image

    设置的地方在设置→页面定制CSS代码里,贴入如下代码即可:

      1 #cnblogs_post_body
      2 {
      3     color: black;
      4     font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
      5     font-size: 16px;
      6 }
      7 #cnblogs_post_body h1    {
      8     background: #2B6695;
      9     border-radius: 6px 6px 6px 6px;
     10     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
     11     color: #FFFFFF;
     12     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
     13     font-size: 18px;
     14     font-weight: bold;
     15     height: 25px;
     16     line-height: 25px;
     17     margin: 18px 0 !important;
     18     padding: 8px 0 5px 5px;
     19     text-shadow: 2px 2px 3px #222222;
     20 }
     21 #cnblogs_post_body h2{
     22     background: #2B6600;
     23     border-radius: 6px 6px 6px 6px;
     24     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
     25     color: #FFFFFF;
     26     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
     27     font-size: 15px;
     28     font-weight: bold;
     29     height: 24px;
     30     line-height: 23px;
     31     margin: 12px 0 !important;
     32     padding: 5px 0 5px 10px;
     33     text-shadow: 2px 2px 3px #222222;
     34 }
     35 #cnblogs_post_body h3{
     36     background: #5B9600;
     37     border-radius: 6px 6px 6px 6px;
     38     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
     39     color: #FFFFFF;
     40     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
     41     font-size: 13px;
     42     font-weight: bold;
     43     height: 24px;
     44     line-height: 20px;
     45     margin: 12px 0 !important;
     46     padding: 5px 0 5px 10px;
     47     text-shadow: 2px 2px 3px #222222;
     48 }

    1.2 推荐按钮浮动

    效果如下,

    image

    方法是在设置→页面定制CSS代码里,贴入如下代码即可

      1 /*推荐/反对 按钮*/
      2 #div_digg {
      3     position:fixed;
      4     bottom:10px;
      5     width:140px;
      6     right:390px;
      7     border:2px solid #6FA833;
      8     padding:10px;
      9     background-color:#fff;
     10     border-radius:5px 5px 5px 5px !important;
     11     box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
     12 }

    1.3 博客自动根据标题识别目录

    在设置→页脚Html代码里贴入如下代码:

      1 <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
      2 <link href="https://files.cnblogs.com/files/asxinyu/marvin.nav.my1502.css" rel="stylesheet">
      3 <script type="text/javascript" src="https://files.cnblogs.com/files/asxinyu/marvin.cnblogs.js"></script>
      4 <script type="text/javascript" src="https://files.cnblogs.com/files/clouding/marvin.nav.my1502.js"></script>

    这些都是js的代码,熟悉的同学可以自行下载修改。懒得改的就是用这个,目录效果如下图:

    image

    2. 博客园写作软件

    一个好的写作软件,会给你写博客节省很多时间。

    以前我都是用博客园推荐的windows live writer,但是一直没有一个很好的代码高亮插件。奈何自己水平有限,有没有精力去开发,最近mementochucklu两位大神的博客里看到,原来windows live writer已经开源并且更名为open live writer。随立即使用最新的OLW,并且memento已经开发了代码高亮插件,简直如有神助。废话少说,立马开始。

    open live writer下载地址:http://openlivewriter.org/

    下载、安装、以及关联博客园动作不在赘述。

    下载之后,我推荐使用memento大神开发的代码高亮插件,下载地址:代码高亮插件

    解压之后:

    image

    大神已经很贴心的考虑到小白的各种不懂,不会,很贴心的写了个bat脚本帮大家部署安装。只需双击Deploy.bat文件即可。

    之后在插入一栏就有了插件。

    image

    点击即可插入代码。

    具体使用细节与效果可查看:http://www.cnblogs.com/memento/p/4307171.html#3546726

    3. 参考文章

    自定义博客样式

    http://www.cnblogs.com/chucklu/p/5954884.html

    [Tool] 仿博客园插入代码的 WLW 插件

    http://www.cnblogs.com/memento/p/4307171.html#3546726
    既然优秀不够,那就让自己无可替代
  • 相关阅读:
    vue-lazy-component
    vue修饰符sync
    vue-router-auto动态生成路由插件
    我的第一个WebAPI程序
    GitHub界面初识
    新闻API接口
    childNodes属性 和 nodeType属性
    接口测试总结
    网站被k
    js声明引入和变量声明和变量类型、变量
  • 原文地址:https://www.cnblogs.com/icloud/p/6035683.html
Copyright © 2011-2022 走看看