[ghost] 블로그 설정

spring·2020년 11월 9일

1. Code syntax highlighting

https://prismjs.com/download.html 에서 원하는 테마와 언어(전체선택 가능)과 부가 기능(Line Numbers, Show Language, Highlight Keywords, Toolbar)를 선택하고 prism.js 와 prism.css를 다운받는다.

그리고 default.hbs 파일을 열어 아래의 코드를 <head>...</head> 사이에 입력한다.

<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

마찬가지로, 아래의 코드를 </body> 바로 위에 입력한다.

<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

2. disqus 댓글 서비스 등록

아래의 코드를 default.hbs의 </body> 바로 위에 입력한다.

<script id="dsq-count-scr" src="//kim-spring.disqus.com/count.js" async></script>

아래의 코드를 post.hbs의 </main> 태그 밑에 삽입한다.

<div id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = "{{url absolute="true"}}";  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = "ghost-{{comment_id}}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://blogdotghost.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Code Injection의 site header에 아래 내용 추가

<style type="text/css">
.subscribe-button {
display:none;
}
</style>

3. Latex 수식 사용하기

Code Injection의 site header에 아래 내용 추가

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  jax: ["input/TeX", "output/SVG"],
  tex2jax: {inlineMath: [['$$', '$$']],displayMath : [['$$$$','$$$$']]},
});
</script>
<script src="//cdn.bootcss.com/mathjax/2.6.1/MathJax.js?config=TeX-AMS_HTML"\></script>