# 引言

尊重原创,为 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 分类下

zh-CN.yaml
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>

# 效果预览

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

更新于 阅读次数