Embedding Scopus API Based HTML on Hugo Academic Site

Ming Su

Last updated on Jun 15, 2022 3 min read Technology

基于论文doi地址，获取实时被引次数

通过doi链接地址，通过scopus 提供的API获取文章的实时被引次数。步骤如下：

在 Scopus上创建自己的API key。
获取论文的doi地址，如：10.1016/j.watres.2014.09.038；
在网页中插入如下html代码，获得该论文的被引次数。

<object height="50" data="https://api.elsevier.com/content/abstract/citation-count?doi=10.1016/j.watres.2014.09.038&httpAccept=text/html&apiKey=92144b49c378154306281c7517112256"></object>

效果如下：

实际网页：

demo

为实现在hugo academic主题中的publication页自动加载被引次数，需要按如下步骤设置。

将文件theme/academic/layouts/partial/page_header.html复制到layouts/partial/page_header.html，并修改如下。

{{ $page := . }}
{{ $featured := (.Resources.ByType "image").GetMatch "*featured*" }}
{{ $anchor := $page.Params.image.focal_point | default "Smart" }}

{{/* Set default titles for node pages */}}
{{ $title := .Title }}
{{ if and (not $title) .IsNode }}
  {{ if eq .Type "post" }}
    {{ $title = i18n "posts" }}
  {{ else if eq .Type "talk" }}
    {{ $title = i18n "talks" }}
  {{ else if eq .Type "publication" }}
    {{ $title = i18n "publications" }}
  {{end}}
{{end}}

{{/* Header image */}}
{{ if and .Params.header.image (not (and $featured (not .Params.image.preview_only))) }}
<div class="article-header">
  {{ $img_src := urls.Parse .Params.header.image }}
  {{ if $img_src.Scheme }}
  <img src="{{ .Params.header.image }}" class="article-banner" itemprop="image" alt="">
  {{ else }}
  <img src="{{ (printf "/img/%s" .Params.header.image) | relURL }}" class="article-banner" itemprop="image" alt="">
  {{ end }}

  {{ with .Params.header.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
</div>
{{end}}

{{/* Featured image */}}
{{ if and $featured (not .Params.image.preview_only) }}
{{ $image := $featured.Resize "800x" }}
<div class="article-header d-xl-none">
  <div class="featured-image" style="background-image: url('{{ $image.RelPermalink }}');"></div>
  {{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
</div>

{{ $image := $featured.Fill (printf "680x500 q90 %s" $anchor) }}
<div class="container-fluid split-header d-none d-xl-block">
  <div class="row">
    <div class="col-6">
      <div class="split-header-content">
        <h1 itemprop="name">{{ $title }}</h1>

        {{ with $page.Params.subtitle }}
        <p class="page-subtitle">{{ . | markdownify | emojify }}</p>
        {{end}}

        {{ partial "page_metadata" (dict "content" $page "is_list" 1) }}

        {{ partial "share.html" $page }}
        {{ partial "page_links_div.html" $page }}
        {{ with $.Params.doi }}
        <object height="50" data="https://api.elsevier.com/content/abstract/citation-count?doi={{ . }}&httpAccept=text/html&apiKey=7f59af901d2d86f78a1fd60c1bf9426a"></object> 
        {{ end }}
      </div>
    </div>
    <div class="col-6">
        <div class="split-header-image">
            <img src="{{ $image.RelPermalink }}" itemprop="image" alt="">
            {{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
        </div>
    </div>
    <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>
  </div>
</div>
</div>

<div class="article-container d-xl-none">
  <h1 itemprop="name">{{ $title }}</h1>

  {{ with $page.Params.subtitle }}
  <p class="page-subtitle">{{ . | markdownify | emojify }}</p>
  {{end}}

  {{ partial "page_metadata" (dict "content" $page "is_list" 0) }}

  {{ partial "page_links_div.html" $page }}
  {{ with $.Params.doi }}
  <object height="50" data="https://api.elsevier.com/content/abstract/citation-count?doi={{ . }}&httpAccept=text/html&apiKey=7f59af901d2d86f78a1fd60c1bf9426a"></object> 
  {{ end }}
  <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>
</div>
{{else}}
  {{/* Case when page has no image */}}

  {{/* Wider container for nodes */}}
  {{ $ctnr := "article-container" }}
  {{ if $page.IsNode }}
    {{ $ctnr = "universal-wrapper" }}
  {{end}}
<div class="{{$ctnr}} pt-3">
  <h1 itemprop="name">{{ $title }}</h1>

  {{ with $page.Params.subtitle }}
  <p class="page-subtitle">{{ . | markdownify | emojify }}</p>
  {{end}}

  {{ if not .IsNode }}
    {{ partial "page_metadata" (dict "content" $page "is_list" 0) }}
    {{ partial "page_links_div.html" $page }}
  {{end}}
  {{ with $.Params.doi }}
  <object height="50" data="https://api.elsevier.com/content/abstract/citation-count?doi={{ . }}&httpAccept=text/html&apiKey=7f59af901d2d86f78a1fd60c1bf9426a"></object> 
  {{ end }}
  <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>
</div>
{{end}}

基于论文doi地址，获取pdf预览

通过doi链接地址，通过scopus提供的API获取文章的pdf预览。步骤如下：

在 Scopus上创建自己的API key。
获取论文的doi地址，如：10.1016/j.watres.2014.09.038；
在网页中插入如下html代码，获得该论文的被引次数。

<iframe width="700" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://api.elsevier.com/content/article/doi/10.1016/j.watres.2014.09.038?httpAccept=application/pdf&apiKey=7f59af901d2d86f78a1fd60c1bf9426a&cdnRedirect=true"></iframe>

效果如下：

实际网页：

demo

为实现在hugo academic主题中的publication页自动加载pdf预览框，需要按如下步骤设置。

将文件theme/academic/layouts/publication/single.html复制到layouts/publication/single.html，并修改如下。

{{ partial "header.html" . }}
{{ partial "navbar.html" . }}
<div class="pub" itemscope itemtype="http://schema.org/CreativeWork">

  {{ partial "page_header.html" . }}

  <div class="article-container">

    {{ if .Params.abstract }}
    <h3>{{ i18n "abstract" }}</h3>
    <p class="pub-abstract" itemprop="text">{{ .Params.abstract | markdownify }}</p>
    {{ end }}

    {{ if (.Params.publication_types) and (ne (index .Params.publication_types 0) "0") }}
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-10">
        <div class="row">
          <div class="col-12 col-md-3 pub-row-heading">{{ i18n "publication_type" }}</div>
          <div class="col-12 col-md-9">
            {{ range $index, $pubtype := .Params.publication_types }}
            <a href="{{ ($.Site.GetPage "section" "publication").RelPermalink }}#{{ . | urlize }}">
              {{ index $.Site.Params.publication_types (int .) }}
            </a>
            {{ end }}
          </div>
        </div>
      </div>
      <div class="col-md-1"></div>
    </div>
    <div class="d-md-none space-below"></div>
    {{ end }}

    {{ if .Params.publication }}
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-10">
        <div class="row">
          <div class="col-12 col-md-3 pub-row-heading">{{ i18n "publication" }}</div>
          <div class="col-12 col-md-9">{{ .Params.publication | markdownify }}</div>
        </div>
      </div>
      <div class="col-md-1"></div>
    </div>
    <div class="d-md-none space-below"></div>
    {{ end }}

    <div class="space-below"></div>

    <div class="article-style">{{ .Content }}</div>

    {{ with .Params.doi }}
        <iframe width="100%" height="1024" frameborder="0"
            scrolling="no" marginheight="0" marginwidth="0"
            src="https://api.elsevier.com/content/article/doi/{{ . }}?httpAccept=application/pdf&apiKey=7f59af901d2d86f78a1fd60c1bf9426a&cdnRedirect=true">
        </iframe> 
    {{ end }}


    {{ partial "tags.html" . }}
    {{ partial "page_author.html" . }}

  </div>
</div>

{{ if .Site.Params.section_pager }}
<div class="article-container article-widget">
  {{ partial "section_pager.html" . }}
</div>
{{ end }}

{{ partial "footer_container.html" . }}
{{ partial "footer.html" . }}

Scopus API Hugo PDF

Ming Su

Associate Professor of Environmental Engneering

My research interest is water quality problems in drinking water bodies, with a focus on harmful algal blooms and associated taste & odor problems.