文章里面的小标题靠右｜The text alignment of titles within the post is to the right instead of to the left

[carrieeex]

Issue Checklist | Issue 检查清单

• [X] I am using Keep version 4.1.5 or later. （使用 Keep 4.1.5 或更高版本）
• [X] I have already read the Troubleshooting page of Hexo and Keep documents. （已阅读 Hexo 故障处理页面 和 Keep 文档）
• [X] I have already searched for current issues, which does not help me. （已搜索 Issues，对我没有帮助）

Expected behavior | 预期行为

标题本来靠左边的

Actual behavior | 实际行为

• Links to demo site with this issue （链接到这个 Issue 的演示网站） 我的网站-关于我
• Links to source code of the blog with this issue （链接到这个 Issue 的博客源代码） The source code repo is private, the auto-generated gh-page repo is public.
• Screenshots（屏幕截图）

Steps to reproduce the behavior | 重现步骤

1. First step ... （第一步 ...）写文章publish
2. Second step ... （第二步 ...） 。。。 我自己加了一个.css文件以后就这样了，但我不知道为什么。文件如下： I added a .css file for writing timelines in markdown, then it happens The newly added source/css/timeline.css is:

/* Custom timeline styles */
.timeline {
  position: relative; /* Position relative for child elements' absolute positioning */
  max-width: 800px; /* Maximum width of the timeline */
  margin: 20px auto; /* Center the timeline horizontally with margin */
}

.timeline::after {
  content: ''; /* Empty content for the vertical line */
  position: absolute; /* Absolute positioning to align with the parent .timeline */
  width: 6px; /* Width of the vertical line */
  background-color: #f1f1f1; /* Color of the vertical line */
  top: 0; /* Start from the top of the .timeline */
  bottom: 0; /* Extend to the bottom of the .timeline */
  left: 50%; /* Center the vertical line horizontally */
  margin-left: -3px; /* Offset half of the width to align the center of the line */
}

.timeline .container {
  padding: 10px 20px; /* Padding inside each container */
  position: relative; /* Position relative for absolute positioning of child elements */
  width: 50%; /* Each container takes half the width of the timeline */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
}

.timeline .container.left {
  left: 0; /* Align left containers to the left side of the timeline */
}

.timeline .container.right {
  left: 50%; /* Align right containers to the right side of the timeline */
}

.timeline .container::after {
  content: ''; /* Empty content for the circle */
  width: 20px; /* Diameter of the circle */
  height: 20px; /* Diameter of the circle */
  background-color: #f1f1f1; /* Background color of the circle */
  border: 4px solid #B0B0B0; /* Border color and thickness of the circle */
  border-radius: 50%; /* Make the circle */
  top: 50%; /* Center the circle vertically within the container */
  transform: translateY(-50%); /* Adjust for vertical alignment */
  z-index: 1; /* Ensure the circle appears above other elements */
}

.timeline .container.left::after {
  position: absolute; /* Absolute positioning to align with the vertical line */
  top: 0; /* Moves the element down 10px from its normal position */
  left: 96.5%; /* Moves the element 20px to the right from its normal position */
}

.timeline .container.right::after {
  position: absolute; /* Absolute positioning to align with the vertical line */
  top: 0; /* Moves the element down 10px from its normal position */
  left: -3.5%; /* Moves the element 20px to the right from its normal position */
}

.timeline .content {
  padding: 20px 30px; /* Padding inside the content box */
  background-color: transparent; /* Transparent background */
  border: 2px solid #B0B0B0; /* Border color and thickness of the content box */
  position: relative; /* Position relative for absolute positioning of child elements */
  border-radius: 6px; /* Rounded corners for the content box */
}

.timeline .time {
  font-size: 16px; /* Font size for the time text */
  font-weight: bold; /* Bold text for emphasis */
  margin-top: 0; /* No margin at the top */
  margin-bottom: 10px; /* Space below the time text */
  position: relative;
}

.timeline .location {
  font-size: 12px; /* Font size for the location text */
  font-style: italic; /* Italicize the location text */
  margin-top: 5px; /* Space between the description and location text */
}

@media screen and (max-width: 800px) {
  .timeline .container {
    width: 100%; /* Full width on smaller screens */
    padding-left: 32.5px; /* Adjust padding for smaller screens */
    padding-right: 25px; /* Adjust padding for smaller screens */
    float: none; /* Remove float on smaller screens */
    clear: both; /* Clear floats */
  }

  .timeline .container.left,
  .timeline .container.right {
    left: 0;
    float: none; /* Ensure both sides stack on top of each other */
   /*   width: 90%; /* Full width for stacking */
  /*   text-align: left; /* Align text to the left */
  }

  .timeline::after {
    left: 12.5px; /* Adjust vertical line for small screens */
    margin-left: 0; /* Reset margin for small screens */
  }

  .timeline .container.left::after {
    left: 0; /* Center circle on the line */
  }

  .timeline .container.right::after {
    left: 0; /* Center circle on the line */
  }
}

Node.js and NPM Information | Node.js 和 NPM 信息

v22.4.0
10.8.1

Hexo Configuration | Hexo 配置

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

# Site
title: Jiali's Archive
subtitle: A Collection of My World
description: Explore Jiali's travel blogs, handpan passion, and website collections.
keywords: [acoustics, handpan, travel, blog]
author: Jiali Cheng
language: # default
- en
- zh-CN
timezone: Europe/Stockholm #''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://carrieeex.github.io/
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: false # 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: :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: keep

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

# Feed Atom
# npm install hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20

mathjax:
  tags: none               # or 'ams' or 'all'
  single_dollars: true     # enable single dollar signs as in-line math delimiters
  cjk_width: 0.9           # relative CJK char width
  normal_width: 0.6        # relative normal (monospace) width
  append_css: true         # add CSS to every page
  every_page: false        # if true, every page will be rendered by mathjax regardless the `mathjax` setting in Front-matter of each article

Keep Configuration | Keep 配置

# ---------------------------------------------------------------------------------------
# Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/inject.html
# ---------------------------------------------------------------------------------------
inject:
  enable: true  # Option values: true | false
  css:
    - /css/timeline.css
      # e.g.
      # - /css/custom-1.css
      # - /css/custom-2.css
    # - ...

Other Information | 其它信息

No response

[carrieeex]

我是应该：

1. 改写我加的 timeline.css
2. 增加一个设置text alignment的文件（css？）
3. 其他？

主要是不知道为什么会移到右边去。。。

[XPoet]

你的 markdown 渲染器影响的。默认是 hexo-renderer-marked , 你改成哪个了？

[XPoet]

已排查出问题，这两天内发布新版修复

[carrieeex]

噢噢，我改成了hexo-renderer-markdown-it-plus，看文档的时候改的

[realnghon]

已排查出问题，这两天内发布新版修复

顺便看一下我新提交的问题，这个渲染器问题我也发现了，我本来是看你的教程说推荐这个渲染器，也出现这个问题，然后又用原来默认的那个

[XPoet]

该 Issue 反馈的问题已修复，请使用 v4.2.0