概述

Notion 和 Obsidian 都有收集网页的功能, Org-mode 自然也有, Org-mode 是调用 Org-protocol 协议使用的, 而插件 Org-protocol-capture-html 是其中能使 Org-protocol 收集的网页更加美观和可视化

因为很多人都不会都不理解 Org-protocol 和怎么去使用, 以及Org-protocol-capture-html, 说得只是怎么用这个插件, 却没有说怎么配置, 所以才有了本教程.

相关链接

效果如下

效果如下👇

效果预览

安装 Org-protocol-capture-html

这个插件是不需要配置, 直接安装此插件就可以调用

请自己按装此插件

  • 使用 use-package 安装
  • 手动安装

配置 Org-protocol-capture-html

此插件是调用 org-capture 功能, 请自觉检查如下配置

(server-start) ;; 如果你知道这意味着什么，可以不使用这句， 这句是为了能调用 emacsclientw
(require 'org-protocol)

(require 's) ;;依赖

;; 安装 org-protocol-capture-html
;; 如果跟我的不同, 请将下面两行删除
(add-to-list 'load-path "~/.emacs.d/plugins/org-protocol-capture-html/") ;;
(require 'org-protocol-capture-html)

(setq org-capture-templates
      '(
	 ;;Org-protocol网页收集, 按键 w 调用
	 ("w" "网页收集" entry (file "~/Org/网页收集.org")
	 "* [[%:link][%:description]] \n %U \n %:initial \n")
	))

系统安装 org-protocol

如果下面的方法无法安装, 请见官网 👇

Windows 用户👇

  • 桌面新建 org-protocol.reg 文件, 使用 记事本 软件打开 , 并将以下👇代码放进去并保存, 然后运行安装并给权限
  • 请把下面的 emacsclientw.exe 路径换成你自己的路径
REGEDIT4

[HKEY_CLASSES_ROOT\org-protocol]
@="URL:Org Protocol"
"URL Protocol"=""
[HKEY_CLASSES_ROOT\org-protocol\shell]
[HKEY_CLASSES_ROOT\org-protocol\shell\open]
[HKEY_CLASSES_ROOT\org-protocol\shell\open\command]
@="\"C:\\Programme\\Emacs\\emacs\\bin\\emacsclientw.exe\" \"%1\""

Linux 用户请见 👉 Linux 使用 org-protocl

根据自己使用的浏览器添加书签

关于 org-protocol-capture-html 对不同的 浏览书签 见

例如 Chrome

在 Chrome 新建 书签

  1. 书签名称随便取
  2. 书签地址如下👇
javascript:location.href = 'org-protocol:///capture-html?template=w&url=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title || "[untitled page]") + '&body=' + encodeURIComponent(function () {var html = ""; if (typeof window.getSelection != "undefined") {var sel = window.getSelection(); if (sel.rangeCount) {var container = document.createElement("div"); for (var i = 0, len = sel.rangeCount; i < len; ++i) {container.appendChild(sel.getRangeAt(i).cloneContents());} html = container.innerHTML;}} else if (typeof document.selection != "undefined") {if (document.selection.type == "Text") {html = document.selection.createRange().htmlText;}} var relToAbs = function (href) {var a = document.createElement("a"); a.href = href; var abs = a.protocol + "//" + a.host + a.pathname + a.search + a.hash; a.remove(); return abs;}; var elementTypes = [['a', 'href'], ['img', 'src']]; var div = document.createElement('div'); div.innerHTML = html; elementTypes.map(function(elementType) {var elements = div.getElementsByTagName(elementType[0]); for (var i = 0; i < elements.length; i++) {elements[i].setAttribute(elementType[1], relToAbs(elements[i].getAttribute(elementType[1])));}}); return div.innerHTML;}());

javascript:location.href = 'org-protocol:///capture-eww-readable?template=w&url=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title || "[untitled page]");

Firefox 如下

在 Firefox 新建 书签

  1. 书签名称随便取
  2. 书签地址如下👇
javascript:(function(){const selectedText=(function(){var html="";var sel=window.getSelection();if(sel.rangeCount){var container=document.createElement("div");for(var i=0,len=sel.rangeCount;i<len;++i){container.appendChild(sel.getRangeAt(i).cloneContents());}html=container.innerHTML;}var dataDom=document.createElement('div');dataDom.innerHTML=html;dataDom.querySelectorAll('a').forEach(function(item,idx){console.log('find a link');var url=new URL(item.href,window.location.href).href;var content=item.innerText;item.innerText='[['+url+']['+content+']]';});['p','h1','h2','h3','h4'].forEach(function(tag,idx){dataDom.querySelectorAll(tag).forEach(function(item,index){var content=item.innerHTML.trim();if(content.length>0){item.innerHTML=content+'&#13;&#10;';}});});return dataDom.innerText.trim();})();const params=new URLSearchParams({template:"w",url:location.href,title:document.title||"UNTITLED PAGE",body:selectedText});location.href='org-protocol://capture?'+params.toString();})();

享受使用 👇

使用之前

请把你的 Chrome 或者 Firefox 的 书签 始终可见(比如在你浏览网页选中文字时可以点击你的书签)

开始使用

  1. 打开 Emacs
  2. 使用浏览器浏览网页
  3. 在网页 选择你想收集的文本
  4. 点击你刚才新建的书签, 点击确定授权之类的
  5. 回到 Emacs 你会看到你已经收集到的 Capture
  6. 自己记得保存
  7. 你收集到的会 保存到 ~/Org/网页收集.org 文件中(因为上面的配置保存到这文件， 请按自己需求更改)

如果你有更多的需求, 请自己学习, 因为网上并没有详细的教程使用 org-protocol 所以才有了本教程

祝你使用愉快🤓⚡👉♥️🌹