文档章节

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

樂天
 樂天
发布于 2016/12/24 22:53
字数 516
阅读 87
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

在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);
})();

看下效果: 输入图片说明

樂天

樂天

粉丝 138
博文 679
码字总数 153057
作品 3
深圳
程序员
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.6K
8
极速博客引擎--Gor

gor 是使用 golang 实现的类Ruhoh静态博客引擎(Ruhoh like),基本兼容ruhoh 1.x规范. 相当于与ruhoh的官方实现(ruby实现), 有以下优点: 速度完胜 -- 编译wendal.net近200篇博客,仅需要1秒 安装...

wendal
2013/01/20
3.9K
0
TDD的测试框架--Machine.Specification

Machine.Specification 是一个 TDD 测试驱动开发的测试框架,简化了测试,无需关心语言本身特性。 Machine.Specifications 带来的好处是不需要在代码里有注释,但同时阅读代码的人可以一目了...

匿名
2013/01/22
1.2K
0
HTTPS切换工具--HttpsSwitcher

HttpsSwitcher 是一个帮你进行 HTTPS 切换的 Chrome 插件,本工具可以帮你尝试使用https打开指定的域名,点击本插件的浏览器图标后会自动切换本标 签页的http/https状态,并且会记住你的选择...

leehorsley
2013/01/26
1K
0
JavaScript 声效库--SFX.js

sfx.js 是一个简单的声效封装 JavaScript 包。示例: var sfxObject = new SFX( 'sound_effects/{{type}}' ); 支持: Chrome: OGG + MP3 Opera: OGG Firefox: OGG Safari: MP3 IE9: MP3......

匿名
2013/02/18
1.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

GeoPandas入门 | 03-空间关系和操作

03-空间关系和操作 源代码请看此处 %matplotlib inlineimport pandas as pdimport geopandas countries = geopandas.read_file("zip://./data/ne_110m_admin_0_countries.zip")cities =......

酱肉包-
6分钟前
0
0
检查Ruby中的数组中是否存在值 - Check if a value exists in an array in Ruby

问题: I have a value 'Dog' and an array ['Cat', 'Dog', 'Bird'] . 我有一个值'Dog'和一个阵列['Cat', 'Dog', 'Bird'] 。 How do I check if it exists in the array without looping thr......

fyin1314
8分钟前
0
0
最新情报:所有的递归都可以改写成非递归?

前言 本文收录于专辑:http://dwz.win/HjK,点击解锁更多数据结构与算法的知识。 你好,我是彤哥,一个每天爬二十六层楼还不忘读源码的硬核男人。 上一节,我们使用位图介绍了12306抢票算法的...

彤哥读源码
10分钟前
11
0
What do you think is the most profitable industry?

What industry is the most profitable and profitable? There are only two industries that I know, both of which I learned after personal experience. The first one is the pharmaceu......

抖音hzcya
23分钟前
18
0
剑指 Offer 11. 旋转数组的最小数字

把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转。输入一个递增排序的数组的一个旋转,输出旋转数组的最小元素。例如,数组 [3,4,5,1,2] 为 [1,2,3,4,5] 的一个旋转,该数...

加油加油再加油
24分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部