Téigh ar aghaidh chuig an bpríomhábhar
Leagan: 6.x

Breiseán Téama

Cad is breiseán téama ann?​

Úsáideann Verdaccio de réir réamhshocraithe Chomhéadain saincheaptha a sholáthraíonn sraith mhaith gnéithe chun na pacáistí a shamhlú, ach b'fhéidir go mbeadh roinnt gnéithe saincheaptha breise ag teastáil ó d'fhoireann agus seo an áit a bhfuil téama saincheaptha mar rogha. Stórálann an breiseán sócmhainní statacha a luchtófar ar thaobh an chliaint nuair a bheidh an leathanach á rindreáil.

Conas a oibríonn céim luchtaithe breiseán téama?​

Conas a lódálann sócmhainní an téama?​

rabhadh

De réir réamhshocraithe lódálann an feidhmchlár ar http://localhost:4873, ach i gcásanna ina bhfuil seachfhreastalaí droim ar ais le fearann ​​saincheaptha i gceist, luchtaítear na sócmhainní bunaithe ar an airí __VERDACCIO_BASENAME_UI_OPTIONS.base</0 > agus <code>__VERDACCIO_BASENAME_UI_OPTIONS.basename, mar sin ní féidir ach cumraíocht fearainn amháin a úsáid.

Ní lódálann an téama ach ar thaobh an chliaint, cuireann an feidhmchlár HTML le clibeanna <script> chun an feidhmchlár a rindreáil, déanann an cuachtar cúram d’aon sócmhainní eile a luchtú mar svg, íomhánna nó _ phíosa_ a bhaineann leis.

An réad __VERDACCIO_BASENAME_UI_OPTIONS​

Tá an fuinneog.__VERDACCIO_BASENAME_UI_OPTIONS ar fáil i gcomhthéacs domhanda an bhrabhsálaí, tá an cruth doiciméadaithe sainmhínithe ag an anseo ag na sainmhínithe cineáil TemplateUIOptions.

//sampla aschur
{
    "darkMode": false,
    "basename": "/",
    "base": "https://registry.my.org/",
    "primaryColor": "#4b5e40",
    "version": "5.20.1",
    "pkgManagers": [
        "yarn",
        "pnpm",
        "npm"
    ],
    "login": true,
    "logo": "",
    "title": "Verdaccio Registry",
    "scope": "",
    "language": "es-US"
}

Cumraíocht Téama​

De réir réamhshocraithe lódálann verdaccio an @verdaccio/ui-theme atá cuachta sa phríomhphacáiste, más mian leat do bhreiseán saincheaptha a lódáil ní mór é a shuiteáil áit ar féidir é a fháil.


$> npm install --global verdaccio-theme-dark

rabhadh

Caithfidh réimír ainm an bhreiseáin tosú le verdaccio-theme-xxx, nó ní thabharfar aird ar an mbreiseán.

Ní féidir leat ach téama amháin a lódáil ag an am (má chuirtear tuilleadh ar fáil tá an chéad cheann á roghnú) agus dul trí na roghanna má tá sé uait.

theme:
  dark:
    option1: foo
    option2: bar

Beidh na roghanna seo ar fáil

Struchtúr breiseán​

Má tá téama comhéadan úsáideora saincheaptha agat ní mór struchtúr ar leith a leanúint:

{
  "name": "verdaccio-theme-xxxx",
  "version": "1.0.0",
  "description": "my custom user interface",
  "main": "index.js",
}

Ba cheart go mbeadh an t-ábhar seo a leanas sa phríomhchomhad index.js.

module.exports = () => {
  return {
    // location of the static files, webpack output
    staticPath: path.join(__dirname, 'static'),
    // webpack manifest json file
    manifest: require('./static/manifest.json'),
    // main manifest files to be loaded
    manifestFiles: {
      js: ['runtime.js', 'vendors.js', 'main.js'],
    },
  };
};

Mura bhfuil aon cheann de na hairíonna seo a leanas ar fáil, ní lódálfar an breiseán, mar sin lean an struchtúr seo.

  • staticPath: suíomh iomlán/coibhneasta na gcomhad statach, d'fhéadfadh aon chonair a bheith ann le require.resolve nó tóg do chuid féin, tá an rud atá tábhachtach laistigh den phacáiste nó aon suíomh a bhfuil lárearraí Express.js in ann a aimsiú, tá an res.sendFile in úsáid sa chúlra.
  • manifest: Réad follasach Webpack.
  • manifestFiles: Réad a bhfuil airí amháin js aige agus eagar (cúrsaí ordaithe) den aitheantas forléirithe le luchtú sa teimpléad go dinimiciúil.
  • Ní mór an manifestFiles a thagraíonn do na príomhchomhaid a luchtú mar chuid de na scripteanna html chun an leathanach a lódáil, ní gá duit na píosaí ós rud é go bhfuil siad luchtaithe go dinimiciúil ag an bundler.

Comhad follasach​

Teastaíonn oibiacht manifest ó Verdaccio chun an html a dhéanamh go dinimiciúil, in éineacht leis na manifestFiles tuigeann an feidhmchlár cad atá le déanamh.

Faoi láthair ní thacaíonn ach js ach má tá css uait freisin, táimid sásta é a phlé agus tuilleadh feabhsuithe a dhéanamh.

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

  plugins: [
    ...
    new WebpackManifestPlugin({
      //tá sé seo roghnach ag brath ar do chur i bhfeidhm
      removeKeyHash: true,
    }),
    ...
  ],

Léiriú le cugóirí eile​

Níl aon aiseolas ann maidir le cuagóirí eile atá á n-úsáid le forlíontáin téama, ach le esbuild d'fhéadfaí manifestos a ghiniúint.

Roghanna eile:

Chomhéadain Comhpháirteanna​

nóta

Is gné thurgnamhach í Chomhéadain na gcomhpháirteanna agus is féidir é a úsáid ó verdccio@5.x, is féidir athruithe a dhéanamh agus ** fáilte roimh aiseolas**.

Is mór an iarracht é comhéadan úsáideora nua a chruthú ón tús, an pacáiste @verdaccio/ui-components chun an tasc a éascú. Tá na comhpháirteanna bunaithe ar an leabharlann React agus Material UI.

Na codanna easpórtála pacáiste den chomhéadan úsáideora a d'fhéadfaí a athúsáid:

  • React Hooks
  • Soláthraithe (React Context API)
  • Comhpháirteanna
  • Codanna: (Barra Taoibh, Sonraí, Ceanntásc, Leathanach Baile agus Buntásc)

https://ui-components.verdaccio.org