WordPress联动Obsidian
本文最后更新于17 天前,内容如有失效请评论区留言。

2025-05-27 195714(2).jpg

图片上传

  1. 配置又拍云
    • 创建服务 echokang-image-upyun,创建操作员并记录密码。
    • 绑定自定义域名 img.echokang.top,在域名服务商处做 CNAME 解析,并配置 SSL。
  2. 配置 PicList
    • 图床选择“又拍云”,填入服务名、操作员、密码、加速域名。
    • 必须开启“时间戳重命名”(按钮亮蓝),防止特殊字符报错。
    • 设置为默认图床,检查 Server 端口为 36677
  3. 配置 Obsidian
    • 安装 Image auto upload Plugin
    • 确认 PicGo server 端口配置正确。
    • 截图粘贴即可自动上传又拍云并返回你的专属域名图片链接。

Image auto upload Plugin按照下图配置:
image.png

文章上传

在Obsidian安装WordPress插件,按照下图配置:
image.png

创建账户,配置REST API和应用程序密码(在个人资料处添加获取)。

接着使用templater插件创建模板(可以先找个md测试,会自动生成yaml,不过有些问题,建议用我配置好的)

image.png

其中categories是列表类型,填数字。先在后台添加分类,点击分类,url会显示tag_ID就是这里填的数字。
tags就是文本,你写在其中,自会创建新标签。
postId空着,上传会生成唯一标识标记文章,之后修改就靠它唯一标识,不然就会新建文章。

yaml暂时不支持设置封面图片,所以我先在WordPress-Argon后台设置了默认取文章首张图片作为封面,这样,只需把封面图片放在文章开头就行。

最后,点击WordPress按钮点击上传即可。


说说上传

functions.php中末尾有个init_shuoshuo函数,添加一行'show_in_rest' => true就将说说接口权限给了REST API,最终如下:

$args = array(
		'labels' => $labels,
		'public' => true,
		'publicly_queryable' => true,
		'show_ui' => true,
		'show_in_menu' => true,
		'exclude_from_search' => true,
		'query_var' => true,
		'show_in_rest' => true, // 加上这一行,开启 REST API
		'rewrite' => array(
			'slug' => 'shuoshuo',
			'with_front' => false
		),
		'capability_type' => 'post',
		'has_archive' => false,
		'hierarchical' => false,
		'menu_position' => null,
		'menu_icon' => 'dashicons-format-quote',
		'supports' => array('editor', 'author', 'title', 'custom-fields', 'comments')
	);

接着在Obsidian仓库中建个Scripts文件夹,添加名称为push-shuoshuo.js,添加代码如下:

module.exports = async (params) => {
    const { app } = params;
    const activeFile = app.workspace.getActiveFile();
    if (!activeFile) {
        new Notice("没有打开任何笔记!");
        return;
    }

    // 获取文件内容并去顶部 YAML 属性
    const fileContent = await app.vault.cachedRead(activeFile);
    const contentWithoutYaml = fileContent.replace(/^---[\s\S]+?---\n/, '');
    const title = activeFile.basename;

    // 🟢 核心升级:将 Markdown 语法翻译为 WordPress 认识的 HTML
    let htmlContent = contentWithoutYaml
        // 1. 转换图片: ![alt](url) -> <img src="url" alt="alt" />
        .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" style="max-width:100%; height:auto; display:block; margin:10px 0; border-radius:8px;" />')
        // 2. 转换超链接: [text](url) -> <a href="url" target="_blank">text</a>
        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
        // 3. 转换加粗: **text** -> <strong>text</strong>
        .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');

    // 🔴 配置你的 WordPress 信息
    const wpUrl = "https://echokang.top/wp-json/wp/v2/shuoshuo"; 
    const username = "Echo_Kang"; 
    const appPassword = "3Dqj 7paq AMJv PYmE xFst CObd"; // 使用你刚才的密码即可

    // 生成验证 Token
    const token = btoa(unescape(encodeURIComponent(`${username}:${appPassword}`)));

    new Notice("🚀 正在将说说和图片发送到博客...");

    try {
        const response = await requestUrl({
            url: wpUrl,
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Basic ${token}`
            },
            body: JSON.stringify({
                title: title,
                content: htmlContent, // 👈 这里发送转换后的内容
                status: "publish" // 直接发布
            })
        });

        if (response.status === 201) {
            new Notice("🎉 说说发布成功!图片也能完美显示啦。");
        } else {
            new Notice(`❌ 发布失败 (状态码: ${response.status})`);
        }
    } catch (error) {
        new Notice("❌ 网络请求报错,请检查控制台。");
        console.error(error);
    }
};

应用程序密码在个人资料处添加获取。

然后在obsidian里安装QuickAdd插件,在Choices & Packages部分

  • Name 的灰色输入框输入你想在命令面板里看到的名字,比如:一键发布说说
  • 点击 Name 旁边写着 Template 的深色按钮,在弹出的列表里把它改成 Macro
  • 点击蓝色的 Add Choice 按钮
  • 输入框的下方会出现你刚刚添加的“一键发布说说”这一行,点击它最右侧的 齿轮图标
  • 找到 User Scripts,选中你刚才在电脑上建好的那个 push-shuoshuo.js 脚本文件,点击 Add
  • 退出后在刚才建好的“一键发布说说”那一行的 ⚡️ 闪电图标 点亮,这样才能在 Obsidian 的 Ctrl+P 命令面板里搜到它

之后创建md,无需yaml,直接Ctrl+P输入一键上传说说即可。

标题:WordPress联动Obsidian
作者:Echo_Kang
链接:https://echokang.top/wordpress%e8%81%94%e5%8a%a8obsidian/
声明:采用 CC BY-NC-SA 4.0 协议,转载请注明出处。
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇