如何实现/可否添加一个文章编辑链接，跳转到对应Github

Musicminion commented 10 months ago

Make sure

[X] Difficult to implemented through custom.
[X] Difficult to implemented through third-party plugins.

Is your feature request related to a problem? Please describe

以多库龙为例，每个文档下面，都会有一个类似编辑链接的按钮，然后点击就可以跳转到对应的Github链接。例如下图所示

Describe the solution you'd like

通过config文件，可以选择是否开启显示编辑链接
通过config文件，配置文章的编辑链接的基路径，例如github.dev/user/repo/blob/main/
然后在每个博客的末尾加上一个<a></a>链接，然后定向到快速编辑的页面，最终的路径为基路径加上当前文档的url或者文件路径等

Describe alternatives you've considered

一种可以替代的方法是注入，但是我发现似乎获取不到window这个东西，大概代码如下所示

// 文章编辑链接
// hexo.extend.filter.register('theme_inject', function(injects) {
//     // var editBaseUrl = "https://github.com/aaa/blog/tree/main/source/_posts"
//     // var curPath = window.location.href

//     // var editUrl = editBaseUrl + curPath
//     // injects.postMarkdownEnd.raw('default', '<a href="' + editUrl + '">编辑链接</a>');
// });

感觉可以放在这个tag下面，或者放在这个版权信息的旁边（

zkqiang commented 10 months ago

考虑使用注入 <script> 方式，可以解决 window 获取不到的问题，包括你说的 “放在这个tag下面” 也可以用 js 来插入

mobeicanyue commented 10 months ago

并不好实现因为这个涉及到 gitlab gitee 甚至自部署 gitea 各种代码平台并且还有可能是服务器博客自部署，代码并不公开等情况，无法查看源码

Musicminion commented 10 months ago

感谢大家的回复（我又尝试了一下，也算做好了，正好在这里写一下，给有需要的人用一下）

效果大概如下，按下句号就可以类似github一样跳转到对应的vscode编辑页面，当然也可以拉到页面最底部有跳转链接）

效果图

https://github.com/fluid-dev/hexo-theme-fluid/assets/84625273/1175b052-22dc-4e0b-8a7e-9c54e2f330c4 截屏2024-01-30 23 13 05

1）开始前检查

为了方便的找到在github上面的对应博文的路径，我采用的方法是保证：Github中_post文件目录的格式，和网站博客文章的URL的格式一样，否则就不可以。

举个例子，在_config.yml文件里面，有这样一行：

# 之前的永久链接是会把年份、月份、日期都加上的，但是我已经按照年份、月份、日期分好了文件夹
# 所以这里就不需要了，直接把永久链接设置为标题就可以了
# permalink: :year/:month/:day/:title/
permalink: :title/

因为我的_post文件夹的组织就是按照年份+月份组织的，所以我没有必要在permalink里面单独再加上年月日。我的文件结构如下：

@Musicminion ➜ /workspaces/blog (main) $ tree ./source/_posts/
./source/_posts/
├── 2024
│   └── 01
│       ├── From-Halo-To-Hexo
│       │   └── home.png
│       ├── From-Halo-To-Hexo.md

举个例子：

permalink: :title/，原文章的_post/2024/01/hello.md最终的目录就会变成：blog.com/2024/01/hello
permalink: :year/:month/:day/:title/，:title部分还是会变成/2024/01/hello，最终的结果就是：blog.com/2024/01/31/2024/01/hello，这显然不对劲是吧

显然没有人按照第二种方法这样干，因为重复了。所以如果需要快速跳转URL，就需要使用permalink: :title/，具体有关permalink的说明请查看Permalinks | Hexo

2）开始代码注入

首先在scripts目录下，就是我们要注入的代码，可以随便新建一个my.js的文件，添加下面的内容

// Add edit url
hexo.extend.filter.register('theme_inject', function(injects) {
    injects.postMetaBottom.raw('editurl-link', `<div class="post-meta">
    <script async src="/js/goEdit.js" crossorigin="anonymous"></script>
    <a href="javascript:goEdit()" style="font-size: .9rem;"> <i class="iconfont icon-pen"></i> 编辑链接 </a>
    </div>`);
})

然后为了把script引入，需要新建一个文件source/js/goEdit.js，并加上下面的内容

function goEdit(){
    // 获取浏览器的地址的路径
    let path = window.location.pathname

    // 去掉末尾的/，如果有的话，因为后面要加上.md
    if (path.endsWith("/")){
        path = path.substring(0, path.length - 1)
    }

    // 编辑的地址，这里我用github.dev，免费的编辑器
    let editBaseUrl = "https://github.dev/Musicminion/blog/blob/main/source/_posts"

    // 打开编辑页面
    window.open(editBaseUrl + path + ".md")
}

// 加上快捷键 当按下.的时候，就会调用getEditURL
document.addEventListener('keydown', function(event) {
    if (event.key === "."){
        goEdit()
    }
})

此外我还加上了快捷键监听的，只要按句号.，就可以实现在新窗口中打开github的编辑了，感兴趣的小伙伴欢迎尝试。

3）补充

当然，你可能有自己的URL的处理逻辑，具体的话你可以修改上面的goEdit.js的逻辑就好了。如果是一些其他方法生成的文章路径，只需要处理好window.location.pathname与github对应的链接的关系就好了。但是如果博客文章的URL里面完全不包含任何的md路径文件信息，恐怕这个方法就没有任何作用了。

fluid-dev / hexo-theme-fluid