hexo-theme-landscape icon indicating copy to clipboard operation
hexo-theme-landscape copied to clipboard

Published 20 hours ago • verified publisher icon hexojs

add support for social links

Open lijinpei opened this issue 5 years ago • 12 comments

This pr add syntax to _config.yaml as follows:

social:
  zhihu: https://www.zhihu.com || zhihu
  github: https://github.com/somebody || github
  twitter: https://twitter.com/somebody || twitter

The key is an identifier for the social link (and what will be shown when mouse hover on the icon), the string before the "||" is the link and the part after is the name of the awesome, the part "igloo" of

<i class="fas fa-igloo">

This syntax is taken from theme next. Ths effect is like: image Note the first icon not shown is because firefox/chrome cann't show it, the icon for github and twitter looks fine.

lijinpei avatar Mar 10 '19 15:03 lijinpei

There is already an older version of Fontawesome included in this theme, can't you use it instead of introducing a new one?

tomap avatar Mar 10 '19 15:03 tomap

Sorry I didn't look closely before creating this pr. I need to be able to write github instead of f09b to use its icon, I don't know if this is possible with otf fonts? By the way feel free to close this pr(although it bothered me when I can't create a social link)

lijinpei avatar Mar 10 '19 16:03 lijinpei

just add the class fa-github to <i> https://fontawesome.com/v4.7.0/icon/github

tomap avatar Mar 10 '19 17:03 tomap

The problem is landscape doesn't include needed css file #8

lijinpei avatar Mar 11 '19 01:03 lijinpei

@lijinpei I like your proposal. Can you rebase? For fontawesome, can you use v4.7.0? Add the (minified version) css file to "source/css/font", then use the following in <head>

<%- css('css/fonts/font-awesome-4.7.0.min.js') %>

instead of <link rel="stylesheet">.

curbengh avatar Aug 10 '19 11:08 curbengh

There is already an older version of Fontawesome included in this theme, can't you use it instead of introducing a new one?

The css version lets the user refer to a icon by name, the "font file" version can only be referred to by unicode.

lijinpei avatar Sep 13 '19 18:09 lijinpei

I haven't test it, so far I can verify that https://github.com/hexojs/hexo-theme-landscape/blob/d43a9ef40ac0c7c1ed1ef1f188fff7dcce62ae65/source/css/fonts/font-awesome-4.7.0.min.css corresponds to https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

curbengh avatar Sep 14 '19 03:09 curbengh

I haven't test it, so far I can verify that https://github.com/hexojs/hexo-theme-landscape/blob/d43a9ef40ac0c7c1ed1ef1f188fff7dcce62ae65/source/css/fonts/font-awesome-4.7.0.min.css corresponds to https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

I download the file from fontawesome's website, it should be the same with the cdn's version. Maybe we can deplot it from some cdn link, or upgrade to fontawesome 5 ? Fontawesome 5 support more icons than fa 4.

lijinpei avatar Sep 14 '19 05:09 lijinpei

We need to verify that the library has not been modified (by the committer). We prefer to self-host; I'm aware we still use jsdelivr, we are (slowly) moving to self-host. font-awesome 5 is clunky to integrate, i.e. fa- is separated into fas- and fab-.

social:
  zhihu: https://www.zhihu.com || zhihu
  github: https://github.com/somebody || github
  twitter: https://twitter.com/somebody || twitter

why not just derive icon name from the object key, instead of using ||, like this.

please document the feature in readme and _config.yml.

curbengh avatar Sep 14 '19 06:09 curbengh

👍 icon

curbengh avatar Sep 14 '19 11:09 curbengh

Hi, Is it mergeable? I'd like to see this feature 👍

RammusXu avatar Aug 18 '20 07:08 RammusXu

Superseded by https://github.com/hexojs/hexo-theme-landscape/pull/177

Thanks for your contribution!

stevenjoezhang avatar Apr 07 '23 15:04 stevenjoezhang