athul / archie

A minimal Hugo Theme
https://athul.github.io/archie
MIT License
975 stars 301 forks source link

Academic Icons? #33

Closed g-pacheco closed 2 years ago

g-pacheco commented 3 years ago

Hello,

I have been trying to create an Academic page using this theme, but I have realised that Feather does not have all the icons I would need (e.g. Google Scholar and Orcid).

I know that Academicons has most of them, so I was wondering if you would have any suggestions on how to call it from Archie.

Thanks in advance, George.

athul commented 3 years ago

Hey @g-pacheco , sorry for the late reply

Of course you can, but you might need to edit the head.html and add the cdn link

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">

And you need to add the classname to the icon but sadly here too you want to edit the html where you want the icons to be present.

If you want the icons in markdown, maybe a hugo shortcode could help you. But here too you have to know the classname of the icon to be present. If you want something like this, create a new file in the layouts/shortcodes folder

// academic.html

<i class="ai {{ .Get "acd"}}></i>

and you can call this in markdown via

{{<academic acd="ai-google-scholar-square ai-3x">}}
// academic is from the name of the file
g-pacheco commented 3 years ago

Hello @athul,

Thanks very much for your reply.

I think I managed to add the icons with the following modifications:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">

<header>
    <div class="main">
        <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>:~#</p>
    {{- range $index, $key := .Site.Params.Social -}}
    <a class="soc" href="{{ $key.url }}" title="{{ $key.name }}"><i data-feather="{{ $key.icon }}"></i></a>|
    {{- end -}}
    <i class="ai ai-google-scholar ai-1.25x"></i>|
    <i class="ai ai-orcid ai-1.25x"></i>|
    </div>
    <nav>
        {{ range .Site.Menus.main }}
        <a href="{{ .URL }}">{{ .Name }}</a>
        {{ end }}
    </nav>
</header>

However, they do not look good in this way as you can see here.

Thus, what I was really wondering was if you would be willing to add them to the core of your theme (any academic using Archie will need these icons -- that is for sure). Then one could call them internally through the config.toml file with something like:

[[params.social]]
name = "Orcid"
icon = "orcid"
url = "XXX"

[[params.social]]
name = "Google Scholar"
icon = "google-scholar"
url = "XXX"

I am aware that this will be much more work for you (sorry!), but this change would make your theme much more flexible.

I hope you will have the time and willingness to consider this :)

Best, George.