优化谷歌浏览器中OSC博客阅读体验

原创
2016/12/24 22:53
阅读数 137

在oschina中看博客的体验对我来说有些小细节不满意。所以决定优化一下。思路通过chrome浏览器的插件来解决。

使用Stylebot优化CSS

我经常用到h2和h3,而OSC和h2不够大、h3和正文差不多,不适合阅读。下图是原始效果。

装好stylebot插件后,针对my.oschina.net域名添加CSS:

div.BlogContent p code {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    border-radius: 3px;
    color: #d14;
    margin-left: 4px;
    margin-right: 4px;
    padding-bottom: 3px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 3px;
    word-wrap: break-word;
}

h2 {
    background-color: #cce8d5;
    border-bottom-width: 0px;
    border-color: #1f2142;
    border-left-width: 0;
    border-right-width: 0;
    border-style: dashed;
    border-top-width: 0;
    border-width: 0;
    font-size: 30px;
    font-weight: bold;
    height: 42px;
    padding-bottom: 6px;
    padding-left: 5px;
    padding-top: 10px;
}

h3 {
    font-size: 26px;
    font-weight: bold;
}

img {
    -webkit-box-shadow: 6px 6px 56px -9px rgba(0,0,0,0.75);
    -moz-box-shadow: 6px 6px 56px -9px rgba(0,0,0,0.75);
    box-shadow: 6px 6px 56px -9px rgba(0,0,0,0.75);
    margin: 8px;
    display: block;
}

优化后效果:

使用Smart TOC 插件生成目录

OSC的博客页面是自带目录的。大的显示器上会显示。在14寸的笔记本上并不显示。

自带的目录: 自带的TOC

这个可以使用smart TOC解决。该插件可以给所有的网页生成目录。效果:

输入图片说明

使用 Tampermonkey 插件在合适位置添加元素

查看自己的博客文章时,有时需要查看当前分类下的其他文章。但是OSC将分类放在了右下角,不方便找:

输入图片说明

Tampermonkey 插件可以在指定页面加载完成后执行一些JS操作。添加下面的脚本:

一些控制信息在注释中用@开头的变量后指定。

// ==UserScript==
// 将OSC文章分类信息放在文章标题下面
// @name         开源中国社区博客
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://my.oschina.net/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // 确认是博客页面
    if (document.getElementsByClassName("blog-content").length > 0) {
        // 获取分类信息
        var html = document.getElementById('classify').innerHTML;
        var catNode = document.createElement("strong");

        // 添加到文章标题下面
        catNode.innerHTML = '文章分类:' + html;
        document.getElementsByClassName('user-info')[1].appendChild(catNode);
    }
    // 添加“写博客”
    var addBlogNode = document.createElement("a");
    addBlogNode.href = 'https://my.oschina.net/letiantian/blog/edit';
    addBlogNode.className='menu-item';
    addBlogNode.innerText="->写博客";
    addBlogNode.target='_blank';
    document.getElementsByClassName('menus sm-hide')[0].appendChild(addBlogNode);
})();

看下效果: 输入图片说明

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部