1. 需求

有时需要复制别人的或者自己的文章,用markdown写作的话,需要markdown形式链接: [标题](链接地址),这样需要手动复制,粘贴很麻烦,所以产生一个念头,在文章中增加一键复制markdown文章链接功能。当前的功能仅仅是在个人博客中,还有很大的局限性。不过也算一次尝试,最本质目的是通过案例学习知识,记录学习过程。

2. 分析

2.1. 分析数据来源和去向

主要想法是在hexo-butterfly主题的copyright区域添加按钮。研究了一下,butterfly使用的是pug模板渲染引擎。在大致了解,学习基本语法后,开始魔改之旅(⚠️魔改之前记得版本管理)

主要的技术点,难点是之前不知道butterfly的框架设计,有些东西不知道,研究了半天,大概知道了,数据的来源和去向。

页面的重复性内容是靠模板实现的,而这个模板是Pug模板引擎渲染的,所以首先要知道某个内容是如何产生的,数据来源哪里,整体的过程是怎样

这个区域的pug文件位于blog\themes\butterfly\layout\includes\post下的post-copyright.pug文件下,内容如下:

// post-copyright.pug
if theme.post_copyright.enable && page.copyright !== false
  - let author = page.copyright_author ? page.copyright_author : config.author
  - let authorHref = page.copyright_author_href ? page.copyright_author_href : `mailto:${config.email}`
  - let url = page.copyright_url ? page.copyright_url : page.permalink
  - let info = page.copyright_info ? page.copyright_info : _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
  .post-copyright
    .post-copyright__author
      span.post-copyright-meta= _p('post.copyright.author') + ": "
      span.post-copyright-info
        a(href=authorHref)=author
    .post-copyright__type
      span.post-copyright-meta= _p('post.copyright.link') + ": "
      span.post-copyright-info
        a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
	//- 增加的代码 - start
    .post-copyright_link
      span.post-copyright-meta= _p('post.copyright.md_link') + ": "
      span.post-copyright-info
        button(id='get-btn',onclick='clickTogetLink()') click me to obtain markdown link
    //- 增加的代码 - end
    .post-copyright__notice
      span.post-copyright-meta= _p('post.copyright.copyright_notice') + ": "
      span.post-copyright-info!= info

如果不熟悉pug语法,肯定一头雾水,于是想着写一个[pug教程(待续)](//- 增加的代码 - start)

以文章作者一栏为例

可以看到,有两个部分组成,在渲染后的代码中,可以知道,在Pug中也能知道

// post-copyright.pug
.post-copyright
    .post-copyright__author
      span.post-copyright-meta= _p('post.copyright.author') + ": "
      span.post-copyright-info
        a(href=authorHref)=author

其中 .post-copyright表示创建一个class选择器为post-copyright的div标签,在渲染后的代码中是这样的:

同样的,然后.post-copyright__author创建div,span.post-copyright-meta= _p('post.copyright.author') + ": "表示创建一个class选择器为post-copyright-meta的span标签,内容为后面的 _p('post.copyright.author') + ": ",然后这个内容其实是个变量,最后变成「文章作者 :」注意是文章作者+:,是分开的。

至于pug文件中有let变量声明的,是因为有些内容是变量

// post-copyright.pug
- let url = page.copyright_url ? page.copyright_url : page.permalink

为什么需要用三目运算符(待续)判断是因为可能这个变量的内容来源是变化的,是不存在的。判断之后得出一个结果,用于后续的功能实现。

还有一个地方:

// post-copyright.pug
- let info = page.copyright_info ? page.copyright_info : _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)

这个地方格式是: let x = a ? b :_p(c,y1,y2,y3),经过测试,y1,y2,y3是参数,这里对应最后的版权声明,存在两个超链接:

也就是说post.copyright.copyright_content这个「变量」对应的「值」中也有「变量」,需要接收参数,对应blog\themes\butterfly\languages\zh-CN.yml文件中的

copyright:
    author: 文章作者
    link: 文章链接
    md_link: Markdown分享链接
    md_copyButton: '<button id="get-bnt" onclick="clickToGetLink()">click me to obtain markdown link</button>'
    copyright_notice: 版权声明
    copyright_content: '本博客所有文章除特别声明外，均采用
      <a href="%s" target="_blank">%s</a> 许可协议。转载请注明来自 <a href="%s" target="_blank">%s</a>！'
  recommend: 相关推荐

copyright_content: '本博客所有文章除特别声明外，均采用
      <a href="%s" target="_blank">%s</a> 许可协议。转载请注明来自 <a href="%s" target="_blank">%s</a>！'

其中%s格式化字符就是要接收的参数。

顺便说明: pug文件中page.xxx.xxx或者post.xxx.xxx,或者config.xxx,theme.xxx都是外部yml文件中的配置项。theme表示主题配置文件blog\source\_posts\_data\butterfly.yml,config表示博客配置文件blog\_config.yml,而post表示blog\themes\butterfly\languages\zh-CN.yml的post配置属性:

搞清楚了数据的是哪里来的,和用在哪里,就可以修改了