引用别人的文章一直是个很麻烦的问题,因为几乎没有网站提供了如谷歌学术般的引用方式。所以,本文提供了一种给网站添加引用按钮的方式,支持采用 MLA 以及 APA 格式引用。

效果图

引用效果

开始操作

  1. 首先将绘制双引号的 HTML 以及 设置样式的 CSS 放入文章页
<style>
.gs_or_svg {
	position:relative;
	height:16px;
	vertical-align:text-bottom;
	fill:none;
	stroke:#898989;
}
.gs_or:not([data-lid=""])
.gs_or_sav .gs_or_svg {
	fill:#1a0dab;
}
.gs_or[data-lid] .gs_or_ldg .gs_or_svg {
	fill:#eee;
	animation:gs_anm_spin
1.2s .5s linear infinite;
}
a:active .gs_or_svg,a .gs_or_svg:active,a .gs_or_svg>*:active {
	stroke:#dd4b39;
}
</style>
<a href="javascript:void(0)"" title="引用" onclick="cite()"><svg viewBox="-1 0 17 16" class="gs_or_svg"><path d="M1.5 3.5v5h2v.375L1.75 12.5h3L6.5 8.875V3.5zM9.5 3.5v5h2v.375L9.75 12.5h3L14.5 8.875V3.5z"></path></svg></a>
  1. 加上弹出窗口的代码

这一步参考了谷歌学术的引用按钮设计以及引用窗口设计。[1]

<div class="gs_md_wnw" id="citation">
  <div class="gs_md_d gs_vis" tabindex="-1" style="top: 10px;position:relative;max-width:80%">
    <div class="gs_md_hdr">
      <a href="javascript:void(0)" onclick="closecite();">
        <span class="close">×</span></a>
      <h2 class="gs_md_hdr_t">引用</h2>
      <div class="gs_md_hdr_b"></div>
    </div>
    <div class="gs_md_bdy" style="max-height: 240px; padding-right: 32px;background-color: white">
      <style>.gs_el_ph #gs_cit{width:100%;max-width:100%;}#gs_citt table{width:100%;margin-top:-8px;}#gs_citt td,#gs_citt th{vertical-align:top;padding:8px 0;}#gs_citt th{text-align:right;font-weight:normal;color:#777;padding-right:16px;white-space:nowrap;-webkit-user-select:none;user-select:none;}#gs_citi{margin:16px 0 0 0;text-align:center;}.gs_el_ph #gs_citi{margin:16px 0 8px 0;}.gs_citi{margin-right:16px;white-space:nowrap;padding:7px 0 5px 0;}</style>
      <div id="gs_citd">
        <div id="gs_citt">
          <table>
            <tbody>
              <tr>
                <th scope="row" class="gs_cith">MLA</th>
                <td>
                  <div tabindex="0" class="gs_citr">(MLA 网页引用的内容)</div></td>
              </tr>
              <tr>
                <th scope="row" class="gs_cith">APA</th>
                <td>
                  <div tabindex="0" class="gs_citr">(APA 网页引用的内容)</div></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

其中 MLA 以及 APA 网页引用的内容需要根据自己网站的需求具体生成。关于 APA 以及 MLA 引用格式可以参考 MLA 引用网页格式 以及 APA 引用网页格式.

接着加入这一块对应的 css 文件(因为太长了所以放的代码是经过压缩后的:

.close {font-size: 20px;margin-left:10px;}
.gs_md_hdr{display:flex;align-items:center;height:47px;border-bottom:1px solid #e0e0e0;border-bottom-color:rgba(0,0,0,.12);background-color:#f5f5f5;}.gs_md_hdr>a,.gs_md_hdr>a.gs_btn_lrge{flex:0 0 auto;width:41px;height:47px;}.gs_el_ph .gs_md_hdr>a{margin:0 2px 0 0;}.gs_el_ph a.gs_md_hdr_c{margin:0 0 0 2px;}.gs_md_hdr_b{margin:0 41px 0 16px;}.gs_el_ph .gs_md_hdr_b{margin:0 16px;}.gs_md_hdr_t:empty~.gs_md_hdr_b{margin-left:0;}.gs_md_hdr_b:empty{width:41px;margin:0;}.gs_el_ph .gs_md_hdr_b:empty{margin-right:2px;}.gs_md_hdr_b:empty:not(:last-child){display:none;}.gs_md_hdr_b>button{min-width:51px;height:33px;}.gs_md_hdr_t{flex:1 1 auto;font-size:18px;font-weight:normal;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}.gs_md_bdy{overflow-y:auto;box-sizing:border-box;padding:24px 41px 0 41px;}.gs_md_bdy:after{display:block;content:"";clear:both;padding-bottom:24px;}.gs_el_ph .gs_md_bdy{padding:16px 16px 0 16px;}.gs_el_ph .gs_md_bdy:after{padding-bottom:16px;}.gs_el_ph .gs_md_wmw .gs_md_bdy{position:absolute;width:100%;top:48px;bottom:0;}.gs_md_lbl{display:block;font-size:16px;margin:0 0 16px 0;word-wrap:break-word;}.gs_md_btns{margin:24px 0 0 0;white-space:nowrap;}.gs_el_ph .gs_md_btns{margin:16px 0 0 0;}
.gs_md_wnw{z-index:1200;position:fixed;top:30%;left:0;width:100%;height:100%;visibility:hidden;}#gs_md_s{background-color:#fff;opacity:.5;width: 100%;height: 100%;z-index: 1200;position: fixed;top: 0;left: 0;visibility:hidden}.gs_el_ta #gs_md_s.gs_vis,.gs_md_wnw.gs_vis{visibility:visible;transition:all 0s;}.gs_md_wnw>.gs_md_d{position:relative;margin:0 auto;width:464px;box-shadow:2px 2px 8px rgba(0,0,0,.2);white-space:normal;}.gs_el_ta .gs_md_wnw>.gs_md_d,.gs_el_ph .gs_md_wnw>.gs_md_d{box-shadow:2px 2px 8px rgba(0,0,0,.65);}.gs_el_ph .gs_md_wnw>.gs_md_d{width:80%;max-width:440px;}
  1. 加入遮罩

弹窗必然是要加入一个半透明的遮罩才能够更加美观。把下面这段代码放到 <body> 的下面:

<div id="gs_md_s"></div>
  1. 添加 js 函数

可以看到我们在之前的引用按钮处绑定了cite函数,在弹出窗口的关闭按钮处绑定了closecite函数。现在就加入这两个函数的 js 代码。

var forReset = 0;
function cite() {
		var top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
		forReset = top;
		document.getElementById("citation").classList.add("gs_vis");
		document.body.style.top = -top+"px";
		document.body.style['position'] = 'fixed';
		document.getElementById("gs_md_s").style.visibility = "visible";
};
function closecite() {
		document.getElementById("citation").classList.remove("gs_vis");
		document.body.style['position'] = '';
		document.body.scrollTop = document.documentElement.scrollTop = forReset || 0;
		document.getElementById("gs_md_s").style.visibility = "hidden";
};

其中为了防止关闭窗口网页会回到顶端,参考了跳出弹窗页面禁止滚动(PC 端和手机端)之后[2],我在上述代码加入了与 top 有关的内容。

完成以上所有步骤,你就可以得到如效果图一般的效果了!


  1. 谷歌学术引用按钮设计 ↩︎

  2. 跳出弹窗页面禁止滚动(PC 端和手机端) ↩︎