文档章节

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

樂天
 樂天
发布于 2016/12/24 22:53
字数 516
阅读 17
收藏 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);
})();

看下效果: 输入图片说明

© 著作权归作者所有

共有 人打赏支持
樂天
粉丝 136
博文 674
码字总数 147858
作品 3
深圳
程序员
私信 提问
Chrome 团队内部员工都用什么扩展?

很多人应该对 Chrome 团队内部都用什么扩展很感兴趣吧,话说这几天 Google 的高级副总裁兼产品经理 Jonathan Rosenberg 在 Google 内部向其他员工分享 Chrome 团队喜欢的扩展之后,就有人建议...

红薯
2010/07/16
1K
3
细节决定成败--chrome那些优秀的地方

1)自带中文分词 随便打开OSC的一篇文章,双击一个汉字看看会有什么变化!没错,chrome居然能够识别中文词组! IE8始终是选中一个字,Firefox强一点,是选中一个片段。不过对比chrome,他们都...

梵高
2011/08/10
0
5
最新版 Chrome Dev 集成 PDF 阅读插件

Chromium 官方博客刚刚宣布了 Windows 和 Mac 平台的最新 Chrome Dev 集成了 PDF 阅读插件(Linux 平台 的支持还在路上),值得一提的是它并不是我们经常提到的 Chrome 扩展,而是一个真正意义...

红薯
2010/06/18
574
0
关于OSC 介绍 Chrome 的授权协议问题

在 OSC 上, 关于 Chrome 的介绍中, 授权协议: BSD 我在 ubuntusoft.com 上面看到: chrome 并非自由软件. 其对应的开源项目是 Chromium. 继而参考了其他一些网站.自始至终,没有找到 "Chrome的...

G.
2011/11/18
781
2
Chrome插件,你在用哪些呢?

一直都对Chrome情有独钟,第一次接触她只因她的icon就喜欢上她了,后来便一发不可自拔,现在几乎成为程序员最喜欢用的浏览器,至于优点很明显:强大的Developer Tools,响应快速,支持各种插...

php的小菜鸟
01/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

领哥,项目管理

领哥 https://www.leangoo.com/kanban/board_list

miaojiangmin
10分钟前
1
0
2018阿里云双12年终大促主会场全攻略

摘要: 双12官方攻略出炉! 2018阿里云双12年终大促活动已经于12月7日正式开启,从已开放的活动页面来看,活动分为两个阶段: 12月7日-12月23日的拉新返现阶段和12月24日-12月28日的TOP100英...

阿里云云栖社区
10分钟前
1
0
努力使失败保持原子性(64)

失败的原子调用应该使得对象保持在被调用之前的状态,所谓:失败原子性 几种途径实现: 设计一个不可变对象,其失败原子性是显然的 对于可变参数,执行前检查参数有效性 避免执行一半报错,后...

Java搬砖工程师
11分钟前
1
0
slot分发内容

slot元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。 有 name 特性的 slot 称为具名 slot。 有 slot 特性的内容将分发到名字相匹配的具名 slot。 内容分发就是指混合父组件的内...

Carbenson
22分钟前
1
0
python开发入门

1.执行python文件 # python ./demo.py 2.Python ImportError: No module named 'requests'异常 解决方法: # pip install requests;...

硅谷课堂
24分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部