# 引言
尊重原创，为 Shoka 主题添加文章转载标记 —— 在主页文章缩略信息头部 segments 和 正文头部添加转载信息
# 实现
主要利用 文章 Front-matter 标记转载信息，在生成发布文章时进行解析添加相关转载信息
关于 Front-matter 标记的约定
以 || 作为分割，分为左右两部分
- 第一部分：代表链接显示的文本内容已经指向超链接时显示的文本内容
- 第二部分：代表链接网址
注意：可以只有第一部分，那么链接文本和网址均使用这一部分的内容，如果链接网址非 http 开头，默认转载链接不可追溯，使用 reprint_unable_trace_source 代指的文本串做文本提示 (添加到 zh-CN.yaml 等文本中的字符码)，一些案列如下
reprintlink: 互联网 | |
// 只有 第一部分 | |
// 链接文本 => 互联网，链接网址 => 互联网(非 http 开头，使用预设文本串做提示文文本) |
🚀 本文转载自：互联网『原文出处暂无处追寻』
reprintlink: https://www.baidu.com | |
// 只有 第一部分 | |
// 链接文本 => https://www.baidu.com，链接网址 => https://www.baidu.com |
🚀 本文转载自：https://www.baidu.com
reprintlink: 百度||https://www.baidu.com | |
// 分为两部分 | |
// 链接文本 => 百度，链接网址 => https://www.baidu.com |
🚀 本文转载自：百度
# 修改文件列表
需要修改的文件列表如下，相对于 Shoka 主题根目录
├── languages | |
│ └── zh-CN.yml | |
├── layout | |
│ └── _macro | |
│ └── postmeta.njk | |
├────── _partials | |
│ └── post | |
│ └── post.njk |
# 修改多语言字段信息
添加转载相关文本串，博主这儿为了方 (偷) 便 (懒) 只加了简体中文，其他的语言添加方法类似，目前加在了 post 分类下
post: | |
# ... | |
reprint: 『转载』 | |
reprintlink: '🚀 本文转载自：%s' | |
reprint_unable_trace_source: 『原文出处暂无处追寻』 | |
# ... |
# 修改主页文章缩略信息头部 segments
文件 layout\_macro\postmeta.njk ，放在 meta 标签头部
<div class="meta"> | |
{%- if item.reprintlink %} | |
<span class="item" title="{{ __('post.reprint') }}" style="margin-right: -0.625rem"> | |
<span class="icon"> | |
<i class="ic i-link-alt"></i> | |
</span> | |
<span class="reprint"> | |
<font>{{ __('post.reprint') }}</font> | |
</span> | |
</span> | |
{%- endif %} | |
<!--...--> | |
</div> |
# 修改正文顶部显示信息
文件 layout\_partials\post\post.njk ，放在 body 结构 Gallery support 后面
<div class="body md{%- if post.direction and post.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}" itemprop="articleBody"> | |
{# Gallery support #} | |
{%- if post.photos and post.photos.length %} | |
<div class="gallery" itemscope itemtype="http://schema.org/ImageGallery"> | |
{%- for photo in post.photos %} | |
<img data-src="{{ _image_url(photo, post.path) }}" itemprop="contentUrl"> | |
{%- endfor %} | |
</div> | |
{%- endif %} | |
<!--新增部分begin--> | |
{%- if post.reprintlink %} | |
{%- set reprintlinkInfo = post.reprintlink.split('||') %} | |
{%- set linkUrl = reprintlinkInfo[0] | trim %} | |
{%- if reprintlinkInfo[1] %} | |
{%- set linkUrl = reprintlinkInfo[1] | trim %} | |
{%- endif %} | |
{%- set linkName = reprintlinkInfo[0] | trim %} | |
{%- if linkUrl.startsWith('http') %} | |
<div class="note info"> | |
<p>{{__('post.reprintlink', '')}} | |
<a href="{{ linkUrl }}" rel="noopener external nofollow noreferrer" target="_blank" class="exturl" title="{{ linkUrl }}">{{ linkName }}</a> | |
</p> | |
</div> | |
{%- else %} | |
<div class="note info"> | |
<p>{{__('post.reprintlink', post.reprintlink)}} | |
<span class="blue">{{__('post.reprint_unable_trace_source')}}</span></p> | |
</div> | |
{%- endif %} | |
{%- endif %} | |
<!--新增部分end--> | |
</div> |
# 效果预览
具体效果可以参考 本文 实现 部分的案例，或者 《为什么程序员都是夜猫子？》 一文头部的转载信息
