2.1 KiB
2.1 KiB
화면 바꾸기
| 바꾸려는 것 | 방법 | 빌드 |
|---|---|---|
| 서비스 이름, 로고, 하단 저작권 표기 | 관리자 페이지 > 설정 | 필요 없음 |
| 이름의 기본값 | 환경변수 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를 먼저 활용하세요.