search

next-theme / hexo-theme-next

🎉 Elegant and powerful theme for Hexo.
https://theme-next.js.org
Other
2.47k stars 438 forks source link

On the mobile phone, there is a problem with the display when long words appear in the homepage title. #736

Open moralok opened 11 months ago

moralok commented 11 months ago

Issue Checklist

Expected behavior

link to the article page It should behave as if it is on the article page. image

Actual behavior

Steps to reproduce the behavior

Open the homepage and find the article with long words in title.

Node.js and NPM Information

v18.16.1
9.5.1

Package dependencies Information

npm ERR! code ELSPROBLEMS
npm ERR! invalid: hexo-renderer-marked@6.1.0 /home/wrmao/github/moralok.github.io/node_modules/hexo-renderer-marked
npm ERR! invalid: hexo@6.3.0 /home/moralok/github/moralok.github.io/node_modules/hexo
hexo-site@0.0.0 /home/moralok/github/moralok.github.io
├── css@3.0.0
├── hexo-generator-archive@2.0.0
├── hexo-generator-category@2.0.0
├── hexo-generator-index@3.0.0
├── hexo-generator-searchdb@1.4.1
├── hexo-generator-tag@2.0.0
├── hexo-leancloud-counter-security@1.5.0
├── hexo-renderer-ejs@2.0.0
├── hexo-renderer-marked@6.1.0 invalid: "^6.2.0" from the root project
├── hexo-renderer-stylus@3.0.0
├── hexo-server@3.0.0
├── hexo-theme-landscape@1.0.0
├── hexo-word-counter@0.1.0
└── hexo@6.3.0 invalid: "^7.0.0" from the root project

Hexo Configuration

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Moralok
subtitle: ''
description: "Moralok's blog"
keywords:
author: Moralok
language: zh-CN
timezone: Asia/Shanghai

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://www.moralok.com
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :year-:month-:day-:title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''

# hexo-word-counter
symbols_count_time:
  symbols: true 
  time: true 
  total_symbols: true 
  total_time: true
  exclude_codeblock: false 
  wpm: 300 
  suffix: "mins."

# hexo-generator-searchdb
search:
  path: search.xml
  field: post
  content: true
  format: html

# hexo-leancloud-counter-security
leancloud_counter_security:
  enable_sync: true
  app_id: 3EC6DlIt15eVYStwSVsDsQ2P-MdYXbMMI
  app_key: KKBQicvLunsmAfgH3DJJXvng

NexT Configuration

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

# Dark Mode
darkmode: false

# 菜单
menu:
  home: / || fa fa-home
  tags: /tags/ || fa fa-tags

sidebar:
  # Sidebar Position.
  position: left

  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  display: always

  # Sidebar padding in pixels.
  padding: 18
  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12

# hexo-word-counter
post_meta:
  item_text: true 

symbols_count_time:
  separated_meta: true 
  item_text_total: false 

# hexo-generator-searchdb
local_search:
  enable: true
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1

# leancloud_counter_security
leancloud_visitors:
  enable: true
  app_id: 3EC6DlIt15eVYStwSVsDsQ2P-MdYXbMMI
  app_key: KKBQicvLunsmAfgH3DJJXvng
  security: false

Other Information

There is a same issue in old version of NexT 手机端 如果标题过长 会超出界面范围 and one issue #541 which is difficult to solve mentioned it. But I think they are different. Because I tried to delete "inline-block" or use "overflow-wrap: anywhere" or use deprecated "word-break: break-word" and it seemed to perform better. I'm not familiar with css. Is there a better configuration of css without bad side effect? image

Thank you for help.

welcome[bot] commented 11 months ago

Thanks for opening this issue, maintainers will get back to you as soon as possible!

stevenjoezhang commented 11 months ago

Currently we're using overflow-wrap: break-word;. overflow-wrap: anywhere is a more aggressive approach.

moralok commented 11 months ago

Currently we're using overflow-wrap: break-word;. overflow-wrap: anywhere is a more aggressive approach.

Thanks for the reply. Why it's normal on article page? They both use overflow-wrap: break-word. Can homepage perform like article page?