☰

d2l.ai优化

d2l.ai添加隐藏侧栏按钮，增加跳转本地jupyter notebook按钮

  1. // ==UserScript==
  2. // @name         d2l.ai优化
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.5
  5. // @description  d2l.ai添加隐藏侧栏按钮，增加跳转本地jupyter notebook按钮
  6. // @author       You
  7. // @match        *://*.d2l.ai/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=d2l.ai
  9. // @grant        none
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Your code here...
  17.     // 获取元素
  18. const drawer = document.querySelector('.mdl-layout__drawer');
  19. const main = document.querySelector('.mdl-layout__content');
  20. const doc = document.documentElement;
  21.  
  22. // 创建按钮
  23. let btn = document.createElement('button');
  24. btn.classList.add('mdl-button', 'mdl-js-button', 'mdl-js-ripple-effect');
  25. btn.textContent = '隐藏侧边';
  26.  
  27. // 按钮点击事件处理函数
  28. function toggleDrawer() {
  29.   if (drawer.style.display === 'none') {
  30.     // 显示侧边栏
  31.     drawer.style.display = '';
  32.     main.style.marginLeft = '256px';
  33.     btn.textContent = '隐藏侧边';
  34.     doc.style.width = '';
  35.   } else {
  36.     // 隐藏侧边栏
  37.     drawer.style.display = 'none';
  38.     main.style.marginLeft = '50px';
  39.     btn.textContent = '显示侧边';
  40.     doc.style.width = '100vw';
  41.   }
  42. }
  43.  
  44. // 添加按钮到导航元素中
  45. const nav = document.querySelector('.mdl-navigation');
  46. nav.appendChild(btn);
  47.  
  48. // 绑定按钮点击事件
  49. btn.addEventListener('click', toggleDrawer);
  50.  
  51. // 找到innerText为 Colab [mxnet] 的button
  52. let aa = document.querySelector('a[href*="https://studiolab.sagemaker.aws/import/github/d2l-ai"]')
  53. aa.removeAttribute('href');
  54. aa.onclick=null
  55. let button = aa.querySelector('button');
  56.  
  57. if (button) {
  58.   // 将文本替换为“跳转到本地jupyter notebook”
  59.   button.innerText = '跳转到本地jupyter notebook';
  60.   
  61.   // 绑定一个函数
  62.   button.onclick = function() {
  63.     // 获取当前网址并替换
  64.     const url = window.location.href.replace('https://zh.d2l.ai/', 'http://localhost:8888/notebooks/pytorch/').replace('.html', '.ipynb');
  65.     
  66.     // 在新标签页打开
  67.     window.open(url, '_blank');
  68.   };
  69.   button.href=window.location.href.replace('https://zh.d2l.ai/', 'http://localhost:8888/notebooks/pytorch/').replace('.html', '.ipynb');
  70.     
  71. }
  72. btn = document.createElement('button');
  73. var t = document.createTextNode("用本地notebook打开");
  74. btn.appendChild(t);
  75.  
  76. // 设置按钮样式
  77. btn.style.position = "fixed";
  78. btn.style.top = "10px";
  79. btn.style.right = "10px";
  80. btn.style.zIndex = "9999";
  81. btn.style.backgroundColor = "#008CBA";
  82. btn.style.color = "white";
  83. btn.style.border = "none";
  84. btn.style.padding = "10px 20px";
  85. btn.style.fontSize = "16px";
  86. btn.style.cursor = "pointer";
  87.  
  88. // 绑定点击事件
  89. btn.onclick = function() {
  90.   var url = window.location.href;
  91.   url = url.replace("https", "http");
  92.   url = url.replace("zh.d2l.ai", "localhost:8888/notebooks/pytorch");
  93.   url = url.replace(".html", ".ipynb");
  94.   window.open(url, '_blank');
  95. };
  96.  
  97. // 添加按钮到页面
  98. document.body.appendChild(btn);
  99.  
  100.  
  101. })();