toastsgithub / hexo-valkyr-url

a simple url card display plugin for hexo
11 stars 3 forks source link

图片样式优先级问题 #1

Open appotry opened 2 years ago

appotry commented 2 years ago

建议样式直接内联到图片标签之内 或者这样修改一下 height: 100px !important;

使用matery主题 时图片样式显示问题 https://blog.17lai.fun/posts/ed364362/#waline

appotry commented 2 years ago

链接图片、文字描述如果可以自动获取就更好了

<head>
<meta name="description" content="xxxxxxxxxxxxxx">
<title>xxxxxxx</title>

图片没有传入参数的时候,取html body中第一个img怎么样

appotry commented 2 years ago

手动修改module目录中的 height: 100px !important; 没有生效

appotry commented 2 years ago

https://blog.17lai.fun/posts/ed364362/#waline 没办法,先在第三方css文件中修改一个版本使之正常显示

my.css

.vkr-url-wrapper .avatar {
    height: 100px !important;
}
appotry commented 2 months ago

最新版本的hexo使用的时候发现一个报错

Nunjucks Error: _posts/***.md [Line 126, Column 4] unknown block tag: valkyrurl

尝试修复这个问题 npm i nunjucks

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: nunjucks@3.2.4
npm error Found: chokidar@4.0.0
npm error node_modules/chokidar
npm error   chokidar@"^4.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peerOptional chokidar@"^3.3.0" from nunjucks@3.2.4
npm error node_modules/nunjucks
npm error   nunjucks@"*" from the root project
npm error   nunjucks@"^3.2.3" from hexo-deployer-git@4.0.0
npm error   node_modules/hexo-deployer-git
npm error     hexo-deployer-git@"^4.0.0" from the root project
npm error   4 more (hexo, hexo-generator-searchdb, hexo-generator-sitemap, hexo)

依赖解决不了,放大招,去掉nunjucks 的使用

const path = require('path')
const fs = require('hexo-fs')
const { promisify } = require('util')
const url_for = require('hexo-util').url_for.bind(hexo)

const STYLE_PATH = path.resolve(__dirname, './style.css')
const REG_NAMED_ARG = new RegExp(/\[([^=]+)=(.+)\]/)

hexo.extend.tag.register(`valkyrurl`, function(args, content){

    const opts = {}
    args.forEach(arg => {
        const matched = arg.match(REG_NAMED_ARG)
        opts[matched[1]] = matched[2]
    })
    const data = {
        title: opts.title || opts.url,
        url: opts.url,
        desc: opts.desc,
        avatar: opts.avatar
    }

    // 使用字符串拼接生成 HTML
    const html = `
    <div class="vkr-url-wrapper">
        ${data.avatar ? `<a href="${data.url}"><img class="avatar" src="${data.avatar}"></a>` : ''}
        <div class="desc-wrapper">
            <a href="${data.url}">${data.title}</a>
            <hr />
            <div class="desc">${data.desc}</div>
        </div>
    </div>
    `

    return html
}, {
    async: false // 由于不再使用异步渲染,设置为 false
})

如是,就修复这个问题了

toastsgithub commented 2 months ago

Which Node.js and Hexo versions are you using?

I'll try to look into this issue later.

appotry commented 2 months ago

Which Node.js and Hexo versions are you using?

I'll try to look into this issue later.

root@hexo:/app# node -v
v22.9.0
root@hexo:/app# hexo -v
INFO  Validating config
(node:13022) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
hexo: 7.3.0
hexo-cli: 4.3.2
os: linux 5.10.60-qnap Debian GNU/Linux 12 (bookworm) 12 (bookworm)
node: 22.9.0
acorn: 8.12.1
ada: 2.9.0
amaro: 0.1.8
ares: 1.33.1
brotli: 1.1.0
cjs_module_lexer: 1.4.1
cldr: 45.0
icu: 75.1
llhttp: 9.2.1
modules: 127
napi: 9
nbytes: 0.1.1
ncrypto: 0.0.1
nghttp2: 1.63.0
nghttp3: 0.7.0
ngtcp2: 1.3.0
openssl: 3.0.13+quic
simdjson: 3.10.0
simdutf: 5.5.0
sqlite: 3.46.1
tz: 2024a
undici: 6.19.8
unicode: 15.1
uv: 1.48.0
uvwasi: 0.0.21
v8: 12.4.254.21-node.19
zlib: 1.3.0.1-motley-71660e1