hexo hexo bug patch category.ejs

Hexo Bug Patch and Tuning

헥소 버그수정 및 기능개선

Posted by 옐란 on 2021-02-25

개요

  • Hexo가 blog 설치/구동에 편하긴한데, 테마를 품질에 따라 튜닝요소가 많이 필요한듯 하다. beantech 테마를 사용중인데, 여기저기 문제가 많아서 소소히 고쳐가며 쓰고 있다.

발견된 문제점들(미해결 사항)

  1. google analytics 연동오류 : google의 애널리스틱 -> 데이터 스트림방식으로 설정이 바뀐것에 대한 수정작업 필요한듯

    (2021.03.17) 검색엔진 최적화(SEO) 관련 플러그인 설치/설정후 정상적으로 동작함을 확인

  2. 방문자 count 문제 : tistory처럼 쉽게 설정할수 없음. 방문자 count 서비스를 찾아서 붙여야하는데, 잘 정리된 레퍼런스를 찾을수 없음

    Total/today/yesterday 형태가 가장 보기 좋음

  3. SNS settings에 medium 연결기능은 없음 : 이것도 기존꺼 참고해서 코딩가능한 부분인가?

Blog 설정들

  1. 댓글기능 추가: Disqus(https://disqus.com/) 가입 및 Hexo 설정(_config.yml)
    1
    2
    # Disqus settings
    disqus_username: yelran-s-tech-blog #jukyellow.github.io
  2. 방문자 count 추가: github hits로 갈음
  3. 구글 검색엔진 노출 설정: sitemap.xml 추가, robots.txt 추가 등
    (참고 : https://ivelee.github.io/github/how-to-expose-github-blog-google-search/)

해결된이슈 + 추가기능

  1. (bug) deploy 0 byte
  2. (bug) side-bar widgets
  3. (기능추가) achive 배경화면
  4. (기능추가) category 페이지
  5. (기능추가) 썸네일
  6. (기능추가) 방문자 count

deploy 0 byte

  • 문제: hexo beantech 테마 적용후, deploy 단계에서 파일 0 bytes 오류 발생
  • 해결: hexo 3.9버전이 버전이여서 문제인가 싶어, hexo init으로 새 폴더 생성(hexo 5.3.0버전)+ theme 복제
  • 문제: side-bar widgets 목록 설정불가
  • 해결:
    1. forEach문 오류발생(sidebar widgets 목록을 찾을수 없음)
    1. theme/beantech/_config.yml에 widgets목록을 직접 기입해서 해결됨, deploy도 성공

achive 배경화면

  • 문제: achive, category 페이지 배경화면 누락
  • 해결: theme/beantech/layout/_partial/header.ejs 파일 수정 (is_category, is_archive 추가) 
1
2
3
4
5
6
7
8
9
10
11
12
header.intro-header{
	<% if (is_home() || is_category() || is_archive() ) { %>
		background-image: url('<%= config.root + config["header-img"] %>') 
		/*config*/
	<%} else if (is_post()){%>
		background-image: url('<%= page["header-img"] %>')
		/*post*/
	<%} else {%>
		background-image: url('<%= config.root + page["header-img"] %>')
		/*page*/
	<%} %>
}

category 페이지

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
<% if (site.categories.length) { %>
<div class="archive">
	<% var p_category = null;
	page.posts.each(post=>{ 
		p_category = post.categories;
	}) %>
	
	<% site.categories.sort('name').each(function(item){ %>
	<% if(p_category.data[0]._id == item._id){ %>
		<h4 class="archive-ul show" data-toggle="collapse" id="<%= item.name %>" data-target="#modal-<%= item.name %>"> <%= item.name %> <b class="caret"></b></h4>
	<% } %>
	<ul id="modal-<%= item.name %>" class="collapse in">
		<% site.posts.sort('date', -1).forEach(function(it){ %>
			<% if (it.categories.length == 1 && it.categories.data[0]._id == item._id && p_category.data[0]._id == item._id){ %>
			<li class="listing-item">
				<%= it.date.format('MM-DD') %>
				<i class="fa fa-angle-double-right" aria-hidden="true"></i>
				<a href="<%= config.root %><%= it.path %>" <% if (it.description) { %> title="<%= it.description %>" <% } %>><%= it.title %></a>
			</li>
			<% } %>
		<% }); %>
   </ul>
   <% }); %>
   <hr align="left" style="border: solid 1px gray; width: 55%;">
	
	<% site.categories.sort('name').each(function(item){ %>
	<% if(p_category.data[0]._id != item._id){ %>
		<h4 class="archive-ul show" data-toggle="collapse" id="<%= item.name %>" data-target="#modal-<%= item.name %>"> <%= item.name %> <b class="caret"></b></h4>
	<% } %>
	<ul id="modal-<%= item.name %>" class="collapse in">
		<% site.posts.sort('date', -1).forEach(function(it){ %>
			<% if (it.categories.length == 1 && it.categories.data[0]._id == item._id && p_category.data[0]._id != item._id){ %>
			<li class="listing-item">
				<%= it.date.format('MM-DD') %>
				<i class="fa fa-angle-double-right" aria-hidden="true"></i>
				<a href="<%= config.root %><%= it.path %>" <% if (it.description) { %> title="<%= it.description %>" <% } %>><%= it.title %></a>
			</li>
			<% } %>
		<% }); %>
   </ul>
   <% }); %>
   </ul>
</div>
<% } %>

썸네일

  • 설명 post 목록 썸네일 기능 추가
  • 설치 : https://www.npmjs.com/package/hexo-featured-image
  • _config.xml 체크사항: URL path 설정
  • 썸네일 이미지 설정: 개별 post 페이지의 헤더에 ‘featured_image’ path 추가 
    1
    featured_image: ./images/01_init.png
  • 캡쳐
    width:600px height:400px
  • post 목록(index.ejs) 튜닝 : 썸네일이 있을때는 div를 두개로(가로분할) 구성 
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<% page.posts.each(function(post){ %>
	<% if (!post.featured_image){ %>
	
	<div class="post-preview" style="float: left; width: 100%;">
	<a href="<%- config.root %><%- post.path %>">
	<h2 class="post-title">
	<%- post.title || "Untitled" %>
	</h2>
	<h3 class="post-subtitle">
	<%- post.subtitle || "" %>
	</h3>
	<div class="post-content-preview">
	<%- truncate(strip_html(post.content), {length: 140, omission: '...'}) %>...
	</div>
	</a>
	<% if (config.home_posts_tag){%>
	<p class="post-meta" style="margin: 10px 0;">
	Posted by <%- post.author || config.author %> on
	<%= post.date.format(config.date_format) %>
	</p>
	<div class="tags">
	<% post.tags.forEach(function(tag){ %>
	<a href="<%= config.root %>tags/#<%= tag.name %>" title="<%= tag.name %>"><%= tag.name %></a>
	<% }) %>
	</div>
	<%} else {%>
	<p class="post-meta">
	Posted by <%- post.author || config.author %> on
	<%= post.date.format(config.date_format) %>
	</p>
	<%}%>
	</div>

	<% }else{ %>
	<div class="post-preview" style="float: left; width: 70%; padding:5px;">
	<a href="<%- config.root %><%- post.path %>">
	<h2 class="post-title">
	<%- post.title || "Untitled" %>
	</h2>
	<h3 class="post-subtitle">
	<%- post.subtitle || "" %>
	</h3>
	<div class="post-content-preview">
	<!-- <%- truncate(strip_html(post.content), {length: 100, omission: '...'}) %> -->
	<%- truncate(strip_html(post.content), {length: 85, omission: '...'}) %>
	</div>
	</a>
	<% if (config.home_posts_tag){%>
	<p class="post-meta" style="margin: 10px 0;">
	Posted by <%- post.author || config.author %> on
	<%= post.date.format(config.date_format) %>
	</p>
	<div class="tags">
	<% post.tags.forEach(function(tag){ %>
	<a href="<%= config.root %>tags/#<%= tag.name %>" title="<%= tag.name %>"><%= tag.name %></a>
	<% }) %>
	</div>
	<%} else {%>
	<p class="post-meta">
	Posted by <%- post.author || config.author %> on
	<%= post.date.format(config.date_format) %>
	</p>
	<%}%>
	</div>

	<div class="post-preview" style="float: left; width: 30%; padding:5px;">
	<% if (post.featured_image){ %>
	<img src="<%- post.featured_image %>">
	<% } %>
	</div>
	<% } %>

	<hr>
<% }); %>

방문자 count

    1. busuanzi_container : sidebar.ejs 
      1
      2
      3
      4
      5
      6
      <span id="busuanzi_container_site_pv">
      	 [ 조회수:<span id="busuanzi_value_site_pv"></span>
      </span>
      <span id="busuanzi_container_site_uv">
         | 방문자수:<span id="busuanzi_value_site_uv"></span> ]
      </span>
    1. github hits : footer.ejs 
      1
      2
      3
      <a href="http://hits.dwyl.com/{{ site.url | remove_first: 'https://' | remove_first: 'http://' }}{{ page.url }}" target="_blank">
        <img src="http://hits.dwyl.com/{{ site.url | remove_first: 'https://' | remove_first: 'http://' }}{{ page.url }}.svg" />
      </a>
FEATURED TAGS
hexo hexo bug patch category.ejs