如何告诉 org-mode 在 HTML 导出中嵌入我的 css 文件？答案

【问题标题】：how to tell org-mode to embed my css file on HTML export?如何告诉 org-mode 在 HTML 导出中嵌入我的 css 文件？
【发布时间】：2013-10-27 02:47:30
【问题描述】：

指示 org-mode 将我的样式表中的所有 css 嵌入到单个 HTML 文件中的最佳方法是什么，而不是像默认情况下那样包含指向它的链接？

【问题讨论】：

您运行的是哪个版本的组织模式？在 8.2.1 中，我默认将 CSS 包含在文件中 C-c C-e C-s h o（C-s 用于子树导出，我当前的 org 文件超出了我的测试所需）。
@jonathan-leech-pepin：谢谢。我也在使用 org 8.2.1。这是一个最小的 org 文件：d.pr/f/jsvk。这是生成的 HTML 文件：d.pr/f/Nkgl。如您所见，来自 org 文件的 the #+HTML_HEAD: <link rel='stylesheet' type='text/css' href='/Users/peter/Dropbox/web-design/custom-css/gmail.css'/> 被翻译成 HTML 文件中的外部链接，如下所示：<link rel='stylesheet' type='text/css' href='/Users/peter/Dropbox/web-design/custom-css/gmail.css' />。

标签： css emacs org-mode

【解决方案1】：

我最近遇到了这个问题，没有任何建议/答案对我有用。终于在this link找到了解决办法，就是自己写函数如下，放到你的.emacs或者init.el文件中。

(defun my-org-inline-css-hook (exporter)
  "Insert custom inline css"
  (when (eq exporter 'html)
    (let* ((dir (ignore-errors (file-name-directory (buffer-file-name))))
           (path (concat dir "style.css"))
           (homestyle (or (null dir) (null (file-exists-p path))))
           (final (if homestyle "~/.emacs.d/org-style.css" path))) ;; <- set your own style file path
      (setq org-html-head-include-default-style nil)
      (setq org-html-head (concat
                           "<style type=\"text/css\">\n"
                           "<!--/*--><![CDATA[/*><!--*/\n"
                           (with-temp-buffer
                             (insert-file-contents final)
                             (buffer-string))
                           "/*]]>*/-->\n"
                           "</style>\n")))))

(add-hook 'org-export-before-processing-hook 'my-org-inline-css-hook)

【讨论】：

【解决方案2】：

对此还有另一种解决方案。

在您的 org 文件中，您可以使用 #+SETUPFILE: file，它可以启用额外的缓冲区内设置：

#+SETUPFILE: style.css.org

在文件style.css.org中，你可以有：

#+OPTIONS: org-html-head-include-default-style:nil

#+HTML_HEAD: <style type="text/css">
#+HTML_HEAD:   ...your CSS here...
#+HTML_HEAD: </style>

style.css.org的内容是：

org-html-head-include-default-style:nil 告诉不要使用默认样式。
...your CSS here... 将替换为您的 CSS 代码。每行必须以#+HTML_HEAD: 为前缀。

此解决方案的优点是每个文件可以有一个style.css.org。我个人使用这个技巧让每个 org 文件目录有一个 style.css.org。

归功于Paul Provost。

请注意，这里单行 CSS 比多行 CSS 更高效。

【讨论】：

【解决方案3】：

试试：

#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="style1.css" />
#+HTML_HEAD_EXTRA: <link rel="alternate stylesheet" type="text/css" href="style2.css" />

还可以参考： http://orgmode.org/manual/CSS-support.html

【讨论】：

这是外部样式表的链接。我希望 org-mode 将 css 样式信息嵌入 HTML 文件本身的头部。

【解决方案4】：

我不确定你是否找到了更好的方法，但你可以通过将 CSS 直接放入 org-export-html-style 变量中来做到这一点，像这样包装它：

<style type=\"text/css\">\n <!--/*--><![CDATA[/*><!--*/\n **YOUR CSS HERE** \n  /*]]>*  /-->\\n  >/*]]>*/-->\n</style>n</style>

以 org-export-html-style-default 为例。

我还希望能够在 org-export-html-file 中指定一个文件，并让 org 模式读取该文件并将其嵌入，但是，这种方式可行。

【讨论】：

感谢您的提示！您是否找到了一种在导出时自动嵌入样式表的方法？我找到了一个很棒的样式表here，但我必须在每次导出时复制/粘贴它。
@Lucas 如果您将 css 设置为变量 org-export-html-style，那么它应该在您导出时自动嵌入。请尝试以下操作：M-x customize-variable RET org-export-html-style-default 在此处粘贴您的 CSS 并保存。确保 CSS 包装在 CDATA 块中，如上所示。基本上采用上面的 sn-p 并将 YOUR CSS HERE 部分替换为您共享的 github 链接中的原始 CSS。
@Lucas 在最近的 org-mode 版本中，看起来该变量现在称为 org-html-style 我刚刚尝试使用您共享的 CSS，它工作得非常好，并且在您导出时直接嵌入到文件中.