V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Honwhy
V2EX  ›  分享创造

我喜欢收藏&分享书单,所以我写了一个书单配置工具

  •  
  •   Honwhy ·
    honwhy · 2 天前 · 996 次点击

    书单配置工具 v1.0

    我喜欢收藏&分享书单,所以我写了一个书单配置工具。把他们制作成榜单的形式,支持配置和导出,目前的配置内容都存储在 localstorage 中的,后续有时间再考虑升级成云端存储。

    点击访问

    功能特性

    • 支持创建删除复制榜单
    • 支持填写书籍名称、作者、评分、图片
    • 支持配置榜单底部二维码
    • 支持导出榜单功能

    开发过程

    • 支持 qwen 完成 95%以上的代码编写
    • nuxtui 适配上,搞不清楚为啥 tailwind css 无效了浪费了 1 天时间
    • 采用 shadcn-vue 完成了 Toast /Dialog ( confirm )功能

    网站效果(长图)

    第 1 条附言  ·  1 天前
    # 功能迭代
    - 支持导入豆瓣书单(豆列)
    - 支持导入微信读书榜单(官方组织的)
    - 支持导入微信读书书单(用户组织的)
    - 支持导入自定义的书单
    10 条回复    2025-09-21 18:47:42 +08:00
    JoeJoeJoe
        1
    JoeJoeJoe  
    PRO
       2 天前 via iPhone   ❤️ 1
    @conge 我觉得 conge 大佬需要
    conge
        2
    conge  
    PRO
       2 天前 via Android
    下篇读书博客时可以试试。

    但感觉会在我当前工作流中增加工作量。我太懒了,未必会坚持使用...

    要是能做到,把我的文章或者书籍信息扔给它,然后它自己生成图片,就好了。我有个书籍页面就是这么搞得自动生成。

    https://conge.livingwithfcs.org/books/
    Honwhy
        3
    Honwhy  
    OP
       1 天前   ❤️ 1
    @conge 我通过 cheerio 爬取了这个网址所有书籍,然后结合书单的数据结构 JSON ,做了一次拼装。
    然后再导入进来。

    ## 效果



    ## 代码
    ```js
    import fs from 'node:fs' // 导入 fs 模块来读取文件
    import path from 'node:path' // 导入 path 模块来处理文件路径
    import { fileURLToPath } from 'node:url' // 导入 fileURLToPath
    import * as cheerio from 'cheerio'
    import clipboardy from 'clipboardy' // 导入 clipboardy 包
    import fetch from 'node-fetch'

    // 获取当前文件的目录名
    const __filename = fileURLToPath(import.meta.url)
    const __dirname = path.dirname(__filename)
    async function scrapeBooks() {
    const url = 'https://conge.livingwithfcs.org/books/'
    const resp = await fetch(url)
    const html = await resp.text()
    const $ = cheerio.load(html)

    const books = []

    $('.hexo-douban-item').each((_, el) => {
    const title = $(el).find('.hexo-douban-title').text().trim()
    // const author = $(el).find('.book-author').text().trim()
    const img = $(el).find('.hexo-douban-picture>img').attr('src')
    const review = $(el).find('.hexo-douban-comments').text().trim()
    const rating = review.slice(0, 10).replace(/[^0-9.]/g, '')
    books.push({ title, rating, cover: img, description: review })
    })
    // 使用 __dirname 确保路径正确
    const bookListPath = path.join(__dirname, '../public/book-lists.json')
    const bookListRaw = fs.readFileSync(bookListPath, 'utf8')
    const bookList = JSON.parse(bookListRaw)

    bookList[0].books = books
    bookList[0].name = 'conge-书单'
    bookList[0].qrCodeUrl = url
    // bookList stringify and copy to clipboard
    // 使用 clipboardy.write() 写入剪贴板
    await clipboardy.write(JSON.stringify(bookList, null, 2))

    console.log('数据已成功抓取并复制到剪贴板!🎉')
    }

    scrapeBooks()
    ```
    ## 可惜
    - 书单中缺少作者信息
    - 书单的评论描述有的缺少,只有评分
    - 书单的评论描述有的太长了(是否能提供更加言简意赅的精彩点评)
    - 书单还缺少分类,生成的图片太长了,可能会导出失败,是否可以增加分类榜单呢
    EngAPI
        4
    EngAPI  
       1 天前
    能不能提个需求:
    我粘帖豆瓣连接,你抓取过来做成书单,这样还能坚持下去
    conge
        5
    conge  
    PRO
       1 天前 via Android
    @Honwhy 啊,Jason 文件我是有的。按月输出图片就好,每月的读书量也就十本上下,除了早几年的时候有过批量标记的时候。
    Honwhy
        6
    Honwhy  
    OP
       1 天前
    @EngAPI 准备支持豆瓣书单,例如这个,https://www.douban.com/doulist/45097500/

    正在开发中。。。

    感谢关注和支持🎉
    conge
        7
    conge  
    PRO
       1 天前 via Android
    我回头研究一下
    可以给每篇博客配这样的个图片,也真不错。

    我的读书数据都在这里
    https://github.com/conge/conge.github.io/blob/master/_data%2Fbooks.json
    Honwhy
        8
    Honwhy  
    OP
       1 天前
    @EngAPI
    已经支持了。 请享用。

    速度并不会很快,要读取豆瓣的豆列。
    EngAPI
        9
    EngAPI  
       1 天前
    @Honwhy 修改好积极的。
    我好像表达的有问题
    我的需求:临时组 2-10 本书(我给定几个豆瓣连接),希望出个这么的清单,如果去豆瓣加了豆列,那再回来感觉有些多余。
    Honwhy
        10
    Honwhy  
    OP
       1 天前
    @EngAPI #9 我 get 到你的意思了,我想想怎么支持下。
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1241 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 23:34 · PVG 07:34 · LAX 16:34 · JFK 19:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.