# 引言

# 实现

主要利用 文章 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

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">
    
    {%- if post.photos and post.photos.length %}
        <div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
            {%- for photo in post.photos %}
                <img data-src="<!--swig0-->" itemprop="contentUrl">
            {%- endfor %}
        </div>
    {%- endif %}

    <!--comment1-->
    {%- 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><!--swig2-->
                    <a href="<!--swig3-->" rel="noopener external nofollow noreferrer" target="_blank" class="exturl" title="<!--swig4-->"><!--swig5--></a>
                </p>
            </div>
        {%- else %}
            <div class="note info">
                <p><!--swig6-->
                    <span class="blue"><!--swig7--></span></p>
            </div>
        {%- endif %}
    {%- endif %}
    <!--comment8-->
</div>

# 效果预览

具体效果可以参考 本文 实现 部分的案例，或者 《为什么程序员都是夜猫子？》 一文头部的转载信息