구글 블로그 기본 테마들을 보면 기능이 비슷한데 메인 페이지에 글 목록이 나오고 해당 포스팅을 보려면 글의 제목이나 썸네일 이미지를 클릭해야 볼 수 있다. 아래 이미지처럼 빨간 박스만 링크가 걸려있고 내용 미리보기 블럭인 파란 박스에는 링크가 안 걸려 있다.
필자는 그 점이 참 불편했다 국내의 블로그들은 제목, 썸네일 이미지, 미리보기 내용 어디든 클릭해서 들어갈 수 있기 때문이다. 그리고 글 목록에 가장 큰 공간을 차지하고 있는 부분인데, 글 목록 어딘가를 클릭해도 글을 볼 수 있게 하는 것이 좀 더 편의성에서 좋다라고 생각한다.
1. 포스팅의 주소와 링크태그
포스팅의 주소는, 구글에서 데이터를 불러와 뿌려줘야 하고 post.url 에 그 주소가 정의되어 있다. 그래서 링크태그로 post.url에 정의 되어있는 주소를 불러와야 하는데, 링크태그로 정의 하는 방법은 아래와 같다.
<a expr:href='data:post.url'>
1.1. expr 접두사
expr은 xhtml에 구글블로그 의 표현식을 쓰겠다 라고 선언을 하는거라 생각하면, 된다.
일반적인 링크태그는 <a href="링크주소"> 로 끝나지만 포스팅 주소는 고정된 값이 아닌 포스팅 목록이 나올때 마다 동적으로 바뀌기 때문에, 링크주소에 post.url을 적용을 해 줘야 하는데 따옴표 안에 post.url 이라고 적어버리면 데이타를 불러오는게 아닌 post.url 이 주소 인것으로 판단을 하게 된다.
때문에 expr: 이후 문장은 구글 표현식이다 라고 미리 선언을 하는 것이다.
1.2. data:
data: 는 데이타를 불러서 정의하는 역할을 하는데, 여기서는 post.url 값을 읽어 왔으나 특별히 변수 이름을 지정한 것이 아니라서 post.url 의 포스팅 주소를 html 코드에 바로 반영을 한다.
1.3. 코드의 랜더링
expr: 접두사 라던지 data: 속성은 실제 랜더링 결과에는 나타나지 않는다 expr로 선언한 부분은 내부적으로 데이타를 처리해서 실제로 브라우져 상에 뿌려지는건 결과값만 뿌려진다.
| 구 분 | 코 드 |
|---|---|
| 입력한 코드 | <a expr:href='data:post.url'> |
| html 랜더링 | <a href="https://knowltographer.blogspot.com/2021/07/35mm-film-history.html"> |
2. 코드의 반영
이제 코드를 반영할 위치를 찾아보자. 크롬 개발자 모드에서도 해당 클레스를 찾기 어려운데 Notable 테마의 경우 대략 3050번대 라인에 아래와 같은 코드를 찾자.
<div class='container post-body entry-content' expr:id='"post-snippet-" + data:post.id'> <b:include cond='data:post.snippets' data='post' name='postSnippet'/> </div>
여기에서 <b: icnclude ....> 태그 에 링크를 걸면된 다. 완성된 코드는 아래와 같다.
<div class='container post-body entry-content' expr:id='"post-snippet-" + data:post.id'> <a expr:href='data:post.url'> <b:include cond='data:post.snippets' data='post' name='postSnippet'/> </a> </div>
이제 내용 미리보기 블럭을 클릭해도 해당 게시물을 볼 수 있다.
3. 마치며
Notable 테마가 아니더라도 포스팅 주소 넣는 코드는 동일하기 때문에 테마가 다르더라도 위치만 잘 찾으면 적용이 가능할 것이다. 필자도 html 이라던가 CSS를 잘 모르기 때문에 다른 테마는 어디쯤을 고쳐야 할지 다 알지는 못한다. 그래도 조금이나마 도움이 되었길 바란다.