search

hexojs / hexo

A fast, simple & powerful blog framework, powered by Node.js.
https://hexo.io
MIT License
39.22k stars 4.82k forks source link

cssHelper return invalid stylesheet tags #4541

Closed TobiasNickel closed 3 years ago

TobiasNickel commented 4 years ago

Check List

Please check followings before submitting a new issue.

Expected behavior

in the template, css('css/style') should return one style link tag.

Actual behavior

<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/%02.css">
<link rel="stylesheet" href="/.css">

How to reproduce?

hexo generate -f

Is the problem still there under "Safe mode"?

I think this does not apply here, the save mode does not compile any template.

Environment & Settings

Node.js & npm version(node -v && npm -v)

v12.4.0
6.9.0

Your site _config.yml (Optional)

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

# Site
title: Tobias Nickel
subtitle: software developer from heart
description:
keywords:
author: Tobias Nickel
language: en-US
lang: en-US
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://tnickel.de/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# 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.:title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
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:

feed:
  type:
    - atom
    - rss2
  path:
    - atom.xml
    - feed.xml
  limit: 20
  hub:
  content: false
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

# 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: 5
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# 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

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

# Extensions
# Plugins: # https://hexo.io/plugins/

## Themes: https://hexo.io/themes/
theme: jacman

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

sitemap:
    path: sitemap.xml
    # template: ./sitemap_template.xml

Your theme _config.yml (Optional)

##### Menu
menu:
  Home: /
  Archives: /archives
  About: /about
## you can create `tags` and `categories` folders in `../source`.
## And create a `index.md` file in each of them.
## set `front-matter`as
## layout: tags (or categories)
## title: tags (or categories)
## ---

#### Widgets
widgets: 
  - github-card
  - category
  - tag
  - links
  - douban
  - rss
# - weibo
  ## provide eight widgets:github-card,category,tag,rss,archive,tagcloud,links,weibo

#### RSS 
rss: /feed.xml ## RSS address.
atom: /atom.xml

#### Image
imglogo:
  enable: true             ## display image logo true/false.
  src: img/author_small.jpg        ## `.svg` and `.png` are recommended,please put image into the theme folder `/jacman/source/img`.
favicon: img/favicon.ico   ## size:32px*32px,`.ico` is recommended,please put image into the theme folder `/jacman/source/img`.     
apple_icon: img/jacman.jpg ## size:114px*114px,please put image into the theme folder `/jacman/source/img`.
author_img: img/author_small.jpg ## size:220px*220px.display author avatar picture.if don't want to display,please don't set this.
banner_img: #img/banner.jpg ## size:1920px*200px+. Banner Picture
### Theme Color 
theme_color:
    theme: '#2b6feb'    ##the defaut theme color is blue

# 代码高亮主题
# available: default | night
highlight_theme: default

#### index post is expanding or not 
index:
  expand: true           ## default is unexpanding,so you can only see the short description of each post.
  excerpt_link: Read More  

close_aside: false  #close sidebar in post page if true
mathjax: false      #enable mathjax if true

### Creative Commons License Support, see http://creativecommons.org/ 
### you can choose: by , by-nc , by-nc-nd , by-nc-sa , by-nd , by-sa , zero
creative_commons: none

#### Author information
author:
  intro_line1:  "Hello, I'm an awesome JS developer."    ## your introduction on the bottom of the page
  intro_line2:  "This is my blog, believe it or not."  ## the 2nd line
  weibo:      ## e.g. wuchong1014 or 2176287895 for http://weibo.com/2176287895
  weibo_verifier:     ## e.g. b3593ceb Your weibo-show widget verifier ,if you use weibo-show it is needed.
  tsina:      ## e.g. 2176287895  Your weibo ID,It will be used in share button.
  douban:     ## e.g. wuchong1014 or your id for https://www.douban.com/people/wuchong1014
  zhihu:      ## e.g. jark  for http://www.zhihu.com/people/jark
  email: business@tnickel.de     ## e.g. imjark@gmail.com
  twitter:    ## e.g. jarkwu for https://twitter.com/jarkwu
  github: TobiasNickel     ## e.g. wuchong for https://github.com/wuchong
  dev: tobiasnickel     ## e.g. wuchong for https://dev.to/wuchong
  facebook: TobiasNickel1988  ## e.g. imjark for https://facebook.com/imjark
  linkedin: tobias-nickel-0391514a  ## e.g. wuchong1014 for https://www.linkedin.com/in/wuchong1014
  google_plus:    ## e.g. "111190881341800841449" for https://plus.google.com/u/0/111190881341800841449, the "" is needed!
  stackoverflow:  ## e.g. 3222790 for http://stackoverflow.com/users/3222790/jark
## if you set them, the corresponding  share button will show on the footer

#### Toc
toc:
  article: false   ## show contents in article.
  aside: true     ## show contents in aside.
## you can set both of the value to true of neither of them.
## if you don't want display contents in a specified post,you can modify `front-matter` and add `toc: false`.

#### Links
links:
  github: https://github.com/TobiasNickel/
  npm: https://npmjs.com/~nickeltobias
  dev.to: https://dev.to/u/tobiasnickel
  He For She: https://www.heforshe.org/en
  Dulin's blog: https://github.com/mrdulin/blog
  Wiosoft: https://wiosoftcrafts.com/en/

#### Comment
duoshuo_shortname:    ## e.g. wuchong   your duoshuo short name.
disqus_shortname:     ## e.g. wuchong   your disqus short name.
gentie_key:           ## your 163 gentie key, see https://gentie.163.com/
changyan_appid:       ## changyan app id, see http://changyan.kuaizhan.com/
changyan_appkey:      ## changyan app key, see http://changyan.kuaizhan.com/

#### Share button
jiathis:
  enable: false ## if you use jiathis as your share tool,the built-in share tool won't be display.
  id:    ## e.g. 1889330 your jiathis ID. 
  tsina: ## e.g. 2176287895 Your weibo id,It will be used in share button.

#### Analytics
google_analytics:
  enable: false
  id:      ## e.g. UA-46321946-2 your google analytics ID.
  site:     ## e.g. wuchong.me your google analytics site or set the value as auto.
## You MUST upgrade to Universal Analytics first!
## https://developers.google.com/analytics/devguides/collection/upgrade/?hl=zh_CN
baidu_tongji:
  enable: false
  sitecode: e6d1f421bbc9962127a50488f9ed37d1 ## e.g. e6d1f421bbc9962127a50488f9ed37d1 your baidu tongji site code
cnzz_tongji:
  enable: false
  siteid:    ## e.g. 1253575964 your cnzz tongji site id

#### Miscellaneous
ShowCustomFont: true  ## you can change custom font in `variable.styl` and `font.styl` which in the theme folder `/jacman/source/css`.
fancybox: true        ## if you use gallery post or want use fancybox please set the value to true.
totop: true           ## if you want to scroll to top in every post set the value to true

#### Custom Search
google_cse: 
  enable: false
  cx:   ## e.g. 018294693190868310296:abnhpuysycw your Custom Search ID.
## https://www.google.com/cse/ 
## To enable the custom search You must create a "search" folder in '/source' and a "index.md" file
## set the 'front-matter' as
## layout: search 
## title: search
## ---
baidu_search:     ## http://zn.baidu.com/
  enable: false
  id:   ## e.g. "783281470518440642"  for your baidu search id
  site: http://zhannei.baidu.com/cse/search  ## your can change to your site instead of the default site

tinysou_search:     ## http://tinysou.com/
  enable: false
  id:  ## e.g. "4ac092ad8d749fdc6293" for your tiny search id

Hexo and Plugin version(npm ls --depth 0)

+-- hexo@5.1.1
+-- hexo-generator-archive@1.0.0
+-- hexo-generator-category@1.0.0
+-- hexo-generator-feed@3.0.0
+-- hexo-generator-index@2.0.0
+-- hexo-generator-sitemap@2.1.0
+-- hexo-generator-tag@1.0.0
+-- hexo-renderer-ejs@1.0.0
+-- hexo-renderer-marked@3.2.0
+-- hexo-renderer-stylus@2.0.1
+-- hexo-server@2.0.0
+-- hexo-tag-nomnoml@0.0.1
+-- nomnoml@0.7.3
`-- tmitter@3.0.3

Your package.json package.json

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "copyPlugins": "cp -r -f ./plugins/* ./node_modules"
  },
  "hexo": {
    "version": "5.1.1"
  },
  "dependencies": {
    "hexo": "^5.1.1",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-feed": "^3.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-sitemap": "^2.1.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^3.2.0",
    "hexo-renderer-stylus": "^2.0.1",
    "hexo-server": "^2.0.0",
    "hexo-tag-nomnoml": "0.0.1",
    "nomnoml": "^0.7.3",
    "tmitter": "^3.0.3"
  }
}

Others

Hi, I have an issue with the cssHelper. I am using the jacman theme. it uses the css method with css('css/style'). the return value of that method that ends up in the pages is 

<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/%02.css">
<link rel="stylesheet" href="/.css">

The problem has something todo with the flatten method. it is using for(const i in arr){...}. When I change this loop to arr.forEach(...) it behaves right. using console.log I did some debugging. flatten takes the single array from args and there are 3 properties. 0, S, and in_array. I don't know what S is, but I did '.toString()', for the in_array method, there is this code: 

function(e){
                        var r=new RegExp(this.S+e+this.S);
                        return (r.test(this.S+this.join(this.S)+this.S));
                                }

I was searching for the this.S and the in_array method, but could not really find it in my node_modues directory. I somehow think it is coming from the nunjucks dependency, but can't say for sure. nunjucks is used by multiple hexo-... modules.

When I change the implementation of flatten to use arr.forEach(...) instead of the for-in loop it works good.

Would you accept a PR to change the implementation of flatten to forEach?

stevenjoezhang commented 3 years ago

See also https://github.com/hexojs/hexo/pull/3690

TobiasNickel commented 3 years ago

hmm, ok, I deleted my node_modules directory, and npm install again, seems it is not an issue.