Pagination component rendered differently in development and production mode

[hitzhangjie]

Hi, thanks to doks, I start my blog: https://www.hitzhangjie.pro/.

I do some customizations based on doks, please see the blogs here: https://www.hitzhangjie.pro/blog.

I changed the layouts/blog/list.html from a card layout to an ordinary table layout, actually I add a parameter to control this.
And at the bottom of the blog list, I added a pagination component, please see: https://github.com/hitzhangjie/myspace/blob/master/layouts/blog/list.html

My question is the pagination component rendered as expected by hugo serve, but when I publish the content to github (after hugo or npm run build), it looks weired.

This is the expected one:

This one looks weired:

I think the generated content by hugo has something different, I also run python -m SimpleHTTPServer in the generated content directory, it behaves the same (the component rendered weired).

I didn't see any error message in the chrome debug session.

Could you help me to look at it? Thanks.

[h-enk]

The _internal/pagination.html template you're using, uses pagination classes (see also: Pagination). PurgeCSS runs before the template is generated, so it can't read these classes beforehand. Adding them to the safelist in ./config/postcss.config.js wil do the trick:

..
      safelist: [
        'lazyloaded',
        'table',
        'thead',
        'tbody',
        'tr',
        'th',
        'td',
        'pagination',
        'page-item',
        'page-link',
..

[hitzhangjie]

Thanks, it works now :)

I'll learn the safelist later.

[h-enk]

Nice to see how you customized Doks to make it yours! Are you OK if I added your blog to the Doks showcase?

[hitzhangjie]

Yes, I'm OK.