본문 바로가기

소프트웨어 & 클라우드54

[Docusaurus] image zoom in and out image 플러그인 적용 (docusaurus-plugin-zooming) 개요 Docusaurus 프로젝트 내 문서에서 이미지를 클릭하면 확대되는 플러그인 설치 방법을 소개합니다.  적용 * 설치 yarn add docusaurus-plugin-zooming * 적용 docusaurus.config.js 파일 수정plugins: [ "docusaurus-plugin-zooming", ], 참고 사항 플러그인을 적용하더라도, 마지막 이미지가 줌-인 적용되지 않는 버그가 있습니다.  참고 자료  GitHub - inovector/docusaurus-plugin-zooming: Image Zoom Plugin for Docusaurus 3Image Zoom Plugin for Docusaurus 3. Contribute to inovector/docusaurus-plugin.. 2024. 9. 28.
[Docusaurus] 각 문서마다 hits 조회수 표시하기 개요 스크린샷과 같이 문서 별 조회수를 표시하는 hits 를 추가합니다. 적용 * DocItem Swizzling안내 DocItem Swizzling이 이미 완료된 경우, 다음 단계로 넘어가세요.Docusaurus에서 제공하는 기능들을 직접 수정하기 위해서는 Swizzle이라는 작업이 필요합니다. DocItem을 직접 수정할 수 있도록 아래 명령을 수행해 주세요. yarn run swizzle @docusaurus/theme-classic DocItem * 컴포넌트 생성 src → theme → DocItem → Content → index.js 파일을 열어 아래 코드를 추가합니다.blog_link 변수를 본인의 블로그 주소로 바꾸어 주세요. function Hits() { const { metadat.. 2024. 9. 27.
[Docusaurus] plugin-ideal-images width 문제 해결 개요 plugin-ideal-images 사용하여 이미지 로딩 시 이미지 가로 길이가 항상 100%를 유지하는 문제가 있습니다.import Image from "@theme/IdealImage";; 적용 src → css → custom.css 에 아래 코드를 추가하세요.img { width: auto !important;} 2024. 9. 27.
[Docusaurus] 작성 문서 최신 출력 스크립트 개요Docusaurus 프로젝트에서 작성한 문서를 작성 일자 순으로 취합하여 마크다운 파일로 만들어 주는 스크립트입니다. 아래 예제를 확인해 보세요. (제 취향에 맞게 추가적으로 수정하였습니다) 전제 해당 스크립트를 올바르게 활용하기 위해서는 아래 몇 가지 사항이 전제되어야 합니다./docs/intro.md 파일이 연도 별 문서 정렬할 마크다운 파일/docs/intro.md 를 제외한 모든 파일은 생성연도-생성월-생성일-제목.md과 같은 형식으로 구성모든 파일은 h1제목을 가지고 있어야 함 (예: # 제목) 스크립트아래 프로그램을 실행하여 /docs/intro.md 파일이 생성되었는 지 확인해 보세요. const fs = require("fs");const path = require("path");// .. 2024. 8. 11.
[Windows] Tensorflow windows 11 WSL2 활용하여 설치하기 개요 windows 11 에서 wsl2를 활용, Tensorflow 개발 환경 세팅 방법을 소개합니다.  WSL 설치 tensorflow를 설치하는 곳은 windows 내부에 만들어질 리눅스 환경(wsl)입니다. wsl2를 먼저 설치해 주어야 합니다.파워셀을 켜서 아래 명령을 실행시켜 주세요. wsl2가 설치됩니다. wsl2 설치 후 재부팅을 반드시 해 주세요.wsl --install 설치가 완료되면 cmd에서 아래 명령어로 wsl2를 사용할 수 있습니다.wsl.exe 호환되는 파이썬 설치 Tensorflow와 호환되는 파이썬을 설치해 주세요. 설치 방법은 넘어가겠습니다. 아래 링크를 통해 호환되는 파이썬 버전을 확인할 수 있습니다. pip로 TensorFlow 설치이 페이지는 Cloud Translat.. 2024. 8. 10.
[Docusaurus] Utterances 다크 모드 적용하기 개요 Docusaurus 프로젝트 다크 모드 활성화 시 Utterances 테마도 다크 모드가 되도록 만들어 보겠습니다.  적용 /src/components/HomepageFeatures/Comment.js에 아래 코드 몇 줄을 추가해 주세요.import React, { useEffect, useRef } from "react";import { useColorMode } from "@docusaurus/theme-common"; // { const createUtterancesEl = () => { const script = document.createElement("script"); script.src = "https://utteranc.es/client.js"; sc.. 2024. 8. 10.

티스토리툴바