CreateBlogWithOrg

org 导出配置
- 支持 exclude 整个目录
- 参考资料
使用方法
- 快捷键
misc
评论插件

CreateBlogWithOrg note.

<!– more –>

org 导出配置

(setq org-publish-project-alist
        '(
          ("blog-notes"
           :base-directory "~/Documents/MyProject/Public/wolfand11/_post/"
           :base-extension "org"
           :publishing-directory "~/Documents/MyProject/Public/wolfand11/_site/"
           :recursive t
           :publishing-function org-html-publish-to-html
           :html-link-home "https://wolfand11.coding.me"
           :html-link-org-files-as-html org-html-link-org-files-as-html
           :headline-levels 5
           :with-author nil
           :with-email nil
           :with-creator nil
           :with-timestamps nil
           :htmlized-source t
           :section-numbers nil

           ;; --------------------
           ;; remove default html-head, use custom html-head
           ;;
           :html-head-include-default-style nil
           :html-head "<meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" />
           <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />
           <link rel=\"stylesheet\" title=\"Standard\" href=\"https://wolfand11.coding.me/res/css/worg.css\" type=\"text/css\" />
           <link rel=\"alternate stylesheet\" title=\"Zenburn\" href=\"https://wolfand11.coding.me/res/css/worg-zenburn.css\" type=\"text/css\" />
           <link rel=\"alternate stylesheet\" title=\"Classic\" href=\"https://wolfand11.coding.me/res/css/worg-classic.css\" type=\"text/css\" />
           <link rel=\"icon\" href=\"http://wolfand11.coding.me/res/favicon.ico\" type=\"image/ico\" />"
           ;;https://wolfand11.coding.me/res/css/org.css
           ;;res/css/org.css

           ;; --------------------
           ;; use coding.me as comment system
           ;;
           :html-postamble "<div id=\"gitment-ctn\"></div>
           <link rel=\"stylesheet\" href=\"https://dn-coding-net-public-file.qbox.me/Coding-Comments/v0.0.3/default.css\">
           <script src=\"https://dn-coding-net-public-file.qbox.me/Coding-Comments/v0.0.3/gitment.min.js\"></script>
           <script>
           var gitment = new Gitment({
               owner: 'wolfand11',
               repo: 'blog_comments',
               oauth: {
                   client_id: '25bc4077d166c8858dca999bcd070cca',
                   client_secret: 'c9a758cc154771b25162f537ad711c96ae5ac87c',
               },
           });
           gitment.render('gitment-ctn')
           </script>"

           :auto-preamble t
           :auto-sitemap t                  ; Generate sitemap.org automagically...
           :sitemap-filename "sitemap.org"  ; ... call it sitemap.org (it's the default)...
           :sitemap-title    "Sitemap"      ; ... with title 'Sitemap'.
           :sitemap-file-entry-format "%d %t"
           )
          ("blog-static"
           :base-directory "~/Documents/MyProject/Public/wolfand11/_post/"
           :base-extension "css\\|js\\|png\\|jpg\\|gif\\|pdf\\|mp3\\|ogg\\|swf\\|lua\\|py\\|ico"
           :publishing-directory "~/Documents/MyProject/Public/wolfand11/_site/"
           :recursive t
           :publishing-function org-publish-attachment
           )
          ("blog" :components ("blog-notes" "blog-static"))
          ;;
          ))

支持 exclude 整个目录

https://emacs.stackexchange.com/questions/32758/is-it-possible-for-org-publish-to-ignore-certain-sub-directories

参考资料

WhyUseOrgModeToWriteBlog http://dayigu.github.io/WhyUseOrgModeToWriteBlog.html
通过 ox-publish 创建博客 https://luyajun01.github.io/blog_construct.html
orgmode 官方文档 https://orgmode.org/org.html

使用方法

快捷键

快捷键	说明
, e e P a	导出所有文件
, e e P f	导出当前文件

在导出界面，C-f 可以开启强制重新导出。

misc

org 文件之间的 include

参考 index.org 文件中引用 sitemap.org 文件的方法。

#+INCLUDE: "./sitemap.org"

https://orgmode.org/org.html#Include-Files

支持 sitmap 文章排序

#D:\Documents\MyCore\Tools\PyTools\main.py
# 执行下面命令可以查看命令帮助
py ./main.py -h 
# 下面命令会利用默认的priority_config.json文件导出 sitemap.org
# priority_config.json 文件放置在 wolfand11/_post 目录下
py ./main.py --OrgExportSitemap
# 下面命令会生成默认的 priority_config.json文件，并且会将原始的priority_config.json备份为 priority_config_%m%d_%H%M%S.json 例如(.priority_config_1213_165619)
py ./main.py --OrgExportSitemap --InitConfig
# 将新增加的文件链接添加到.priority_config_1213_165619.json文件中，并使用其代替priority_config.json

# 支持隐藏文件和文件夹
# 该工具会忽略以.开头的隐藏文件，也会忽略文件夹名称中包含.的文件夹(如 dot.private)

支持插入图片组和视频

Image Group

#+begin_export html
<div id="imgGroup${1:groupIdx}">
<img id="imgGroup" src="./`(file-name-nondirectory (file-name-sans-extension (buffer-file-name)))`/$0.png" style="display:block"/>
<img id="imgGroup" src="./`(file-name-nondirectory (file-name-sans-extension (buffer-file-name)))`/.png" style="display:none"/>
<img id="imgGroup" src="./`(file-name-nondirectory (file-name-sans-extension (buffer-file-name)))`/.png" style="display:none"/>
</div>

<br>
<b id="curImgIdx${1}">0</b>
<button onclick="slideShow(${1}, 0)">0</button>
<button onclick="slideShow(${1}, 1)">1</button>
<button onclick="slideShow(${1}, 2)">2</button>
#+end_export

Video

方案 1:

#+begin_export html
<figure>
  <video class="wp-video-shortcode" width="640" height="360" preload="metadata" controls="controls">
  <source type="video/mp4" src="./`(file-name-nondirectory (file-name-sans-extension (buffer-file-name)))`/$0.mp4" />
  </video>
  <figcaption>caption for video</figcaption>
</figure>
#+end_export

方案 2: 目前采用该方案

#+begin_export html
<figure>
  <iframe src='https://gfycat.com/ifr/TightRelievedGoa' frameborder='0' scrolling='no' allowfullscreen width='640' height='328'></iframe>
  <figcaption>caption for video</figcaption>
</figure>
#+end_export

修改 blog 主题

主页和 AboutMe 界面主题: 直接在 index.org 和 about.org 文件中设置使用的 css 主题文件就可以了
blog 内容主题: wolfand11/config.el 文件中修改变量 wolfand11-org-html-head 即可。如下：

;; readtheorg 主题
(setq wolfand11-org-html-head wolfand11-org-html-head-readtheorg-theme)
;; worg 主题
(setq wolfand11-org-html-head wolfand11-org-html-head-worg-theme)

下面是一个专门搜集 org-html 主题的项目：

https://gitlab.com/OlMon/org-themes

评论插件

org-mode 评论插件配置

在 wolfand11/config.el 文件中进行配置，具体配置如下：

;; 添加新的评论系统，可以参考下面vssue的配置
(setq wolfand11-org-html-postamble-format-vssue "<div id=\"vssue\"></div>
        <script src=\"https://unpkg.com/vue@2.7.10/dist/vue.runtime.min.js\"></script>
        <script src=\"https://unpkg.com/vssue/dist/vssue.github.min.js\"></script>
        <script>
          new Vue({
            el: '#vssue',
            render: h => h('Vssue', {
              props: {
                // 在这里设置当前页面对应的 Issue 标题
                title: '%t',

                // 在这里设置你使用的平台的 OAuth App 配置
                options: {
                    owner: 'wolfand11',
                    repo: 'blog_comments',
                    clientId: 'a02b49185d85859cb92c',
                    clientSecret: '6f123085c6f1ce339e2517d24e5b099fa1dc9c85', // 只有在使用某些平台时需要
                },
              }
            })
          })
        </script>
        ")
;; choose comment system
(setq wolfand11-org-html-postamble-format `(("en" ,wolfand11-org-html-postamble-format-vssue)))

若需要在 index.org 关闭评论，只需要修改如下：

#+OPTIONS: html-postamble:nil

gitalk

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <div id="gitalk-container"></div>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
        <script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>
        <script>
         const gitalk = new Gitalk({
             clientID: 'a02b49185d85859cb92c',
             clientSecret: '6f123085c6f1ce339e2517d24e5b099fa1dc9c85',
             repo: 'blog_comments',      // The repository of store comments,
             owner: 'wolfand11',
             admin: ['wolfand11'],
             distractionFreeMode: false  // Facebook-like distraction free mode
         })

         gitalk.render('gitalk-container')
        </script>
    </body>
</html>

gitalk https://github.com/gitalk/gitalk

vssue commits

ERROR

使用静态页面测试发现不可用

通过浏览器报错信息可以发现，由于浏览器加载 vue 的版本不正确导致，只需要在 vue 链接中指定 2.7.10 版本就可以了。(vue3 版本没有 vue.runtime.min.js 文件了)

<!DOCTYPE html>
<head>
  <!-- Vssue 的样式文件 -->
  <link rel="stylesheet" href="https://unpkg.com/vssue/dist/vssue.min.css">
</head>

<body>
  <div id="vssue"></div>

  <!-- 先引入 Vue -->

  <!-- Vue 运行时版 (runtime only)  -->
  <script src="https://unpkg.com/vue@2.7.10/dist/vue.runtime.min.js"></script>

  <!-- 在 Vue 之后引入 Vssue -->

  <!-- Vssue Github 版  -->
  <script src="https://unpkg.com/vssue/dist/vssue.github.min.js"></script>

  <!-- 将 Vssue 作为 Vue 组件使用 -->

  <!-- 对于 Vue 运行时版，使用渲染函数（render function） -->
  <script>
    new Vue({
      el: '#vssue',

      render: h => h('Vssue', {
        props: {
          // 在这里设置当前页面对应的 Issue 标题
          title: 'Vssue Dev',

          // 在这里设置你使用的平台的 OAuth App 配置
          options: {
              owner: 'wolfand11',
              repo: 'blog_comments',
              clientId: 'a02b49185d85859cb92c',
              clientSecret: '6f123085c6f1ce339e2517d24e5b099fa1dc9c85', // 只有在使用某些平台时需要
          },
        }
      })
    })
  </script>
</body>

参考资料

vssue gitee 集成文档 https://vssue.js.org/zh/guide/gitee.html

参考资料

https://blog.csdn.net/weixin_41196185/article/details/79178780
必来力评论系统 https://www.livere.com
valine 评论系统 https://valine.js.org/quickstart.html
gitment https://github.com/imsun/gitment
coding comments https://github.com/Coding/Comments

CreateBlogWithOrg

Table of Contents

org 导出配置

支持 exclude 整个目录

参考资料

使用方法

快捷键

misc

org 文件之间的 include

支持 sitmap 文章排序

支持插入图片组和视频

Image Group

Video

修改 blog 主题

评论插件

org-mode 评论插件配置

gitalk

vssue commits

ERROR

使用静态页面测试发现不可用

参考资料

参考资料