怎么加全局样式_自定义jupyter notebook界面样式

谁践踏了优雅 2023-01-06 11:59 144阅读 0赞

今天最优化老师安利了jupyter notebook，这玩意儿笔者以前只在云服务器上玩过，算是彻头彻尾的云玩家吧hhh。为了不云，还是安装一下吧：

py -3.7 -m pip install jupyter notebook

启动本地前端服务器一看，这个UI的精美程度有点让笔者这个深度pycharm自定义UI界面玩家难受，所以索性快速自学了一下怎么自定义修改jupyter notebook的前端样式。

最终效果我放在了github仓库中，链接我附在了文章结尾。(｀・ω・´)

> 当然，你可以安装jupyterthemes来快速“换装”或者是调整一些全局样式属性。此处所讲为自定义某些细节，比如背景图片。

--------------------

首先进入该路径：“C:UsersUSERNAME.jupytercustom”（如果没有就手动创建一个创建），这里存放着渲染jupyter前端的CSS文件和js入口文件。入口文件咱们自然不需要动，直接进入custom.css开始修改。

![5ad1ae7cd17c7355b707fcb72fa73371.png][]

如果你和笔者一样有过一点点做前端的项目经验或者你很熟悉web端的布局，后面就简单了。对于前端小白，大制做法是右击“检查”，进入网页调试窗口，逐个让光标划过右边的HTML代码上的DOM元素。

当你感兴趣的、想要修改的区域高亮了，那么记住tooltip上显示的类名，或者就是光标所在的HTML标签中"class="后面的那一串。

![510579f0ca1bff7ef4459aed36c519af.png][]

> 这边的字体笔者已经修改过了

然后在custom.css中修改，也就是加一行该类的样式定义就行。

div.cell.text_cell.rendered.selected{
         
        font-family: UD Digi Kyokasho NK-R;
        font-size: 20pt;
    }

如法炮制，就可以修改整个页面上的字体，及其大小。

接着，我们修改页面的背景图片，为了美观，我们将一些大组件的透明度设成0.7

/* body 顺便设置背景图片*/
    body {
         
        height: 100%;width: 100%;
        background: url("https://i.loli.net/2020/09/16/EM1xdskGr9tKbpn.jpg");
        /* 背景图垂直、水平均居中 */
    	background-position: center center;
    	/* 背景图不平铺 */
    	background-repeat: no-repeat;
    	/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    	background-attachment: fixed;
    	/* 让背景图基于容器大小伸缩 */
    	background-size: cover;
    	/* 设置背景颜色，背景图加载过程中会显示背景色 */
    	background-color: rgba(250, 250, 250, alpha);
    }
    
    /* 文件目录界面组件 */
    div #tab_content{
         
        background-color: rgba(250, 250, 250, 0.7);
    }
    
    /* 文字及代码编辑区 */
    div #menubar-container.container{
         
        background-color: rgba(250, 250, 250, 0.7);
        color: #C8C8FF;
    }
    div #notebook-container.container{
         
        background-color: rgba(250, 250, 250, 0.7);
    }

保存CSS，再刷新页面看看：

![c30f01b608299d52af887dad0021b5cb.png][]

![92803e717b32e107413738f2cc98a796.png][]

效果还不错(｀・ω・´)

登录界面加一个简单的入场动画吧：

/* 入场动画 */
    @keyframes animatename {
         
    
        0% {
         
        opacity: 0;
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
        }
    
        100% {
         
        opacity: 1;
        webkit-transform: translateY(0);
        ms-transform: translateY(0);
        transform: translateY(0);
        }
    }

然后不要忘了在各个需要动画载入的元素的样式中加入animation: animatename 2.0s;

![0fb24fa490575df8907179a62a11da94.png][]

> 我的登录界面，将header透明度调为0.9，大量元素的hover的背景色设为\#9999ff。除背景外，所有元素都有1.5-2.0的入场动画

github仓库地址：

LSTM-Kirigaya/a-simple-css-for-jupyter-notebookgithub.com

![d2563da6bb59254299dbef576d228a3a.png][]

[5ad1ae7cd17c7355b707fcb72fa73371.png]: /images/20221119/e424fa61e6f34aa9b5c0ba7e2b337324.png
[510579f0ca1bff7ef4459aed36c519af.png]: /images/20221119/0b8ac3811568484193dda710c15d24e7.png
[c30f01b608299d52af887dad0021b5cb.png]: https://img-blog.csdnimg.cn/img_convert/c30f01b608299d52af887dad0021b5cb.png
[92803e717b32e107413738f2cc98a796.png]: https://img-blog.csdnimg.cn/img_convert/92803e717b32e107413738f2cc98a796.png
[0fb24fa490575df8907179a62a11da94.png]: https://img-blog.csdnimg.cn/img_convert/0fb24fa490575df8907179a62a11da94.png
[d2563da6bb59254299dbef576d228a3a.png]: https://img-blog.csdnimg.cn/img_convert/d2563da6bb59254299dbef576d228a3a.png