最近发现维基百科的词条页面加多了一个 PDF 文件下载按钮,无独有偶,在 WikiHow 的页面也发现 PDF 文件下载按钮,因为平常浏览这两个网站的次数并不频繁,所以不清楚具体是什么时候伊始有的。

编按:维基百科早前就提供页面打印功能,该功能可以将文件保存为 PDF,与后面的 PDF 文件下载功能有所不同(该功能仅限 电脑页面)。

在 Typecho 博客上设计 PDF 下载按钮之思路
wikipedia dl as pdf flie

在 Typecho 博客上设计 PDF 下载按钮之思路
wikihow dl as pdf flie

在早前的部分文章里,我也是有存放 PDF 文件,一般是通过 <a> 标签来链接文件下载地址,例如 这个 就是,虽然可以使用 markdown 语法快速插入链接,但是下载位置不是很明显,于是便有了像 Wikipedia 这样的一个固定位置 PDF 下载按钮的想法。

由于我本人并不是学程序语言专业的,所以部分 php 代码是在 stackoverflow 搜到的,之后再集合 Typecho 特性进行调整。


添加一个 PDF icon

首先使用 Class 属性写一个按钮样式,样式在网上搜索即可,包含谷歌在内都有提供,样式的代码放在 post.php,固定前端显示按钮,固定位置看个人需求调动。

<small> // 将按钮调小,看需求添加;
<span class="mx-1"> // 按钮样式大小,看需求添加;
<i class="fas fa-file-pdf"> //PDF 样式的 font icon,样式可换其它 icon;
<a>pdf</a>  // 一段描述,可自定义任意文字
</i>
</span>
</small>

在 Typecho 博客上设计 PDF 下载按钮之思路
PDF 按钮效果,此时仅仅是个 logo

一开始的思路是通过 JavaScript 函数获取当前页面的 PDF 链接再传递给按钮,问了学后端的同学,说前端很难实现,于是便放弃这条思路。(事实上,这种方式无法使用外链)

后面在后台编辑文章的时候留意到下方的自定义字段,这是 Typecho 官方早前就有的一个功能,通过自定义字段来调用前端功能,如自定义文章的描述和关键词(但对于我这种小白来说等于摆设),便联想到能不能 JavaScript 函数 + 自定义字段来调用 PDF 链接。


点击按钮 → 触发 onclick 对象 → 返回 onclick 事件 → 触发 Typecho 自定义字段 → 返回下载链接


随着这个思路,尝试将两者结合:

onclick 事件对象代码,和上方按钮代码放在一起。

// onclick 事件的对象
<a href="javascript:;" onclick="fun()"> 

onclick 事件代码,同样放在 post.php 任意位置。

// onclick 事件
<script>
function fun(){
//...script code(添加注册事件,如链接、接口等)
}
</script> 

typecho 自定义字段代码,放在 functions.php 或者 post.php。

<?php
$fieldValue = $this->fields->pdf; // PDF 可替换任意词
$this->fields->pdf(); // 与替换任意词保持一致
?>;

完整的集合了自定义字段代码和按钮 JavaScript 函数

// onclick 事件
<script>
function fun(){
window.location.href="<?php
$fieldValue = $this->fields->pdf; // PDF 可替换任意词
$this->fields->pdf(); // 与替换任意词保持一致
?>;"
}
</script> 

这样以来,只需要在编辑文章的界面,在自定义字段添加 PDF 载链接即可形成一个完整的事件,没有放链接无法形成完整事件。

在 Typecho 博客上设计 PDF 下载按钮之思路
自定义字段需要与自己设置的保持一致,右边内容填入 PDF 文件下载链接即可

测试结果如下:

在 Typecho 博客上设计 PDF 下载按钮之思路

点击按钮后自动跳转至浏览器浏览 PDF 文件页面

测试效果到达预期效果,将自定义字段直接加入到后台编辑面板

 //自定义字段添加设置面板函数
 function themeFields($layout) {
 $pdf = new Typecho_Widget_Helper_Form_Element_Text('pdf', NULL, NULL, _t('PDF 文件下载链接'), _t('支持外链'));
 $pdf->input->setAttribute('class', 'w-100');
 $layout->addItem($pdf);
 }

在 Typecho 博客上设计 PDF 下载按钮之思路
pdf 自定义字段添加设置面板函数

如果是在后台直接将 pdf 文件上传到附件的,对读者而言并不友好,因为 Typecho 博客上传文件后默认使用数字命名方式,下载的时候就会出现文件名纯数字(如上图),保存到本地根本不知道是什么内容,还要点击来查看,所以需要修改 Typecho 博客主文件的代码,由于修改主文件代码可能会导致网站的附件或链接出现问题,所以这里不提供,建议直接放外链(如 OD 网盘共享文件)。

修改主文件代码后最终的实现效果如下:

在 Typecho 博客上设计 PDF 下载按钮之思路
经过调整后的效果

PDF 文件名与上传时保持一致,方便用户本地保存管理。事实上,这思路可以应用于其它按钮,如附件下载按钮。


如何制作 PDF 文件

在 Typecho 博客上设计 PDF 下载按钮之思路
Typora 官网界面

我平常文章的起稿就是用 Typora 写的,这个软件强大到可以导出任何格式的文件,其中就包含 PDF 文件,相较于 md 文件,PDF 也可以更好的保护图片,同时对普通群体较为友好,Desktop 用户无论是使用哪款浏览器都可以打开。此外,PDF 文件支持外链、锚点等功能,作为离线文件是首选格式。


thx for reading