AttackOnNunu

Once more into the fray


  • 홈

  • About

  • 태그

  • 카테고리

  • 아카이브

  • 검색

(Hexo_NexT_Theme) 마우스를 따라 움직이는 배경

작성일 2019-07-22 In BLOG 🗂 , HEXO-NEXT-THEME 댓글:

제 블로그에 적용되어 있는 테마는 Next 입니다. theme-next
틈틈히 테마를 커스터마이즈 하고 있습니다.

이번 포스트에서는 배경에 마우스를 따라 움직이는 캐릭터를 적용하는 방법에 대해 적어 보겠습니다.


설치(Installation)

hexo-helper-live2d

블로그 디렉토리(기본 hexo 디렉토리)에서 Node Package Module(NPM)을 사용하여 hexo-helper-live2d 를 설치합니다.

npm install --save hexo-helper-live2d

live2d-widget-model

마음에 드는 모델의 assets을 가져와 적용할 수도 있지만, 그건 다음에 기회가 된다면 시도해 보기로 하겠습니다.

아래의 기본적으로 제공해주는 Live2D 리소스 중에서 마음에 드는 모델을 골라 설치하겠습니다.

모델_리스트

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install –save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install –save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

모델_이미지_1

epsilon2_1
epsilon
gf
gf
haru
haru
haruto
haruto
hibiki
hibiki
koharu
koharu
miku
miku

모델_이미지_2

ni-j
ni-j
nico
nico
nietzche
nietzche
nipsilon
nipsilon
nito
nito
shizuku
shizuku

모델_이미지_3

tororo
tororo
tsumiki
tsumiki
Unitychan
unitychan
wanko
wanko
z16
z16

고르셨다면 똑같이 npm을 사용하여 설치해 주도록 하겠습니다.

npm install {your model's package name}
저의 경우 wanko를 선택하였습니다.
npm install --save live2d-widget-model-wanko

설정(Config setting)

블로그의 _config.yml 파일 혹은 테마의 _config.yml 중 편한 곳에 아래 속성을 추가합니다.
model 의 use 부분에 사용할 모델명으로 수정하셔야 합니다.

live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-wanko #설치한 모델을 이곳에서 적용하셔야 합니다
display:
position: right
width: 150
height: 300
mobile:
show: true
react:
opacity: 0.7

더 자세한 설명은 깃허브에 가시면 보실 수 있습니다.Detail settings


적용(Execute)

hexo clean 을 통해 기존 작성되었던 public 폴더를 지워주시고 새롭게 hexo generate 실행하셔야 적용되는 것을 확인하실 수 있습니다.
hexo server 로 로컬 환경에서 바로 확인하실 수도 있습니다.

koharu 모델을 한번 적용시켜 보았습니다.

sample


Reference

Github : hexo-helper-live2d

(파이썬) 04 Lists

작성일 2019-07-22 In LANGUAGE 🚀 , PYTHON , KAGGLE 댓글:

Reference

  • Kaggle 홈페이지 - Kaggle
  • 7강 ‘Lists’ - Python Micro-Course Home Page

영어 실력이 부족하여 문맥이 이해가 가지 않는 부분은 원본을 참고하시길 바랍니다…
언젠가는 실력이 나아지기를…



리스트(Lists)

파이썬의 Lists 는 정렬된 순서의 값을 나냅니다. 아래의 예제를 통해 어떻게 생성하는지 살펴보겠습니다.

  • INT_type
  • string_type
  • list_of_lists
  • mix_type
<figure class="highlight python"><table><tr><td class="code"><pre><span class="line">primes = [<span class="number">2</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">7</span>]</span><br></pre></td></tr></table></figure>

lists 에는 다른 타입의 데이터도 넣을 수 있습니다.

planets = ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune']

list의 list를 만들 수도 있습니다.

hands = [
['J', 'Q', 'K'],
['2', '2', '2'],
['6', 'A', 'K'], # (Comma after the last element is optional)
] # (I could also have written this on one line, but it can get hard to read)
hands = [['J', 'Q', 'K'], ['2', '2', '2'], ['6', 'A', 'K']]

서로 다른 타입의 변수들도 같이 넣을 수 있습니다.

my_favourite_things = [32, 'raindrops on roses', help] # (Yes, Python's help function is _definitely_ one of my favourite things)

색인(Indexing)

대괄호를 사용하여 list의 각 요소에 접근할 수 있습니다.

어떤 행성이 태양과 가장 가까울까요?

  • CLOSEST
  • NEXT_CLOSEST
  • FURTHEST
  • NEXT_FURTHEST

파이썬은 0부터 시작하는 인덱싱을 사용하므로 첫 번째 요소의 인덱스는 0 입니다.

<figure class="highlight python"><table><tr><td class="code"><pre><span class="line">planets[<span class="number">0</span>]</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&apos;Mercury&apos;</span><br></pre></td></tr></table></figure>

다음으로 가까운 행성은 어디일까요?

planets[1]
'Venus'

태양으로 부터 가장 먼 행성은 어느 것일까요?
목록의 끝에있는 요소는 -1부터 시작하여 음수로 액세스 할 수 있습니다.

planets[-1]
'Neptune'
planets[-2]
'Uranus'

슬라이싱(Slicing)

첫 3개의 행성은 어떤 것인가요? slicing 을 통해 우리는 답을 얻을 수 있습니다.

  • CODE_1
  • CODE_2

planets[0:3] 은 인덱스 0 이상 3 미만의 planet 의 요소들을 가리킵니다.

planets[0:3]
['Mercury', 'Venus', 'Earth']

시작과 끝 인덱스는 모두 선택사항(optional)입니다. 시작 인덱스를 생략하면 0 으로 간주됩니다. 따라서 다음과 같이 작성할 수도 있습니다.

planets[:3]
['Mercury', 'Venus', 'Earth']

마지막 인덱스를 생략하면 범위를 list의 길이로 간주합니다.

<figure class="highlight python"><table><tr><td class="code"><pre><span class="line">planets[<span class="number">3</span>:]</span><br></pre></td></tr></table></figure><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">[&apos;Mars&apos;, &apos;Jupiter&apos;, &apos;Saturn&apos;, &apos;Uranus&apos;, &apos;Neptune&apos;]</span><br></pre></td></tr></table></figure>즉, 인덱스 3부터 시작하는 모든 요소들을 나타냅니다.

슬라이싱할 때 음수 인덱스를 사용할 수도 있습니다.

처음과 마지막을 제외한 모든 행성


# All the planets except the first and last

planets[1:-1]
['Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus']

마지막 행성 3개


# The last 3 planets

planets[-3:]
['Saturn', 'Uranus', 'Neptune']

리스트 수정(Changing lists)

list는 “변경 가능(mutable)” 하며, 이는 “제자리(in place)”에서 수정할 수 있음을 의미합니다.

list를 수정하는 한 가지 방법은 인덱스 또는 슬라이스를 사용하는 방법입니다.

예를 들어 Mars(화성)의 이름을 바꾸고 싶다고합시다 :

planets[3] = 'Malacandra'
planets
Malacandra가_뭐지?

나니아 연대기로 유명한 C. S. Lewis의 소설 침묵의 행성 밖으로(Out of the Silent Planet)에서 화성인들을 Ma’aleca’andra 라고 부릅니다.

</div>
['Mercury', 'Venus', 'Earth', 'Malacandra', 'Jupiter', 'Saturn', 'Uranus', 'Neptune']

음… 이름이 너무 긴 것 같군요. 첫 3개 행성들의 이름을 줄여보겠습니다.

planets[:3] = ['Mur', 'Vee', 'Ur']
print(planets) # 출력 이후 변경 사항들을 되돌려 놓겠습니다.
planets[:4] = ['Mercury', 'Venus', 'Earth', 'Mars',]
['Mur', 'Vee', 'Ur', 'Malacandra', 'Jupiter', 'Saturn', 'Uranus', 'Neptune']

리스트 함수(List functions)

파이썬은 list를 사용하는데 매우 유용한 몇 가지 함수들을 제공합니다.

  • LEN
  • SORT
  • SUM
  • MAX

len 은 list의 길이를 알려줍니다.


# How many planets are there?

len(planets)
8 

sorted 는 정렬된 list를 반환합니다.


# The planets sorted in alphabetical order

sorted(planets)
['Earth', 'Jupiter', 'Mars', 'Mercury', 'Neptune', 'Saturn', 'Uranus', 'Venus'] 

sum 은 무엇을 반환할지 눈치채셨을 겁니다.

primes = [2, 3, 5, 7]
sum(primes)
17 

이전에 min 및 max 를 사용하여 최소 또는 최대 인수를 구해봤습니다. 우리는 하나의 list를 매개 변수로 전달할 수도 있습니다.

max(primes) 
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">7 </span><br></pre></td></tr></table></figure>

참고: 객체(Interlude: objects)

지금까지 ‘Object(객체)’라는 용어를 많이 사용했습니다 - 파이썬에서 모든 것이 객체라는 것을 들어보셨을 수도 있습니다. 이것이 무엇을 의미할까요?
간단히 말해서, 객체들은 무언가(변수, 함수 등)를 주변에 가지고 다닙니다. 그리고 우리는 파이썬의 도트 구문(dot syntax)을 사용하여 그것들에 액세스 할 수 있습니다.

예를 들어 파이썬의 numbers에는 imag 라는 허수를 나타내는 변수를 가지고 있습니다. (특별한 경우의 수학 연산을 하지 않는 한, 이것을 사용할 필요는 없을 것입니다.)

x = 12

# x is a real number, so its imaginary part is 0.

print(x.imag)

# Here's how to make a complex number, in case you've ever been curious:

c = 12 + 3j
print(c.imag)
0
3.0

객체가 운반하는 것들 중에는 함수들도 포함되어 있습니다. 객체에 속한 함수를 메소드(method) 라고합니다. (imag 와 같이 객체에 속한 기능이 없는 객체를 속성(attribute) 이라고 합니다.)

예를 들어 numbers에는 bit_length 라는 메서드가 있습니다. 다시 말하지만, 도트 ​​구문을 사용하여 액세스할 수 있습니다.

x.bit_length 
<function int.bit_length> 

메소드를 호출하기 위해서는 괄호를 추가해야 합니다.

x.bit_length() 
4 

help 함수에 함수들을 전달했듯이(e.g. help(max)), 메소드들도 똑같이 전달할 수 있습니다.

help(x.bit_length) 
Help on built-in function bit_length:

bit_length(...) method of builtins.int instance
int.bit_length() -> int

Number of bits necessary to represent self in binary.
>>> bin(37)
'0b100101'
>>> (37).bit_length()
6

앞선 예들은 매우 애매한 것들이였습니다. 지금까지 살펴본 객체 유형들(numbers, functions, booleans)의 속성이나 메소드들은 흔히 사용되지 않는 것들이기 때문입니다.

하지만 list에는 항상 자주 사용되는 몇 가지 메소드들이 있습니다.

리스트 메소드들(List methods)

list.append 를 사용하여 list의 마지막에 item을 추가할 수 있습니다:

  • .APPEND
  • HELP

# Pluto is a planet darn it!

planets.append('Pluto')
planets
['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune', 'Pluto'] 

왜 append() 함수에는 반환값이 없을까요? help(planets.append) 를 호출하여 설명서를 확인해 보세요.

잠깐 : append는 planets에만 있는 메소드가 아니라 모든 리스트 타입의 객체가 가지고 다니는 메소드이므로 help(list.append)를 호출해도 됩니다. 하지만 help(append)는 호출하면 Python에서 “append”라는 변수가 없다고 응답할 것 입니다. “append”는 리스트 내에만 존재합니다 - 내장 함수인 max 나 len 와 같이 독립적으로 존재하지 않습니다.

-> None 은 list.append 가 아무것도 반환하지 않는다는 것을 말합니다. 하지만 planets를 확인해보면 메소드의 호출로 값이 제대로 추가된 것을 볼 수 있습니다 :

help(planets.append) 
Help on built-in function append:

append(...) method of builtins.list instance
L.append(object) -> None -- append object to end

list.pop 은 list의 마지막 element를 제거하고 반환합니다:

planets.pop()
planets
'Pluto'
['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune']

리스트 검색(Searching lists)

지구는 태양계의 몇 번째 행성일까요? list.index 를 사용해서 해당 색인(index)을 알아낼 수 있습니다.

planets.index('Earth')
2

3번째 행성이군요.(i.e. 색인은 0에서 시작하기 때문)
그렇다면 플루토 행성은 몇 번째 일까요?

planets.index('Pluto')
---------------------------------------------------------------------------
ValueError Traceback (most recent call last)
<ipython-input-30-3a8584cba91a> in <module>()
----> 1 planets.index('Pluto')

ValueError: 'Pluto' is not in list

저런, 이전 예제에서 ‘Pluto’를 삭제 했었다는걸 까먹었군요
이와 같은 예상치 못한 상황을 피하기 위해 in 연산자를 사용하여 목록에 특정한 값이 들어 있는지를 확인할 수 있습니다.

  • EXAMPLE_1
  • EXAMPLE_2

# Is Earth a planet?

"Earth" in planets
True 

# Is Calbefraques a planet?

"Calbefraques" in planets
False 

이 외에도 여기서 다루지 않은 몇 가지 흥미로운 list 메소드들이 있습니다. 특정 객체에 포함된 모든 메소드와 속성들을 알고 싶다면 객체 자체에서 help() 를 호출하시면 됩니다. 예를 들어, help(planets) 는 모든 list 메서드에 대해 알려줍니다.

  • CODE
  • output
help(planets) 
Help on list object:

class list(object)
| list() -> new empty list
| list(iterable) -> new list initialized from iterable's items
|
| Methods defined here:
|
| **add**(self, value, /)
| Return self+value.
|
| **contains**(self, key, /)
| Return key in self.
|
| **delitem**(self, key, /)
| Delete self[key].
|
| **eq**(self, value, /)
| Return self==value.
|
| **ge**(self, value, /)
| Return self>=value.
|
| **getattribute**(self, name, /)
| Return getattr(self, name).
|
| **getitem**(...)
| x.**getitem**(y) <==> x[y]
|
| **gt**(self, value, /)
| Return self>value.
|
| **iadd**(self, value, /)
| Implement self+=value.
|
| **imul**(self, value, /)
| Implement self*=value.
|
| **init**(self, /, *args, **kwargs)
| Initialize self. See help(type(self)) for accurate signature.
|
| **iter**(self, /)
| Implement iter(self).
|
| **le**(self, value, /)
| Return self<=value.
|
| **len**(self, /)
| Return len(self).
|
| **lt**(self, value, /)
| Return self<value.
|
| **mul**(self, value, /)
| Return self*value.
|
| **ne**(self, value, /)
| Return self!=value.
|
| **new**(*args, **kwargs) from builtins.type
| Create and return a new object. See help(type) for accurate signature.
|
| **repr**(self, /)
| Return repr(self).
|
| **reversed**(...)
| L.**reversed**() -- return a reverse iterator over the list
|
| **rmul**(self, value, /)
| Return value*self.
|
| **setitem**(self, key, value, /)
| Set self[key] to value.
|
| **sizeof**(...)
| L.**sizeof**() -- size of L in memory, in bytes
|
| append(...)
| L.append(object) -> None -- append object to end
|
| clear(...)
| L.clear() -> None -- remove all items from L
|
| copy(...)
| L.copy() -> list -- a shallow copy of L
|
| count(...)
| L.count(value) -> integer -- return number of occurrences of value
|
| extend(...)
| L.extend(iterable) -> None -- extend list by appending elements from the iterable
|
| index(...)
| L.index(value, [start, [stop]]) -> integer -- return first index of value.
| Raises ValueError if the value is not present.
|
| insert(...)
| L.insert(index, object) -- insert object before index
|
| pop(...)
| L.pop([index]) -> item -- remove and return item at index (default last).
| Raises IndexError if list is empty or index is out of range.
|
| remove(...)
| L.remove(value) -> None -- remove first occurrence of value.
| Raises ValueError if the value is not present.
|
| reverse(...)
| L.reverse() -- reverse *IN PLACE*
|
| sort(...)
| L.sort(key=None, reverse=False) -> None -- stable sort *IN PLACE\*
|
| ----------------------------------------------------------------------
| Data and other attributes defined here:
|
| **hash** = None

“output” 탭을 클릭해서 전체 도움말을 살펴 보세요. list 에는 __eq__ 및 __iadd__ 와 같은 이상한 이름의 메소드들이 많이 있습니다. 지금은 이것들에 대해 크게 신경쓸 필요가 없습니다. (이러한 메서드를 아마 평생 여러분이 직접 호출하지는 않을 것입니다. 그러나 색인 연산자나 비교 연산자와 같은 구문을 사용할 때, 이들은 배후에서 호출됩니다) 가장 흥미로운 메서드들은 목록 맨 아래에 있습니다(append, clear, copy 등).

튜플(Tuples)

Tuple은 list와 매우 비슷합니다. 단 2 가지 면에서 조금 다릅니다.

1: 대괄호 대신 소괄호를 사용하여 생성합니다.

t = (1, 2, 3) 
혹은
t = 1, 2, 3 # 위와 동일한 내용입니다
t
(1, 2, 3) 

2: 수정이 불가능 합니다.

x = 0.125
x.as_integer_ratio()

---

TypeError Traceback (most recent call last)
<ipython-input-36-e6cf7836e708> in <module>()
----> 1 t[0] = 100

TypeError: 'tuple' object does not support item assignment

튜플은 여러 개의 반환 값을 갖는 함수에 자주 사용됩니다.
예를 들어, float 객체의 as_integer_ratio() 메소드는 분자와 분모를 튜플 형태로 반환합니다.

x = 0.125
x.as_integer_ratio()
(1, 8) 

여러 개의 값들을 각각의 변수로 할당이 가능합니다.

numerator, denominator = x.as_integer_ratio()
print(numerator / denominator)
0.125 

이제 우리는 두 개의 변수를 교환하는 것 처럼 보이는 고전적인 Stupid Python Trick™ (파이썬 속임수?)의 본질을 꿰뚫어볼 수 있게 되었습니다!

a = 1
b = 0
a, b = b, a
print(a, b)
0 1 




연습문제(Your Turn)

리스트(lists) 예제

(Hexo_NexT_Theme) Hexo 블로그에 Google Adsense 설정_1

작성일 2019-07-17 In BLOG 🗂 , HEXO-NEXT-THEME 댓글:

Hexo-NexT-Theme 에 구글 애드센스를 추가하는 방법에 대해 알아보겠습니다!

홈페이지에 접속하여 구글 계정으로 로그인하고 구글 애드센스에 가입하는 방법은 인터넷에 검색하면 금방 찾으실 수 있습니다.

간략하게 설명드리자면 구글 검색엔진에 등록하는 것과 비슷한 방식으로 광고를 등록하고자 하는 웹사이트 URL를 입력하고 이메일 주소를 입력하면 됩니다.

중요한 것은 애드센스 활성화 를 하기 위해서는 HTML 문서를 수정해야 하는데 하나하나 모든 포스트의 HTML 문서를 수정하는 것은 시간 낭비 같습니다.
(만약 hexo clean으로 초기화 하고 다시 hexo generate 하게되면 헛고생 한게 되니…)
hexo generate를 통해 markdown 문서와 여러 javascript 파일들을 통해 포스트를 생성하기 때문에 javascript 를 손보면 해결될 것 같은 느낌이듭니다.

google_adsense.ejs 파일 생성

/themes/hexo-theme-next/layout/_custom/google_adsense.ejs

테마가 설치된 경로의 layout폴더에 _custom 폴더가 없다면 생성하시고 있으시면 그 안에 google_adsense.ejs 파일을 새로 생성합니다.

Adsense 코드 복사

생성된 google_adsense.ejs 파일에 사이트 검토를 위한 소스 코드를 복사 붙여 넣기합니다. (아래는 예시로 google_ad_client의 키 값이 없습니다)


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "your key",
enable_page_level_ads: true
});
</script>

_layout.swig 파일의 수정

_layout.swig 파일이 블로그 포스트의 전체적인 레이아웃을 담당하고 있는 것을 알 수 있습니다.
여기 태그 안에 저희가 생성한 javascript 파일을 넣으면 됩니다.

<!-- Google AdSense start -->
{% include '_custom/google_adsense.ejs' %}
<!-- Google AdSense end -->

hexo generate 후 확인하기

hexo g -d 한 후 블로그의 소스코드 보기를 통해 저희가 작성한 코드가 잘 적용되어 있는지 확인할 수 있습니다.
구글 애드센스 사이트 검증을 요청하면 아래와 같은 화면을 보실 수 있습니다.

1…272829…33
NUNU

NUNU

개인적으로 공부하면서 정리한 내용들을 블로그에 남기고 있습니다.
99 포스트
18 카테고리
53 태그
RSS
Creative Commons
© 2021 NUNU
Powered by Hexo v3.9.0
|
Theme – NexT.Mist v7.2.0