Hexo 共有機能のPlugin Add Thisで動的なシェアボタンを追加

Hexoで生成したWEBサイトに共有機能を追加する手法を解説します。今回はAdd ThisというPluginで動的なシェアボタンを追加します。WEBアプリにも適用できるので覚えておくと便利です。HexoとGithub PagesでWEBサイトを作る方法はこちら

Add This

  • Add This
    • WEBページにコンテンツを追加するフリーのサービス
      • ex. シェアボタン,
    • サイトでポチポチ押しながらデザインを決めると、自動でソースを作ってくれるNo Codeっぽいサービスです

Add This

  • 注意点
    • 上記のサービスで生成した共有ボタンは、Adブロックサービスでブロックされる可能性があります

手順

Account設定

  • AddThisにアクセス

  • Make it Shareableより”Get Started”を押下
    image

  • Sign In

    • 今回はGoogleアカウントを利用します

Sign In

  • Create Account
    • Email AddressとCountryを設定
    • Registerを押下

Create Account

  • アカウントの設定画面が開きます
    image

シェアボタンを作成

  • 上部タブのTools⇒ADD NEW TOOLを選択
    • Share Buttonsを押下

Select a Tool

  • 用意されたデザインから追加したいシェアボタンをタイプを選択

    • PCとMobileでそれぞれどのように表示されるか確認可能です
  • Inline
    Inline

  • Floating
    Floating

  • Expanding

    • カーソルを合わせるとにゅっと出てくる

Expanding

今回はExpandingを使ってみます

  • Continueを押下

  • カスタマイズを行いActivateToolを押下

  • TutorialとCodeが表示されます
    Get The Code

  • 各記事のHTMLに以下を貼れば反映されるとのこと

    • Hexoの場合は設定ファイルに以下のsrc=以降のURLを規定するだけで全ページに反映してくれました
      1
      2
      <!-- Go to www.addthis.com/dashboard to customize your tools -->
      <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5ee8d1fc16b460fb"></script>
  • 設定ファイルを変更

    • Hexoディレクトリ直下の_config.ymlではなく、テーマディレクトリの_config.ymlに設定します
      1
      \your-blog\themes\your-theme\_config.yml
  • _config.ymlのshare欄に設定

    1
    2
    3
    4
    5
    6
    # Share plugin settings
    # https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share
    share:
    # Share plugin name
    type: addthis
    install_url: //s7.addthis.com/js/300/addthis_widget.js#pubid=ra-XXXXXXXXXXXXXX

以上で設定は完了

関連記事

参考

Hexoにコメント欄を追加(Disqus)

こんにちは。今回はHexoで生成したWEBサイトにコメント欄を追加する手法について解説します。他の説明記事がどれも間違っていて(恐らくバージョンの問題)だいぶハマったのでまとめておきます。

1. Disqusとは

  • Disqus
    • コメント機能を拡張するサービス
    • 様々なPlatformに対してプラグインを提供
      • HexoのthemeはDisqusの活用を前提としたものが多く、簡単に導入可能です
      • ※ themeに対して設定する為、選定後の対処をお勧めします
    • 無料で利用を開始可能です

2. 導入手順

2.1. Disqusに登録

  • DisqusのSignupを実施

    • Twitter, FB, Googleアカウントの何れかを利用可能です
    • 私はGoogleアカウントを利用しました
    • 認証後にSignupを押下
  • “I want to install Disqus on my install”を選択

  • Create a new Site

    • 以下の欄を入力
      • Website Name
      • Category
    • CreateSiteを選択
  • 以下の順に選択

    • “Got it. Let’s get started!”
    • “I don’t see my platform listed, install manually with Universal Code”
  • 以上でDisqusのサイト用ページが作成されました

2.2. Disqus設定

  • 以下が設定ページです
  • Installation

    • Comment機能非対応のthemeの場合はこちらのスクリプトをサイトに貼り付けましょう
      • Hexoデフォルトのlandscapeであれば必要
        • 該当のejsとプレフィックスにつくファイルを編集してください
        • ファイル所在(landscapeの例)
          1
          Your-blog\theme\Your-Theme\layout\_partial
    • 本サイトに採用しているicarusであれば、この工程はスルーしてOK
  • “Configure”を押下

  • URLを入力

  • “Complete Setup”を押下

  • 上部のSettingタブを選択

  • 左のリストのGeneralを選択

    • “shortname”の値を控える
      • 後でhexoに設定します
    • 各項目に入力して”Save”を押下
  • 以上でDisqus側の設置は完了です
    • 細かく設定可能なので

2.3. Hexoに設定

  • shortnameをtheme側の_config.ymlに記述

    • 元の状態
      1
      2
      3
      comment:
      # Name of the comment plugin
      type:
  • 改修

    • typeにdisqusを設定
    • shortnameにdisqusで定義された値を設定
      1
      2
      3
      comment:
      type: disqus
      shortname: <from_disqus>
  • Comment機能があるthemeの場合は以上でOK(icarus等)

    • 以下のディレクトリがあるかで判断してください
      • Your-Blog\themes\Your-Theme\layout\comment

Trouble Shooting

  • ※Comment機能がないthemeの場合(デフォルトのLandscape等)の対応も載せておきます

      1. Hexo側の設定ファイルの改修も必要です
        • Your-Blog/_config.yml
          1
          2
          # disqus
          disqus_shortname: https-j-xaas-github-io
      1. Disqus/Setting/Installationで表示されるScriptを該当するejsファイルにコピペしてください
        • ejsファイルとは?
          • Tour-Blog/theme/Your-Theme/layoutの配下にあります
          • 例えばheader.ejsはHexoで各記事をgenerateする際に共通の設定を与えてくれるファイルです
          • つまり、headerに共通して与えたいスクリプトがあれば、ここにコピペするだけでOKです
  • ※旧バージョンの場合

    • 他の記事はどれも以下のように設定するよう書かれていましたがエラーになります
      1
      2
      3
      comment:
      disqus: [shortname]
      duoshuo: [shortname]
    • comment機能の設定ファイルを探して確認
      • 以下にありました
        • j-blog\themes\icarus\layout\comment\disqus.ejs
      • ”comment.shortname”とあることから、設定ファイルのcommentのshortnameの値を参照していることが分かります
        • themeによって特殊な設定が必要なケースも予想されるため、同じように確認してみてください
          1
          2
          3
          4
          5
          6
          (function() {
          var d = document, s = d.createElement('script');
          s.src = '//' + '<%= get_config('comment.shortname') %>' + '.disqus.com/embed.js';
          s.setAttribute('data-timestamp', +new Date());
          (d.head || d.body).appendChild(s);
          })();

3. 利用テスト

3.1. Localでチェック

  • 画面への反映をチェックしましょう
    1
    hexo server
  • 記事の下部にコメント欄を確認できます
    • 仕様はDisqusのSettingで細かく変更可能です
comment_example
  • コメントの投稿は本番環境でないとエラーになります

  • generate

    1
    hexo generate
  • 本番環境へデプロイ

3.2. 投稿

  • WEBから実際にコメントを投稿してみましょう
  • ”ログイン”よりGoogleアカウントでログイン
    • Disqusのアカウント登録に利用したアカウントを用いれば、管理者のコメントとして認識されます
comment_example
  • コメントを投稿してみましょう
    • 投稿者名の横に”管理者”が表示されます
      • Googleアカウントが実名なので、Twitterで登録しておけばよかったかも…
comment_example

3.3. アカウント登録

  • 記事の訪問者をイメージして、Twitterアカウントで試してみます
    • 事前に管理者アカウントから”ログアウト”しておきます
  • 投稿欄の下のTwitterマークを選択
    • 認証画面に飛びます
  • アカウント設定

    • 各入力項目を埋めて”Sign Up”を押下
      Disqus_Twitter認証画面
  • すると、以下のように規約が表示されます

disqus_allert
  • 設定したアドレスに以下のmailが届きます
    • 青字を押下
disqus_mail
  • 認証が完了しました
email_verified
  • WEB上でログイン
  • コメントを投稿
    • アイコン画像はTwitterのものがそのまま反映されるようです
twitter_comment
  • 以上でDisqusの解説は終了です。手軽なので是非導入してみましょう。

icarus(Hexo Theme) Tips Menuの編集

こんにちは。今回はHexoのthemeにicarusを採用した際のTipsを解説します。

  • icarusを適用すると以下のようなメニューがヘッダーに表示されます
  • ポイント
    • Aboutページは自分で作成する必要がある
    • Menuは追加・削除可能

Aboutページを追加

1. Hexoの通常の記事として生成

  • About-This-Blog.mdを生成
    1
    ng new 'About-This-Blog'
  • source/_posts内に生成されたファイルを編集

2. _config/ymlを改修

  • path: your-blog\themes\icarus>
    • About: 移行を生成した記事のパスに変更
    • Hexoの記事のパスは “/YYYY/MM/DD/Article_name” です
1
2
3
4
5
6
7
8
9
# Navigation bar link settings
navbar:
# Navigation bar menu links
menu:
Home: /
Archives: /archives
Categories: /categories
Tags: /tags
About: /2020/02/04/About-This-Blog/ # /aboutから変更

Menuを追加

  • メニューの追加も同様の箇所を改修するだけで簡単にできます

  • 以下を追加します

    • ポリシーページ
    • 自身のECサイトへのリンク
  • 作業は二点です

    • menuの項目を増やす
    • pathを指定する
      • 外部サイトはURLそのままでOKです
  • _config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # Navigation bar link settings
    navbar:
    # Navigation bar menu links
    menu:
    Home: /
    Archives: /archives
    Categories: /categories
    Tags: /tags
    About: /2020/02/04/About-This-Blog/ #/about
    Policy: /2020/03/17/Policy
    EC: https://sheeps.official.ec/
  • 確認

    1
    hexo server
  • 以下のように反映されます

  • 外部サイトに飛べるか確認
    • メニューの”EC”を押下
    • 以下のように画面が切り替わりました
      • 私が書いたマスコットキャラ:シープ君のグッズ一覧が出てきます
  • icarusは柔軟にメニューを弄れるのでカスタマイズ性が高いですね
    • 自身のWEBページに合わせて自由に編集してみてください
    • 個人で勉強ついでに開発しているWEB APが増えたら一覧ページをメニューに足そうと思います

おまけ:ロゴの変更

  • オリジナルのロゴ

    • 所在:\themes\icarus\source\images
      • logo.svg
    1. オリジナルのロゴを作成して同様のディレクトリに格納
      • original_logo.pngを作成して配置
    1. _config.ymlを編集
      • icarus側の設定ファイルを改修
        • themes\icarus_config.yml
      • 1
        2
        3
        4
        favicon: /images/favicon.svg

        # Path or URL to the website's logo to be shown on the left of the navigation bar or footer
        logo: /images/logo.svg
        • faviconをコメントアウトしないと上に被さって上手く表示できません
          1
          2
          3
          4
          #favicon: /images/favicon.svg

          # Path or URL to the website's logo to be shown on the left of the navigation bar or footer
          logo: /images/original_logo.png
  • これだけです

    • 画面への反映を確認
      1
      hexo server
ロゴ変更後

Hexoテーマ(theme)変更: icarus

概要

  • Hexoにはテーマのテンプレートが数百種類用意されており、簡単に変更することができます
    • デフォルトはlandscape
      • シンプルでいいのですが、デザインとして物足りなく、プロフィール欄も欲しいので変更します
<div style="text-align:center;">
<img src="https://user-images.githubusercontent.com/41946222/76521887-038c5300-64a9-11ea-8dfd-8454b8ce0dd2.png" height="100%" width="100%">
</div>

変更手順

    1. テーマの選定
    1. Githubからダウンロード
    1. 設定(_config.yml)を変更

1. テーマの選定

  • まずは採用したいテーマを決めましょう

  • Hexoのテーマ一覧は以下より確認できます

  • Star数のランキングはこちらです

    • 自身のWEBページの方向性に合わせて選定しましょう
  • 個人的にイケてると感じたテーマを紹介します

    • シンプル

      • icarus
        • プロフィール欄がデフォルトである
        • 各記事がサムネで表示される
          • 手間は少し増えてしまいそう
        • サイドのメニューと記事一覧を、画面サイズに応じて1~3列で表示
      • NexT
        • プロフィール欄がデフォルトである
        • モノトーン
        • 1~2列で表示
      • Material
      • indigo
      • Tranquilpeak
        • 最近見つけたので追加。そのうちこちらに変更するかも
    • ダイナミック

      • React
        • 会社サイト向け
          • デザインが作りこまれています
        • 別の機会に利用してみようと考えています
      • Ochuunn
        • サイトを開いた時の動作がおしゃれです
      • デザイナー向け
      • TKL
        • 一枚目から始まるタイプですが記事欄は質素です

今回採用したテーマ

  • icarus
    • GitのStar数ランク5位で人気のテーマです
  • 採用理由
    • tech記事らしいシンプルさ
    • 各記事がサムネで一覧表示される
    • サイドメニューに以下が表示される
      • Profile
      • Categories
      • Tag
      • RECENT
      • ARCHIVES

2. Githubからダウンロード

  • 2.1. Gitのhexo-theme-icarusのソースをhexo-pj-name/themes直下に配置します

  • 以下のコマンド一発で入ります

    • hexoディレクトリ直下で実行
      1
      git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
  • gitが入っていない方はhexo-theme-icarusの”clone or download”よりLocalにダウンロードしてthemes配下に展開してください

    • その際にフォルダ名を”icarus”に変更することを忘れないでください

3. 設定(_config.yml)を変更

  • _config.ymlをthemeにicarusを利用するように改修
    • HEXOディレクトリ直下にあります
1
2
## Themes: https://hexo.io/themes/
theme: icarus
  • icarusを適用

    • 以下を実行します
      1
      hexo s
    • 出力
      • icarusが出てきます
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        j-blog> hexo s
        INFO =======================================
        ██╗ ██████╗ █████╗ ██████╗ ██╗ ██╗███████╗
        ██║██╔════╝██╔══██╗██╔══██╗██║ ██║██╔════╝
        ██║██║ ███████║██████╔╝██║ ██║███████╗
        ██║██║ ██╔══██║██╔══██╗██║ ██║╚════██║
        ██║╚██████╗██║ ██║██║ ██║╚██████╔╝███████║
        ╚═╝ ╚═════╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚══════╝
        =============================================
        INFO Checking dependencies
        INFO Validating the configuration file
        WARN themes\icarus\_config.yml is not found. We are creating one for you...
        INFO themes\icarus\_config.yml is created. Please restart Hexo to apply changes.
  • 画面を確認

    1
    hexo server
  • 以下のようにテーマの変更を確認

  • 後はいつも通りgenerateして本番環境へデプロイしましょう
    1
    hexo generate

Trouble Shooting

  • 本番環境で表示が崩れている場合

    • 前のテーマからgenerateされていたファイルが邪魔をしています(私もハマりました)
      • generateで生成されるファイル群を削除すれば、修正できます
  • cheerioがないというエラーが出た場合

    1
    2
    ERROR Package cheerio is not installed.
    ERROR Please install the missing dependencies from the root directory of your Hexo site.
    • 以下を実行
      • Hexoディレクトリ直下で
        1
        npm install cheerio --save
    • hexo sを実行できます

icarus設定Tips

  • ハマる場面もあったので各種設定についても解説しておきます

ウィジェットを変更

  • icarus/layout/widget内のファイルを改修することで、左右の表示を変更できます

プロフィールを変更

  • icarusのwikiを参考に改修します

  • 上記には書いてありませんでしたが、改修する設定ファイルは以下になります

    • themes\icarus_cofig.yml
  • 中を確認すると以下のようにprofileの初期設定がされていることが分かります

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    # https://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
    widgets:
    -
    # Widget name
    type: profile
    # Where should the widget be placed, left or right
    position: left
    # Author name to be shown in the profile widget
    author: Your name
    # Title of the author to be shown in the profile widget
    author_title: Your title
    # Author's current location to be shown in the profile widget
    location: Your location
    # Path or URL to the avatar to be shown in the profile widget
    avatar:
    # Email address for the Gravatar to be shown in the profile widget
    gravatar:
    # Whether to show avatar image rounded or square
    avatar_rounded: false
    # Path or URL for the follow button
    follow_link: 'https://github.com/ppoffice'
  • 変更

    • profile画像は以下に格納しましょう
      • \themes\icarus\source\images
        • おしゅし のフリー素材として公開されている画像を用意しました
  • 改修例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    widgets:
    -
    # Widget name
    type: profile
    # Where should the widget be placed, left or right
    position: left
    # Author name to be shown in the profile widget
    author: J
    # Title of the author to be shown in the profile widget
    author_title: IT Specialist
    # Author's current location to be shown in the profile widget
    location: Tokyo Japan
    # Path or URL to the avatar to be shown in the profile widget
    avatar: images/oshushi.png
    # Email address for the Gravatar to be shown in the profile widget
    gravatar:
    # Whether to show avatar image rounded or square
    avatar_rounded: true
  • Profileの変更結果

<div style="text-align:center;">
<img src="https://user-images.githubusercontent.com/41946222/76530468-1d349700-64b7-11ea-8cae-6ed0407cc359.png" height="50%" width=50%">
</div>

背景の変更

1
2
3
4
5
6
7
# Article display settings
article:
# Code highlight settings
highlight:
# Code highlight themes
# https://github.com/highlightjs/highlight.js/tree/master/src/styles
theme: atom-one-light

目次を自動作成するプラグインの導入

  • hexo-tocをインストール
    1
    $ npm install hexo-toc --save
  • 目次を入れたい箇所に下記を追記すればOK。
1
<!-- toc -->

オプションとしてthemes/icarus/config.ymlに下記を追加します。

1
2
3
4
5
6
7
8
9
toc:
maxdepth: 3
class: toc
slugify: transliteration
decodeEntities: false
anchor:
position: after
symbol: '#'
style: header-anchor
  • 実際に記事に入れて見ましょう

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ---
    title: Hexoでサイトマップを自動生成 ~ Google Search Consoleへ登録
    thumbnails: /gallery/sitemap_thumnail.png
    date: 2020-03-10 23:23:23
    toc: true
    tags:
    - Hexo
    - Sitemap
    - google search console
    ---
    <!-- toc -->
    ## 概要
  • 画面を確認すると以下のように反映されていました。

  • 関連記事

@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×