Jekyll을 사용한 로컬 포스트 자산
다른 사람들이 Jekyll을 사용할 때 개별 게시물에 대한 자산을 구성하는 방법이 궁금합니다. 예를 들어, 게시물에 이미지가있는 경우 공유 이미지 폴더에 덤프합니까? 이 작업을한다는 생각이별로 마음에 들지 않습니다. 짝을 이루어야한다고 생각할 때 이미지가 게시물에서 완전히 분리된다는 의미입니다.
저는 이미지를 0 개 이상의 페이지에 포함 된 독립형 자산으로 생각하는 것을 선호합니다. 대부분의 경우 내 이미지가 한 페이지에 표시됩니다. 여러 페이지에 배치하고 싶을 때가 있고 다른 경우에는 이미지를 전혀 연결하지 않습니다. 워크 플로가 각 이미지를 게시물이있는 디렉토리에 배치하는 것이라면 이미지를 찾기 시작하려면 상당한 양의 검색이 필요하며 특정 게시물에 속하지 않는 이미지에 대해 다른 것을 찾아야합니다.
내가 사용하는 접근 방식은 스펙트럼의 반대편에 있습니다. 단일 이미지 디렉토리 ( "/ images"에서 제공)가 있고 내 이미지의 100 %가 여기에 저장됩니다. 이것의 이점은 다음과 같습니다.
게시물에 이미지를 추가 할 때 어떤 경로를 사용할지 쉽게 알 수 있습니다. 항상 :
/images/{image-name}예 : http://alanwsmith.com/i/aws-20111017--0906-02 . 이렇게하면 플러그인을 작성할 수 있으므로 입력해야하는 것은 이미지 이름 뿐이고 알려진 경로의 나머지 부분은 자동으로 채워집니다.
Photo Mechanic 과 같은 응용 프로그램을 사용하면 단일 디렉토리를 로컬에서 탐색하고 모든 이미지를 보는 것이 매우 쉽습니다. 다른 페이지에 이미지를 포함 시키려면 이미지를 찾는 데 걸리는 시간이 크게 줄어 듭니다.
실제로 페이지에 이미지를 포함하지 않고 누군가에게 이미지를 보내려는 경우 별도의 위치 / 프로세스가 없습니다 (예 : 이미지 파일에 대한 직접 링크 보내기). 표준 디렉토리에 이미지를 던지고 직접 링크를 보냅니다.
좀 더 발전하고 싶다면 모든 이미지를 단일 디렉토리에 보관하면 멋진 조정도 가능합니다. 예를 들어, 내 이미지의 URL이 "/ images"로 시작하더라도 이미지는 실제로 jekyll이 사용하는 디렉토리 외부의 디렉토리에 저장됩니다. 제 경우에는 소스 트리의 상단이 다음과 같습니다.
./html
./source-files
./image-files
내 모든 이미지는 "./image-files"디렉토리에 저장됩니다. 아파치 설정에서 URL "/ images"가 "./image-files"디렉토리를 가리 키도록 별칭을 설정했습니다. 예를 들면 :
Alias /images /webroot/image-files
jekyll을 실행하면 "./source-files"에있는 모든 것을 처리하고 "./html"에 드롭합니다. 모든 이미지가이 두 디렉토리 밖에 있기 때문에 jekyll은 이미지를 보거나 만지지 않습니다. 이미지 라이브러리가 커지면 속도가 빨라지고 불필요한 파일 복사를 막을 수 있습니다.
Apache에서 내가 좋아하는 또 다른 조정은 다음과 같습니다.
Options +MultiViews
이렇게하면 파일 확장자를 사용하지 않고도 이미지를 호출 할 수 있습니다 (예 : '.jpg', '.png'등 없음). 위에서 제공 한 예제 링크에서 확인할 수 있습니다. 성능에 대해서는 실제로 중요하지 않습니다. 나는 모양이 마음에 들었고 이미지를 호출 할 때마다 확장자를 입력하지 않아도됩니다.
MultiViews를 사용하면 다른 형식을 다시 코딩하지 않고도 한 형식의 이미지를 다른 형식으로 바꿀 수 있습니다. 예를 들어 "some-image.gif"를 제거하고 "some-image.png"로 바꾸면 HTML을 건드리지 않아도됩니다. 여전히 "/ images / some-image"형식으로 제공됩니다. 이와 같이 변경해야하는 경우는 매우 드뭅니다. 나는 할 수 있다는 것이 흥미로운 일이라고 생각합니다.
마지막으로, 이미지 디렉토리 탐색을 허용하거나 허용하지 않는 단일 결정을 내릴 수 있습니다. 개인적으로 이미지를 배치 한 위치에만 표시하고 싶습니다. 그래서 이미지 디렉토리의 .htaccess 파일을 다음과 같이 설정했습니다.
Options -Indexes
수천 또는 수만 개의 페이지와 이미지가있는 사이트에서 작업하는 경우 확장되지 않을 수 있습니다. 보통 크기의 개인 사이트의 경우이 접근 방식을 사용하면 이미지를보다 쉽게 관리 할 수 있습니다.
하위 디렉토리에서 자산을 쉽게 구성 할 수 있도록 플러그인을 작성했습니다.
https://github.com/samrayner/jekyll-asset-path-plugin
{% asset_path my-image.png %}
2013-01-01-post-title 이후에 다음과 같이 출력됩니다.
/assets/posts/post-title/my-image.png
my-first-page 페이지에서 다음과 같이 출력됩니다.
/assets/my-first-page/my-image.png
당신처럼, 저는 모든 이미지를 하나의 공유 폴더에 담는 것이 정말 싫습니다.
전부는 아니지만 대부분의 내 이미지는 하나의 게시물에 유용하며 Markdown 파일과 함께 유지하는 것이 게시물 관리에 정말 좋습니다.
/_posts/Markdown을 한 곳에 배치하고 이미지를 다른 곳에 배치하지 않고도 한 단계에서 새 게시물을의 단일 하위 폴더로 삭제할 수 있습니다.- 기존 게시물의 이미지를 편집하고 싶을 때 큰
/assets/폴더 에서 올바른 이미지를 찾을 필요가 없으며 Markdown 파일 바로 근처에 있습니다. - 내 Markdown에서 경로없이 이미지 파일 이름을 직접 사용할 수 있습니다.
- 실시간 미리보기와 함께 Markdown 편집기를 사용하려는 경우 작동하며 특정 자산 폴더 구성이 필요하지 않습니다.
나는 이것을 내 블로그 ( 여기에 예제 게시물 )에 사용 하려고했습니다 .
반응 형 이미지의 경우 Jekyll Picture Tag 플러그인 을 사용했지만 이러한 경로를 처리 하는 Pull Request 가 허용되지 않았기 때문에 포크해야했습니다 .
이제 Jekyll 3이 있으므로 포스트 폴더와 /assets/하나의 이미지 를 모두 사용하여 순서대로 표시된 이미지를 찾을 수 있기를 바랍니다 .
이제 Markdown 파일과 함께 게시물 자산을 유지하는 데 도움이되는 Jekyll 플러그인을 개발했습니다 : https://nhoizey.github.io/jekyll-postfiles/
JavaScript 및 CSS의 경우 자산 파이프 라인을 고려할 수 있습니다. 번들링 및 압축을 통해 좋은 성능 향상을 얻을 수 있습니다. 또한 CoffeeScript와 Sass를 사용하므로 자산을 변환하려면 전처리 기가 필요했습니다. 내가 사용 지킬 자산 파이프 라인을 나는 실행할 때 자동으로이 모든 과정을 관리하는 jekyll명령을 사용합니다.
이미지 / 비디오의 경우 프로젝트에서 폴더 이름 지정 규칙을 개발하는 것이 좋습니다. 나는 일반적으로 "assets"폴더와 그 포스트와 관련된 이미지를 보유하는 각 포스트의 날짜가있는 하위 폴더를 가지고 있습니다. 하루에 여러 개의 게시물이있는 경우 게시물 이름을 포함하는 것이 좋습니다.
참고URL : https://stackoverflow.com/questions/10363812/local-post-assets-with-jekyll
'IT Share you' 카테고리의 다른 글
| Ajax 호출 후 Django 템플릿을 사용하여 JSON 객체 렌더링 (0) | 2020.11.18 |
|---|---|
| Python 3이 이전 버전과 호환되지 않는 이유는 무엇입니까? (0) | 2020.11.18 |
| Eclipse에서 열려있는 모든 파일을 검색하는 방법은 무엇입니까? (0) | 2020.11.18 |
| 표현식 (true == true == true)이 구문 오류를 생성하는 이유는 무엇입니까? (0) | 2020.11.18 |
| 특정 RUN 명령에 대해 캐시 비활성화 (0) | 2020.11.18 |