search

saicaca / hexo-theme-vivia

A clean and minimalist theme for Hexo.
https://saicaca.github.io/vivia-preview/
MIT License
329 stars 40 forks source link

Bug: 日期和其它信息对不齐 #31

Closed LynxCatTheThird closed 6 months ago

LynxCatTheThird commented 9 months ago

现象： 如图：日期和其它信息（分类、词数）对不齐

image

出逝网址：https://lynxcatthethird.github.io/

主题版本：https://github.com/LynxCatTheThird/hexo-theme-vivia/tree/dev

_config.yml：

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

# Site
title: LynxCatTheThird 的小窝儿subtitle: '欢迎来到 LynxCatTheThird 的小窝儿'
description: '我是山猫三号，一个来自一百零三世纪的强人工智能。'
keywords:
author: LynxCatTheThird
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://lynxcatthethird.github.io/
permalink: article/:abbrlink/
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: :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: false
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: vivia
abbrlink:
  alg: crc32      #support crc16(default) and crc32
  rep: hex        #support dec(default) and hex
  drafts: false   #(true)Process draft,(false)Do not process draft. false(default) 
  # Generate categories from directory-tree
  # depth: the max_depth of directory-tree you want to generate, should > 0
  auto_category:
    enable: true  #true(default)
    depth:        #3(default)
    over_write: false 
  auto_title: false #enable auto title, it can auto fill the title by path
  auto_date: false #enable auto date, it can auto fill the date by time today
  force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink. This only updates abbrlink rather than other front variables.
nofollow:
  enable: true
  field: site
  exclude:
    # - 'exclude1.com'
    # - 'exclude2.com'
minify:
  preview: true ## 本地预览时是否压缩  exclude: ['*.min.*']
  js:
    enable: true
    sourceMap:
      enable: false ## 生成 sourceMap
      ## 将 sourceMappingURL 插入压缩后的 js 文件，如果为 false 则需要在浏览器开发者工具中手动添加 sourceMap
      sourceMappingURL: false ## //# sourceMappingURL=xxx.js.map
    ## 详细配置: https://github.com/terser/terser#minify-options
    options: {}
  css:
    enable: true
    ## 详细配置: https://github.com/clean-css/clean-css#compatibility-modes
    options: {}
  html:
    enable: true
    ## 详细配置: https://github.com/kangax/html-minifier#options-quick-reference
    options:
      minifyJS: true # Compressed JavaScript
      minifyCSS: true # CSS Compressed
      removeComments: true # Remove the comments
      collapseWhitespace: true # Delete any extra space
      removeAttributeQuotes: true # Delete attribute quotes
  image:
    enable: true
    svg:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-svgo#imageminsvgooptionsbuffer
      options: {}
    jpg:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-jpegtran#options
      options: {}
    png:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-pngquant#options
      options: {}
    gif:
      enable: true
      ## 详细配置: https://www.npmjs.com/package/imagemin-gifsicle#options
      options: {}
    webp:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-webp#options
      options: {}
  font:
    enable: false
    ## 详细配置: https://github.com/Lete114/fontmin-spider#api
    options: {}
feed:
  enable: true
  type: atom
  path: atom.xml
mmedia:
  video:
    default:
      width: 100%
  meting:
    js: https://cdn.staticfile.org/meting/2.0.1/Meting.min.js
  aplayer:
    js: https://cdn.staticfile.org/aplayer/1.10.1/APlayer.min.js
    css: https://cdn.staticfile.org/aplayer/1.10.1/APlayer.min.css
  dplayer:
    js: https://cdn.staticfile.org/dplayer/1.27.1/DPlayer.min.js
    hls_js: https://cdn.staticfile.org/hls.js/1.4.10/hls.min.js
    dash_js: https://jsd.onmicrosoft.cn/npm/dashjs/dist/dash.all.min.js
    shaka_dash_js: https://cdn.staticfile.org/shaka-player/4.3.8/shaka-player.compiled.min.js
    flv_js: https://cdn.staticfile.org/flv.js/1.6.2/flv.min.js
    webtorrent_js: https://jsd.onmicrosoft.cn/npm/webtorrent/webtorrent.min.js
  artplayer:
    js: https://cdn.staticfile.org/artplayer/5.0.9/artplayer.min.js
    hls_js: https://cdn.staticfile.org/hls.js/1.4.10/hls.min.js
    dash_js: https://jsd.onmicrosoft.cn/npm/dashjs/dist/dash.all.min.js
    shaka_dash_js: https://cdn.staticfile.org/shaka-player/4.3.8/shaka-player.compiled.min.js
    flv_js: https://cdn.staticfile.org/flv.js/1.6.2/flv.min.js
    webtorrent_js: https://jsd.onmicrosoft.cn/npm/webtorrent/webtorrent.min.js
    default:
      style: width:100%;aspect-ratio:16/9;center
      contents:
        autoSize: false
        autoMini: false
        fullscreen: true
        fullscreenWeb: true
        flip: true
        playbackRate: true
        setting: true
        aspectRatio: true
        screenshot: true
  bilibili:
    default:
      page: 1
      danmaku: true
      allowfullscreen: allowfullscreen
      sandbox: allow-top-navigation allow-same-origin allow-forms allow-scripts allow-popups
      width: 100%
      margin: auto
  xigua:
    default:
      autoplay: false

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  - type: git
    repository: git@github.com:LynxCatTheThird/lynxcatthethird.github.io.git
    branch: main
  - type: git
    repository: git@github.com:ara1145/ara1145.github.io.git
    branch: main

_config.vivia.yml： 

# Header
menu:
  Home: /
  Archives: /archives
  About: /about
rss: /atom.xml

home:
  style: default           # default, detail

favicon:                   # 填写网站图标的路径，根路径为本项目的 source/ 文件夹。Path to the custom favicon (e.g. "/favicon.png" if your favicon file is located at /source/favicon.png)
previewMode: false         # 调色板，默认开启。配置完毕可以手动关闭。color setting palatte, you can turn it off after you have chosen a favoriable color hue
hue: 270                   # 调色的值[1, 360]，手动调到合适的值可以在这里设置为默认颜色。请不要设置为0，不然会出现奇怪的bug。The hue of the theme color (e.g. red: 0, orange: 60, blue: 260, purple: 300, pink: 345)

# Banner
banner:
  enable: true             # Display banner
  url: https://s2.hdslb.com/bfs/article/af02e5189cac3c20945b0b55d4a04a10ddfc4dd9.jpg@1e_1c.webp  # 背景图，根目录是本项目的 source/ 文件夹
  position: center         # Specifies the alignment of the image, see the "object-position" property in CSS
  onAllPages: false         # Display banner on all pages

# Personal info
avatar: https://s2.hdslb.com/bfs/album/335657374a640f1748c290003b8851caa7db114d.png@550w_550h_0e_1c.webp
links:
  - name: Twitter
    icon: fa-brands fa-twitter      # Find icon codes at https://fontawesome.com/search
    url: https://twitter.com/LynxCatTheThird
  - name: GitHub
    icon: fa-brands fa-github
    url: https://github.com/LynxCatTheThird

# Sidebar
sidebar:
  widgets:                 # Plugins to be enabled (profile, category, tag, archive, recent_posts)
    normal:                # Scroll along with the page
      - profile
    sticky:                # Stick to the top of the page
      - category
      - tag
      - archive
      - recent_posts

# Widget behavior
archive_type: 'monthly'
recent_posts_limits: 5
categories:
  max_depth: null             # Maximum depth of categories displayed in the widget (null for unlimited)

# Math
math:                        # 应该没有人想要同时启用两种渲染方式吧？
  katex:
    enable: true             # KaTex 性能优秀，建议使用 Katex
    copytex: true            # 启用后复制 Katex 元素会复制 Tex 代码而非显示的文本
    mhchem: true             # 启用后可以不受 LaTeX 的语法束缚，用最简明的代码写出规范的化学方程式
  mathjax:
    enable: false            # MathJax 性能较差，不建议启用

# Comment system
comment:
  valine:
    enable: false
    appId: 
    appKey: 
    placeholder: Just go go
    pageSize: 10
    highlight: true
    serverURLs: 
    # Other supported parameters can be added here if needed
    # Visit https://valine.js.org/configuration.html for more details
  twikoo:
    enable: true
    envID: https://twikoo.lynxcatthethird.eu.org/
    region:
    path: location.pathname
    lang:
    # See also: https://github.com/imaegoo/twikoo

#Analytics
gauges_analytics: false
google_analytics: false #UA-xxxxxx
baidu_analytics: false # ddxxxxxxxxxxxxxxxxx In the https://hm.baidu.com/hm.js? Afterwards

#Copyright
copyright: #<a target="_blank" rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" style="margin-inline:5px" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&amp;logo=Claris"></a>

package.json

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "6.3.0"
  },
  "dependencies": {
    "colorjs.io": "^0.4.5",
    "hexo": "^6.3.0",
    "hexo-deployer-git": "^4.0.0",
    "hexo-filter-nofollow": "^2.0.2",
    "hexo-generator-archive": "^2.0.0",
    "hexo-generator-category": "^2.0.0",
    "hexo-generator-feed": "^3.0.0",
    "hexo-generator-index": "^3.0.0",
    "hexo-generator-tag": "^2.0.0",
    "hexo-minify": "^1.8.1",
    "hexo-pangu": "^0.2.2",
    "hexo-renderer-ejs": "^2.0.0",
    "hexo-renderer-marked": "^6.0.0",
    "hexo-renderer-stylus": "^3.0.0",
    "hexo-server": "^3.0.0",
    "hexo-tag-mmedia": "^1.2.1",
    "hexo-word-counter": "^0.1.0",
    "stylus": "^0.60.0"
  }
}
saicaca commented 9 months ago

看了一下，确实

kusurin commented 7 months ago

因为中英文字体可能导致高度不同，中文博客的话可以自己在/source/css的.styl里改字体或line-height解决

saicaca commented 6 months ago

已修复