HEXO 블로그의 링크 클릭시 전체화면으로 띄우기

Posted on Edited on In Word count in article: 412 Reading time ≈ 1 mins.

HTML5 게임을 post 에 넣었다

게임 컨텐츠를 추가하고 싶어서 HTML5 게임정보를 구해서 POST 로 작성했는데
게임정보를 추가하는 방법이 2가지 있었다

  • iframe 으로 넣는 방법
  • 링크를 추가해서 새창으로 띄우는 방법

HTML5 게임이 웹브라우저에서 실행되기 때문에
PC 에서는 그나마 인터페이스가 나쁘지 않았지만
모바일에서는 인터페이스가 좋지 않아서 두 방법 다 만족스럽지 않았다

전체화면으로 띄우는 방법을 찾아보다

다른 게임 WEB 을 보니 전체화면으로 제공을 해주고 있었다
그렇다는 이야기는 전체화면으로 띄우는 기능이 있다는 것이다

Web APIs FullscreenOptions

역시나 풀스크린 API 가 있었다

더 찾아보니 풀스크린 API 를 이용한 screenfull.js 서비스도 있었다

screenfull.js 서비스를 Hexo 블로그에 적용하다

우선 테스트용 HTML 페이지 를 만들었다

Jquery 와 screenfull.min.js 를 라이브러리로 사용하고
a 태그의 title 로 클릭을 판단하고
iframe id 를 고유값으로 부여하여 해당 iframe 을 전체화면으로 띄운다
전체화면에서 돌아올 때 iframe 정보를 초기화 한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
  <title>fullscreen player</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://skyksit.com/skip/screenfull.min.js"></script>
  <script>
    $(function() {
      var fullscreenelem;
      $("a[title='fullscreen']").click(function() {
        var gameCode = $(this).attr('href').substr(1);
        console.log('gameCode = ' + gameCode);
        const goUrl = 'https://html5.gamemonetize.com/' + gameCode + '/';

        const iframe = document.getElementById(gameCode);
        iframe.setAttribute('src', goUrl);
        if (screenfull.isEnabled) {
          screenfull.request(iframe, {navigationUI: 'hide'});
        }
      });
    });

    function fullscreenchange() {
      if (screenfull.isFullscreen) {
        fullscreenelem = screenfull.element;
      } else {
        fullscreenelem.setAttribute('src', '');
      }
    }

    if (screenfull.isEnabled) {
      screenfull.on('change', fullscreenchange);
    }
  </script>
</head>
<body>
  <div>
    <a href="#w6hncjwrs6sxd1gme8eegi947gasnc3k" title="fullscreen" rel="external nofollow noopener noreferrer">🕹️게임하기</a>
  </div>
  <div>
    <iframe id="w6hncjwrs6sxd1gme8eegi947gasnc3k"></iframe>
  </div>
  <div>
    <a href="#7pazfjvm0adas1zpdkvem3xcpi4cqc4x" title="fullscreen" rel="external nofollow noopener noreferrer">🕹️게임하기</a>
  </div>
  <div>
    <iframe id="7pazfjvm0adas1zpdkvem3xcpi4cqc4x"></iframe>
  </div>
</body>

Hexo 를 수정하다

skip_render 옵션 활성화

html과 js파일이 Hexo 엔진으로 변경되지 않도록 skip_render 옵션을 추가해줬다

_config.yml
1
skip_render: "skip/**/*"

# 으로 입력된 정보도 link 로 인식하도록 link.js 를 수정
4줄 추가했다

node_modules/hexo/lib/plugins/tag/link.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  const rUrl = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[.!/\\w]*))?)/;
+ const sharpUrl = /^#\w+/;
..
..
..

if (rUrl.test(item)) {
  url = item;
  break;
+ } else if (sharpUrl.test(item)) {
+  url = item;
+  break;
} else {
  text.push(item);
}

screenfull.min.js 와 gmplayer_fullscreen.js 를 footer 에 추가했다

node_modules/hexo-theme-icarus/layout/common/footer.jsx
1
2
3
4
        return <footer class="footer">
+            <script src="/skip/screenfull.min.js"></script>
+            <script src="/skip/gmplayer_fullscreen.js"></script>
            <div class="container">

Hexo 는 Scripts 태그에 jquery 에 있기 때문에 jquery 가 먼저 로딩되도록 위치를 위로 한줄 올렸다

node_modules/hexo-theme-icarus/layout/layout.jsx
1
2
3
+-                <Scripts site={site} config={config} helper={helper} page={page} />
                <Footer config={config} helper={helper} />
                <Search config={config} helper={helper} />