화면 바꾸기

바꾸려는 것	방법	빌드
서비스 이름, 로고, 하단 저작권 표기	관리자 페이지 > 설정	필요 없음
이름의 기본값	환경변수 `PSITRANSFER_APP_NAME`, `PSITRANSFER_APP_OWNER`, `PSITRANSFER_APP_FROM_YEAR`	필요 없음
화면의 문구	`lang/ko.js` (한국어), `lang/en.js` (기본)	필요 없음, 서버 재시작
색, 간격, 글꼴	`app/src/styles.css` 맨 위의 CSS 변수 (`--accent` 등)	`npm run build`
화면 구성	`app/src/pages/.vue`, `app/src/components/.vue`	`npm run build`
모든 페이지의 `<head>`에 넣을 것 (스타일, 스크립트)	`public/pug/partials/head_custom.pug`	필요 없음, 서버 재시작

구조

서버는 얇은 HTML 껍데기(public/pug/page.pug)만 만들고, 실제 화면은 브라우저에서 Vue 3 앱(app/)이 그립니다. 업로드, 다운로드, 관리자 세 화면이 하나의 스크립트(public/app/main.js)로 동작하고, 어느 화면인지는 껍데기의 <body data-page="...">가 알려 줍니다.

npm --prefix app ci        # 처음 한 번
npm run build              # app/src를 public/app으로 빌드

도커 이미지는 빌드 과정에서 이 빌드를 함께 하므로 따로 할 필요가 없습니다.

색 바꾸기

app/src/styles.css의 맨 위에 라이트 모드와 다크 모드의 색이 변수로 모여 있습니다. 강조색은 --accent(버튼, 선택된 항목)와 --accent-soft/--accent-ink(연한 배경과 그 위의 글자)입니다. 로고에는 영향을 주지 않습니다.

로고 파일

기본 로고는 public/assets/logo.svg(임의로 만든 아이콘)입니다. 관리자 설정에서 올린 로고가 있으면 그것이 우선하고, 설정 폴더(/data/.settings)에 저장됩니다. 코드를 바꾸지 않고 로고를 교체하려면 관리자 페이지를 쓰세요.

업데이트할 때 충돌을 줄이려면 app/src를 크게 바꾸는 것보다 관리자 설정, 환경변수, head_custom.pug를 먼저 활용하세요.

2.1 KiB Raw Blame History

화면 바꾸기

구조

색 바꾸기

로고 파일

2.1 KiB

Raw Blame History