段永平在浙大的访谈视频(2025年1月5日)全文很长,如果没兴趣,这里有一个我的总结:

  1. 做事情要从长远考虑,做你认为对的事,把这些事做对
  2. 发现错误,要及时改正
  3. 投资只投自己看得懂的,不要加杠杆
  4. 好的商业模式都是高毛利
  5. 保持健康,好好享受人生
  6. 我是一个普通人,我喜欢打球

主持人:那您面对这些挫折的时候,有没有什么解决的想法,或者心得之类的可以和我们分享吗?

段:其实还是有的,你要尽量想长远,这又说回到之前了。还有就是你不要让重要的事情变成紧急的事情,我觉得这个也很重要。我现在已经不怎么接电话了,意思是说你不要让太多的事变成紧急的事情。比方说锻炼身体,不能等到病的不行了才去看医生。记得之前有次采访时问我:危机时刻你会怎么办?我说:我开着200km/h的车,前面20米有一堵墙,肯定要撞上去了,你觉得我该怎么办?他说:能怎么办,死定了,那你怎么办?我说最重要的是你不要开那么快啊,你干嘛要去撞墙啊,你开辆好车,比如说坦克;就是说要靠长远的角度去解决问题,不能等到危机时刻才想起解决问题,危机时刻不就死了么,虽然大家都喜欢临危不惧,但临危不惧最后不还是死了嘛!所以,并没有意义。所以,安全第一,安全第一并不是说到时候再想办法,那个时候没办法,要提早做准备的。


主持人:来自计算机学院的同学问:在您的视角中信息差对于投资和选择的影响有多大?

段:炒股票对于我没有什么影响,除非你买了马上想卖,想赚点不该赚的钱。当然了也有一些靠信息差赚钱的,我没有那么喜欢这种事情。我觉得投资对我来讲不是一个零和游戏,信息差实际上是个零和游戏,你利用这个信息在别人没有这个信息之前,你赚了别人该赚的钱或者怎么样,当然也不能这么讲,但是我觉得量化投资有点那个味道。但是你不做量化,别人就会做,量化投资作为一门生意无可厚非。
但我觉得从长远看,这些都是一个小小的波澜,你太care了,你很累啊。我的球还要不要打了,生活还是要生活啊。所以要看长远,你找到好公司你就拿着,但有些人只听见了“拿着”,却忘了“好公司”,拿个错公司死的不更惨吗。 我和好多人讲,他们就是想不明白,他们说:价值投资就是长期投资。 不是的,除了价值投资请问还有别的投资方法吗?你投的就是价值,如果你不投价值,你投的是什么?所以要看长远,拿着好公司,你的生活可以愉快很多。比如巴菲特,芒格他们活得都很好,投机很有名的那些人,大部分死的都很惨,这是事实。国内也不是没有啊,作为一个有钱人,好好地跑去坐了牢了,这都是想不开的。

主持人:来自经济学院的同学问:您是否经历过投资高风险与高回报的一个关键决策时刻,以及面对这样一个高度不确定的市场,您如何平衡风险与收益呢?

段:明知高风险,还要去做,那不是脑子坏了吗…. 还真是这样的,但是呢,风投不一样,风投他们不冒风险,他是拿你的钱去投,赚到的钱有他的一份,那他当然可以做,对吧。 当然他也会有一些判别,这个A1的市场或者未来的市场有可能喜欢,他可以融到更多的钱,你是第一轮投进去,你可以赚第二轮,第三轮,第四轮的钱。风投严格来讲是一个很现代的产物,投资本身,逻辑上你是要看他的商业模式,未来现金流,确实能挣到钱,你才敢投嘛,这样你也愉快。

但风投不会像我们投资那样,他都是这里放一点,那里放一点。他其实赚的是一个股价的钱。你看风投做的很大的,比如说孙正义,扣掉前两名赚钱的公司,估计他就赚不到钱。加上了其实也没赚多少,但他是非常有名的风投。这个其实很有意思,他赚的钱和巴菲特比确实还差很多。

但是很多人做企业,企业起来以后,作为企业最早的创始人,市值很高的时候,确实性价比很高。但那是剩下来的一个人,可能同一年创业的人有1000万,大家都看到埃隆马斯克,你也跑去做电动车,中国一年电动车死多少人啊,就是这个道理。

主持人:比如在医药行业里面有很多公司要研发一个新技术,可能需要很高的研发费用,但是并不能确定一定能过临床验证。这时候就需要考虑高风险,高回报了。

段:OK,这样说,我就能理解了。我觉得做企业的时候可能会去做这种事情,作为风投做这种事情也make sense,但是,当你是大资金的时候就比较困难。不能说用你需要的钱去赌一个你不需要的钱,第一年我自己赚个10%-25%,挺好的;如果搞个500%回报,但可能会亏光光的事情,为什么要去做。所以,我一般不会去做这样的事情;但是,我觉得需要有人去做,医药是一个特别典型的行业,科技也是一样的,有很多新的想法,但是没有办法马上就有成熟的生意模式;我们这样的投资人是不应该投的,我没有那么多时间,因为我要打球啊。真是这样,很多人说:你关心下这个。我说:我不关心,等到他好起来了,我再来也可以。
我不是一个职业投资人,虽然我管的钱比绝大多数投资人可能还多,我一个人管的钱甚至可能超过一个中型的头部基金,但是呢,我并不会像他那么忙,我看见好多人天天都在忙。我说:你们都在忙什么?你看我就买了个苹果,就拿着就完了嘛。这其实剩下的时间我就可以打球了嘛,对吧,让他们忙。但是你说的话我非常同意,只是,我自己一般会避免。

主持人:也就是说这是投资的两种风格,您更倾向于高确定性风格……

段:你说的那个是高风险,但不知道有没有高回报的行业。我要是知道有高回报,我也是可以投的,这个取决于你懂不懂,就像我买的那些,大家也觉得都是高风险,我不觉得呀。所以,这取决于你有多懂,我一直说搞不懂的东西不要去碰,还有就是不要上杠杆,不要用股票去抵押一下,觉得股票要涨了就借很多钱;然后呢,股票在涨之前掉了一下,你就完了,所以不要碰这种事情,这样你就会容易很多,你还可以打球。

主持人:来自计算机学院的学生问:当下年轻人应该如何应对经济下行周期呢?

段:其实,当下老年人也面临这个问题,这和年轻人有啥关系,没关系啊。我还真不知道该怎么回答这个问题,好自为之呗。确实我们面临这个问题,对大人好一点吧,你还是可以找到好工作的,你还可以先读个研,实在不行再读个博。但是,如果你刚好看见一个好公司有机会加入,我觉得也是一个很好的选择。因为我看到经济不是那么好的情况下,好公司都还是小日子过得不错的。你说腾讯,茅台,我们公司,其实都挺好。茅台股价掉不等于他公司状况不好,其实好得很,酒还是买不到,我们有直购买他的酒,给的量都很小。


主持人:来自经济学院的同学问段学长觉得浙大有什么样的气质和氛围影响了您的创业、投资和生活呢。

段:呃,我记得我们单位曾经还有个人说一定要跟着段永平的脚步,所以要把儿子送到信电系(浙大的一个专业)。我说:那我下过哪条河摸鱼,你有没有去过。所以,其实是不知道的,成长有很多的因素,如果这个因素是成立的,那应该所有人都和我一样。 但,你说和浙大有没有关系?当然是有的,我觉得浙大毫无疑问是个好学校。但是也会出问题,对吧。

主持人:我们现在信电学院也是段学长您的母院,我们现在信电学子都有一个特别经典的四个字,叫做:勤奋乐观。我们都会说要争做勤奋乐观的信电人。这两个词也是现在我们信电学院整体的学生培养的一个特质,包括在学习上,我们要时刻保持勤奋,保持不畏难,坚持挖掘一些更多的难点;在平常的生活中,我们要保持一个乐观,积极向上的态度。这也是我们现在信电学院学生的特点。

主持人想继续读下一个同学的问题,段永平打断道: 我可以对刚才那两个词,呃,叫什么,勤奋和乐观….

主持人:是的,是的,勤奋和乐观,不知道您对我们现在信电学院的勤奋乐观两个词….

段:我觉得最重要的是要做对的事情,要把事情做对。(说的好,哈哈哈哈,不唱高调,大家就不能实事求是吗,非要整那些虚头巴脑的,这里段永平估计有点听不下去了,打段主持人的唱高调,再次强调自己的观点和理念)
段:不是,我要你勤奋,你勤奋的起来吗?我就从来不勤奋,我可是想尽办法偷懒。偷懒历史不说,那考试偷看,用chatgpt来参考写论文还是可以的。我觉得最主要的还是脑子里一定要有数,要想着做对的事情,发现错了要赶紧改。

呃,乐观,乐观是性格的问题吧。不是每个人想乐观就乐观的起来的。 这两个东西(勤奋和乐观)说完以后,大家真的会得到什么好处吗?我可以质疑一下吗?

构建有效的Agent

在过去的一年中,我们与数十个团队合作,在各个行业构建大型语言模型(LLM)Agent。一致的是,最成功的实现并没有使用复杂的框架或专门的库。相反,他们使用的是简单、可组合的模式。

在这篇文章中,我们分享了我们从与客户合作和自己构建Agent的过程中学到的东西,并为开发者提供构建有效Agent的实用建议。

什么是Agent?

“Agent”可以用几种方式来定义。一些客户将Agent定义为完全自主的系统,可以在较长的时间内独立运行,使用各种工具来完成复杂的任务。另一些人则使用这个术语来描述更具规范性的实现,它们遵循预定义的工作流程。在 Anthropic,我们将所有这些变体归类为 Agent系统,但在 工作流程Agent 之间做出了重要的架构区分:

  • 工作流程 是指通过预定义的代码路径来编排 LLM 和工具的系统。
  • Agent,另一方面,是指 LLM 动态地指导其自身过程和工具使用,保持对其如何完成任务的控制的系统。

下面,我们将详细探讨这两种类型的Agent系统。在附录 1(“实践中的Agent”)中,我们描述了客户发现使用这些类型系统具有特殊价值的两个领域。

何时(以及何时不)使用Agent

在使用 LLM 构建应用程序时,我们建议找到最简单的解决方案,并且仅在需要时增加复杂性。这可能意味着根本不构建Agent系统。Agent系统通常会牺牲延迟和成本来换取更好的任务性能,您应该考虑何时这种权衡是有意义的。

当需要更多复杂性时,工作流程为定义明确的任务提供了可预测性和一致性,而当需要灵活性和模型驱动的决策时,Agent是更好的选择。然而,对于许多应用程序,使用检索和上下文示例优化单个 LLM 调用通常就足够了。

何时以及如何使用框架

有许多框架可以使Agent系统更容易实现,包括:

  • LangChain 的 LangGraph
  • Amazon Bedrock 的 AI Agent框架
  • Rivet,一个拖放式 GUI LLM 工作流程构建器;以及
  • Vellum,另一个用于构建和测试复杂工作流程的 GUI 工具。

这些框架通过简化调用 LLM、定义和解析工具以及将调用链接在一起等标准底层任务,使入门变得容易。然而,它们通常会创建额外的抽象层,这会模糊底层提示和响应,使其更难调试。当一个更简单的设置就足够时,它们也会让人更容易增加复杂性。

我们建议开发者直接使用 LLM API 入手:许多模式可以用几行代码实现。如果您确实使用了框架,请确保您了解底层代码。对底层代码的错误假设是客户错误的常见来源。

请参阅我们的 cookbook 以获取一些示例实现。

构建模块、工作流程和Agent

在本节中,我们将探讨我们在生产中看到的Agent系统的常见模式。我们将从我们的基础构建模块——增强型 LLM 开始,并逐步增加复杂性,从简单的组合工作流程到自主Agent。

构建模块:增强型 LLM

Agent系统的基本构建模块是增强了检索、工具和记忆等增强功能的 LLM。我们目前的模型可以积极地使用这些功能——生成它们自己的搜索查询,选择合适的工具,并决定保留哪些信息。

我们建议关注实现的两个关键方面:根据您的特定用例定制这些功能,并确保它们为您的 LLM 提供一个简单、文档完善的接口。虽然有很多方法可以实现这些增强功能,但一种方法是通过我们最近发布的 MCP(model-context-protocol)/模型上下文协议,该协议允许开发者通过简单的 客户端实现 与不断增长的第三方工具生态系统集成。

The augmented LLM

在本帖的其余部分,我们将假设每个 LLM 调用都可以访问这些增强功能。

工作流程:Prompt chaining

Prompt chaining 将任务分解为一系列步骤,其中每个 LLM 调用都会处理前一个调用的输出。您可以在任何中间步骤中添加程序性检查(请参阅下图中的“门”)以确保该过程仍在轨道上。

何时使用此工作流程: 此工作流程非常适合可以将任务轻松干净地分解为固定子任务的情况。主要目标是通过使每个 LLM 调用成为更简单的任务,从而牺牲延迟来换取更高的准确性。

prompt-chaining))

提示链接有用的示例:

  • 生成营销文案,然后将其翻译成另一种语言。
  • 编写文档大纲,检查大纲是否符合某些标准,然后根据大纲编写文档。

工作流程:路由

路由对输入进行分类,并将其定向到专门的后续任务。此工作流程允许关注点分离,并构建更专业的提示。如果没有此工作流程,优化一种类型的输入可能会损害其他输入的性能。

何时使用此工作流程: 当存在最好单独处理的不同类别,并且可以通过 LLM 或更传统的分类模型/算法准确处理分类时,路由效果良好。

路由有用的示例:

  • 将不同类型的客户服务查询(一般问题、退款请求、技术支持)定向到不同的下游流程、提示和工具。
  • 将简单/常见的问题路由到较小的模型(如 Claude 3.5 Haiku),并将困难/不寻常的问题路由到功能更强大的模型(如 Claude 3.5 Sonnet),以优化成本和速度。

route

工作流程:并行化

LLM 有时可以同时处理一项任务,并通过编程方式聚合其输出。此工作流程(并行化)体现在两个关键变体中:

  • 分段: 将任务分解为并行运行的独立子任务。
  • 投票: 多次运行同一任务以获得不同的输出。

何时使用此工作流程: 当可以并行化划分的子任务以提高速度,或者当需要多个视角或尝试以获得更高置信度的结果时,并行化是有效的。对于具有多个考虑因素的复杂任务,LLM 通常在每个考虑因素由单独的 LLM 调用处理时表现更好,从而可以专注于每个特定方面。

parallelization

并行化有用的示例:

  • 分段
    • 实施护栏,其中一个模型实例处理用户查询,而另一个模型实例筛选它们是否存在不当内容或请求。这往往比让同一个 LLM 调用处理护栏和核心响应效果更好。
    • 自动化评估以评估 LLM 性能,其中每个 LLM 调用评估模型在给定提示下性能的不同方面。
  • 投票
    • 审查一段代码是否存在漏洞,其中多个不同的提示审查代码并在发现问题时标记代码。
    • 评估一段给定内容是否不适当,使用多个提示评估不同的方面或需要不同的投票阈值来平衡误报和漏报。

工作流程:协调器-工作器

在协调器-工作器工作流程中,中央 LLM 动态地分解任务,将其委托给工作器 LLM,并综合它们的结果。

何时使用此工作流程: 此工作流程非常适合无法预测所需子任务的复杂任务(例如,在编码中,需要更改的文件数量以及每个文件中更改的性质可能取决于任务)。虽然在地形上相似,但与并行化的主要区别在于其灵活性——子任务不是预定义的,而是由协调器根据特定输入确定的。

orchestrator

协调器-工作器有用的示例:

  • 每次都对多个文件进行复杂更改的编码产品。
  • 涉及从多个来源收集和分析信息以获取可能相关信息的搜索任务。

工作流程:评估器-优化器

在评估器-优化器工作流程中,一个 LLM 调用生成响应,而另一个 LLM 调用在循环中提供评估和反馈。

何时使用此工作流程: 当我们有明确的评估标准,并且迭代改进提供了可衡量的价值时,此工作流程特别有效。良好契合的两个迹象是,首先,当人类表达反馈时,LLM 响应可以明显改进;其次,LLM 可以提供此类反馈。这类似于人类作家在制作润色过的文档时可能会经历的迭代写作过程。

评估器-优化器有用的示例:

  • 文学翻译,其中可能存在翻译器 LLM 最初可能无法捕捉到的细微差别,但评估器 LLM 可以提供有用的批评。
  • 需要多轮搜索和分析以收集全面信息的复杂搜索任务,其中评估器决定是否需要进一步搜索。

Evaluator-optimizer

Agent

随着 LLM 在关键功能(理解复杂输入、进行推理和规划、可靠地使用工具以及从错误中恢复)方面日趋成熟,Agent正在生产中涌现。Agent从人类用户的命令或互动讨论开始其工作。一旦任务明确,Agent就会独立计划和操作,可能会返回给人类以获取更多信息或判断。在执行过程中,Agent必须在每个步骤(例如,工具调用结果或代码执行)中从环境中获得“真实情况”,以评估其进度。然后,Agent可以在检查点或遇到障碍时暂停以获取人工反馈。任务通常在完成时终止,但通常也包括停止条件(例如,最大迭代次数)以保持控制。

Agent可以处理复杂的任务,但它们的实现通常很简单。它们通常只是在循环中使用基于环境反馈的工具的 LLM。因此,至关重要的是要清晰且周到地设计工具集及其文档。我们在附录 2(“提示工程您的工具”)中扩展了工具开发的最佳实践。

agent

何时使用Agent: Agent可用于开放式问题,在这些问题中,很难或不可能预测所需的步骤数量,并且您无法硬编码固定路径。LLM 可能会运行多个回合,并且您必须对其决策制定有一定的信任度。Agent的自主性使其非常适合在可信环境中扩展任务。

Agent的自主性意味着更高的成本和潜在的复合错误。我们建议在沙盒环境中进行广泛的测试,并采取适当的防护措施。

Agent有用的示例:

以下示例来自我们自己的实现:

agent usage

组合和自定义这些模式

这些构建模块不是规定性的。它们是开发者可以塑造和组合以适应不同用例的常见模式。与任何 LLM 功能一样,成功的关键在于衡量性能并迭代实现。重申一遍:您应该只在结果明显改善的情况下考虑增加复杂性。

总结

在 LLM 领域的成功并不在于构建最复杂的系统。而在于构建适合您需求的 正确 系统。从简单的提示开始,通过全面的评估对其进行优化,并且仅在较简单的解决方案不足时才添加多步骤Agent系统。

在实施Agent时,我们尝试遵循三个核心原则:

  1. 在Agent的设计中保持 简洁
  2. 通过明确显示Agent的规划步骤来优先考虑 透明度
  3. 通过全面的工具 文档和测试 来精心设计您的Agent-计算机接口 (ACI)。

框架可以帮助您快速入门,但在您转向生产时,请毫不犹豫地减少抽象层并使用基本组件进行构建。通过遵循这些原则,您可以创建不仅功能强大,而且可靠、可维护并受到用户信任的Agent。

致谢

由 Erik Schluntz 和 Barry Zhang 撰写。这项工作借鉴了我们在 Anthropic 构建Agent的经验以及我们客户分享的宝贵见解,对此我们深表感谢。

附录 1:实践中的Agent

我们与客户的合作揭示了 AI Agent的两个特别有希望的应用,它们展示了上述讨论的模式的实际价值。这两个应用程序都说明了Agent如何为既需要对话又需要操作、具有明确的成功标准、启用反馈循环以及集成有意义的人工监督的任务增加最大价值。

A. 客户支持

客户支持将熟悉的聊天机器人界面与通过工具集成增强的功能相结合。这非常适合更开放的Agent,因为:

  • 支持交互自然地遵循对话流程,同时需要访问外部信息和操作;
  • 可以集成工具来提取客户数据、订单历史记录和知识库文章;
  • 可以以编程方式处理诸如发出退款或更新工单之类的操作;并且
  • 可以通过用户定义的解决方案清楚地衡量成功。

一些公司已经通过仅针对成功解决方案收费的基于使用情况的定价模型证明了这种方法的可行性,这表明了他们对Agent有效性的信心。

B. 编码Agent

软件开发领域展示了 LLM 功能的巨大潜力,其功能从代码完成发展到自主解决问题。Agent特别有效,因为:

  • 可以通过自动化测试验证代码解决方案;
  • Agent可以使用测试结果作为反馈来迭代解决方案;
  • 问题空间定义明确且结构化;并且
  • 可以客观地衡量输出质量。

在我们自己的实现中,Agent现在可以仅根据拉取请求描述来解决 SWE-bench Verified 基准中的实际 GitHub 问题。然而,虽然自动化测试有助于验证功能,但人工审查对于确保解决方案符合更广泛的系统要求仍然至关重要。

附录 2:提示工程您的工具

无论您构建哪种Agent系统,工具都可能是您Agent的重要组成部分。工具 使 Claude 能够通过在我们 API 中指定其确切的结构和定义来与外部服务和 API 交互。当 Claude 响应时,如果它计划调用工具,它将在 API 响应中包含一个 工具使用块。工具定义和规范应与您的整体提示一样受到提示工程的关注。在本简短的附录中,我们将描述如何提示工程您的工具。

通常有几种方法可以指定相同的操作。例如,您可以通过编写差异或通过重写整个文件来指定文件编辑。对于结构化输出,您可以在 Markdown 或 JSON 中返回代码。在软件工程中,这些差异是表面上的,并且可以从一种格式无损地转换为另一种格式。但是,某些格式对于 LLM 而言比其他格式更难编写。编写差异需要知道在编写新代码之前块头中有多少行正在更改。在 JSON(与 Markdown 相比)中编写代码需要额外转义换行符和引号。

我们关于决定工具格式的建议如下:

  • 在模型将自己写入死角之前,给模型足够的令牌来“思考”。
  • 使格式接近模型在互联网上的文本中自然出现的形式。
  • 确保没有格式“开销”,例如必须准确计算数千行代码,或对它编写的任何代码进行字符串转义。

一个经验法则是考虑人机界面 (HCI) 需要付出多少努力,并计划投入同样多的精力来创建良好的 Agent 计算机接口 (ACI)。以下是一些关于如何做到这一点的想法:

  • 将自己置于模型的角度。根据描述和参数,使用此工具是否显而易见,还是需要仔细考虑?如果是这样,那么对于模型来说可能也是如此。一个好的工具定义通常包括示例用法、边缘情况、输入格式要求以及与其他工具的明确界限。
  • 如何更改参数名称或描述以使事情更明显?将其视为为团队中的初级开发人员编写出色的文档字符串。当使用许多类似的工具时,这一点尤其重要。
  • 测试模型如何使用您的工具:在我们的 工作台 中运行许多示例输入,以查看模型会犯什么错误,并进行迭代。
  • Poka-yoke 您的工具。更改参数,使其更难犯错。

在为 SWE-bench 构建我们的Agent时,我们实际上花费了更多的时间来优化我们的工具,而不是整体提示。例如,我们发现模型在使用相对文件路径的工具在Agent移出根目录后会犯错。为了解决这个问题,我们更改了工具以始终需要绝对文件路径——我们发现模型完美地使用了此方法。

原文

模型上下文协议 (MCP/model context protocol) 是一种开放标准,用于将 AI 助手连接到数据所在的系统,包括内容存储库、业务工具和开发环境。其目的是帮助前沿模型产生更好、更相关的响应。

模型上下文协议 (MCP),这是一种将 AI 助手连接到数据所在系统的新标准,包括内容存储库、业务工具和开发环境。其目的是帮助前沿模型产生更好、更相关的响应。

随着 AI 助手被主流采用,该行业在模型能力方面投入了大量资金,在推理和质量方面取得了快速进展。然而,即使是最复杂的模型也受到其与数据隔离的限制——被困在信息孤岛和遗留系统之后。每个新的数据源都需要其自己的自定义实现,使得真正连接的系统难以扩展。

MCP 解决了这一挑战。它为将 AI 系统与数据源连接提供了一个通用的开放标准,用单个协议取代了碎片化的集成。结果是一种更简单、更可靠的方式,让 AI 系统访问它们所需的数据。

模型上下文协议

模型上下文协议是一种开放标准,使开发人员能够在他们的数据源和 AI 驱动的工具之间建立安全的双向连接。架构很简单:开发人员可以通过 MCP 服务器公开他们的数据,或者构建连接到这些服务器的 AI 应用程序(MCP 客户端)。

今天,我们为开发人员介绍了模型上下文协议的三个主要组成部分:

Claude 3.5 Sonnet 擅长快速构建 MCP 服务器实现,使组织和个人可以轻松地将其最重要的数据集与一系列 AI 驱动的工具快速连接起来。为了帮助开发人员开始探索,我们正在共享用于流行的企业系统(如 Google Drive、Slack、GitHub、Git、Postgres 和 Puppeteer)的预构建 MCP 服务器。

Block 和 Apollo 等早期采用者已将 MCP 集成到其系统中,而包括 Zed、Replit、Codeium 和 Sourcegraph 在内的开发工具公司正在与 MCP 合作,以增强其平台——使 AI 代理能够更好地检索相关信息,以进一步了解编码任务的上下文,并以更少的尝试生成更细致和功能性的代码。

“在 Block,开源不仅仅是一种开发模式,它还是我们工作的基础,以及致力于创造推动有意义的变革并作为所有人公共利益的技术的承诺,”Block 首席技术官 Dhanji R. Prasanna 说。“诸如模型上下文协议之类的开放技术是将 AI 与现实世界应用连接起来的桥梁,确保创新是可访问的、透明的,并且植根于协作。我们很高兴能合作开发一个协议并使用它来构建代理系统,从而消除机械负担,使人们可以专注于创造性。”

开发人员现在可以针对标准协议进行构建,而不是为每个数据源维护单独的连接器。随着生态系统的成熟,AI 系统将在不同的工具和数据集之间移动时保持上下文,从而用更可持续的架构取代当今的碎片化集成。

入门

开发人员可以立即开始构建和测试 MCP 连接器。Claude.ai支持将 MCP 服务器连接到 Claude 桌面应用程序。

Claude for Work 客户可以开始在本地测试 MCP 服务器,将 Claude 连接到内部系统和数据集。我们很快将提供用于部署远程生产 MCP 服务器的开发人员工具包,这些服务器可以为您的整个 Claude for Work 组织提供服务。

从以下步骤开始:

一个开放的社区

我们致力于将 MCP 构建为一个协作的开源项目和生态系统,我们渴望听到您的反馈。无论您是 AI 工具开发人员、希望利用现有数据的企业,还是探索前沿的早期采用者,我们都邀请您一起构建具有上下文感知能力的 AI 的未来。

题外话

目前还处于开发期,主要支持的MCP客户端都与编程相关,主要是代码编辑器或插件,如:

  • Continue(vscode 插件),开源 AI 代码助手,支持所有 MCP 功能
  • Zed (高性能代码编辑器,内置 MCP 支持,专注于 prompt 模板和 tool 集成)
  • Cody,Sourcegraph 的 AI 编码助手,通过 OpenCTX 实现 MCP
  • Cline(vscode 插件),一个自动化编码代理,能够编辑文件、运行命令、使用浏览器等

原文

什么是 Claude Artifacts?

Anthropic 发布了 Claude 3.5 Sonnet,这是一个突破性的 AI 模型,在大多数测试中都超过了 OpenAI 的 GPT-4o。除了新的模型之外,Claude 还引入了几项创新功能,包括项目和年度杰出的 AI 创新——Artifacts。

Claude Artifacts 是由 Anthropic 创建的高级 AI 模型 Claude 3 生成的输出。这些输出可以包括文本、图像、数据可视化,以及更复杂的输出,如交互式内容和自动报告。它们在各个行业都非常有价值,从市场营销和内容创作到数据分析。这些输出可能包括:

  • 代码片段或脚本
  • Markdown 文档
  • HTML 页面
  • SVG 图像
  • Mermaid 图表
  • React 组件

它们显示在一个独立于主聊天窗口的专用窗口中,使用户可以轻松地修改、构建、共享或混合它们。

如何使用 Artifacts?

Claude 创建的 Artifact 会出现在主聊天窗口旁边的一个专用侧窗口中。这使得用户可以轻松访问、查看、复制和操作 Artifact 的内容。

以下是使用 Artifacts 的方法:

  • 请求 Claude 对内容进行更改或改进,并在侧窗口中查看这些更新。
  • 更改不会影响 Claude 的原始内容记忆,您可以使用 Artifact 左下角的选择器查看不同版本。
  • 通过单击右上角的滑块图标可以一次打开和查看多个 Artifact,然后选择要 Claude 引用的 Artifact,并继续讨论。
  • Claude 会根据您的消息更新 Artifact,侧窗口会反映最新的内容。
  • 访问 Artifact 的代码,将内容复制到剪贴板,或下载以供以后使用。这些功能位于 Artifact 的右下角。

如何分享 Claude Artifacts?

当 Claude 创建一个 Artifact 时,它会显示在主聊天窗口右侧的专用窗口中。您可以通过以下方式分享 Artifact:

  • 导航到屏幕右侧的 Artifacts 部分中的 Artifact。
  • 找到与该特定 Artifact 版本关联的“发布”按钮。
  • 单击“发布”以将此版本的 Artifact 公开。
  • 复制提供的链接以与他人分享,以便他们查看和混合。

如何混合 Claude Artifacts?

混合功能允许用户迭代和改进任何用户创建的任何 Artifact。要混合 Artifact,请执行以下操作:

  • 查看已发布的 Artifact,然后单击“混合此 Artifact”按钮。
  • 这将使用 Artifact 的内容启动一个新的 Claude 对话。
  • 根据需要与 Artifact 交互并进行修改。

创意应用示例(提示)

  • 健身追踪器: 创建一个交互式应用程序来跟踪锻炼和健身数据。
  • 食谱轮盘应用程序: 生成一个应用程序,随机选择食谱供用户尝试。
  • 呼吸练习: 开发一个交互式工具来指导用户进行呼吸练习。
  • 禅意花园模拟器: 设计一个模拟器,允许用户创建自己的数字禅意花园。
  • 语言抽认卡: 制作抽认卡以帮助用户学习新语言。

原文

LLM

开源部署

云服务商

工具

AI Agent

  • dify.ai云平台
    • 可视化AI应用构建
    • 支持多种LLM模型接入
    • 工作流自动化
    • 提供免费套餐

AI助手

  • ChatGPT
    • GPT-3.5免费使用
    • GPT-4需订阅Plus
  • Claude
    • 支持更长上下文
    • 提供免费额度
  • Google Gemini
    • 提供免费使用额度
    • 支持多模态输入

更多

  • AI导航 - 收录更多AI工具和资源

使用建议

  1. 善用免费额度,合理分配使用场景
  2. 针对不同需求选择合适的模型
  3. 注意API调用频率限制
  4. 关注服务条款和数据安全

各种工具

我构建的各种 HTML+JavaScript 工具,几乎所有工具都是在大语言模型的帮助下完成的。

这个集合部分是一个实验,旨在探索在风险极低的项目中,仅通过提示就能完成多少工作。我使用的提示链接自每个工具的提交信息。它们中的大多数都使用了此处描述的自定义指令版本。

我本周用 Claude Artifacts 构建的所有内容描述了我是如何构建其中的许多工具的。

LLM 游乐场和调试器

其他

在 Observable 上

Observable 上:

我非常喜欢 Claude 的 Artifacts 功能,它允许你提示 Claude 创建一个交互式的单页应用(使用 HTML、CSS 和 JavaScript),然后在 Claude 界面中直接查看结果,与机器人进一步迭代,如果你喜欢,还可以复制出生成的代码。

我翻看了我的 Claude 活动导出(我构建了一个 claude-to-sqlite 工具将其转换为 SQLite,我可以在 Datasette 中探索它),并决定看看我 在过去一周 使用了多少 artifacts。比我预想的要多!

能够启动一个完整的交互式应用程序——有时作为一个说明性的原型,但通常是直接解决问题的工具——是一个非常有用的工具。

以下是我在过去七天中使用 Claude Artifacts 的大部分内容。我为几乎所有内容提供了提示或完整记录。

使用 Jina Reader 将 URL 转换为 Markdown #

我因为在使用移动版 Safari 时很难将整个网页的文本复制粘贴到 LLM 中而感到沮丧。所以我构建了一个简单的 Web UI,允许我输入 URL,调用 Jina Reader API 生成 Markdown(它在底层使用 Puppeteer),并为我提供带有方便的“复制”按钮的 Markdown。

试用一下:https://tools.simonwillison.net/jina-reader (代码)

图像 31:Jina Reader - URL 字段,在选择框中选择 Markdown,提交按钮。然后是一个显示从带有复制到剪贴板按钮的页面提取的 Markdown 的框。然后是一个显示渲染的 Markdown 预览的框架。

在这里写了更多关于该项目的内容

WASM 中的 SQLite 演示 #

关于 SQLite 的 WASM 构建的 Hacker News 对话 引导我到 NPM 上的 @sqlite.org/sqlite-wasm 包,我决定快速拼凑一个交互式演示。

图像 32:半月湾的鹈鹕目击事件 - 一个带有 select * from pelican sightings 的文本区域,一个执行查询按钮和一个显示 5 个匹配行的表格。

在这里试用:tools.simonwillison.net/sqlite-wasm

代码Claude 记录

我发现自己想提取网页上的一段文本链接的所有底层 URL。我意识到最快的方法是启动一个可以接受富文本 HTML 粘贴并使用 HTML 解析器提取这些链接的 artifact。

图像 33:提取 URL 工具。粘贴的内容。提取的 URL。显示提取的 URL 列表。

https://tools.simonwillison.net/extract-urls

代码Claude 记录

剪贴板查看器 #

摆弄一个允许你粘贴富文本的工具让我想起了浏览器剪贴板 API 是一件令人着迷的事情。我决定构建一个快速调试工具,让我可以复制和粘贴不同类型的内容(纯文本、富文本、文件、图像等),并查看浏览器中可用的信息。

图像 34:剪贴板格式查看器。在此处或页面上的任何位置粘贴。显示带有 HTML 片段的 text/html,带有某些文本的 text/plain,以及显示事件类型粘贴和可用格式 text/html 和 text/plain 的剪贴板事件信息

https://tools.simonwillison.net/clipboard-viewer

代码Claude 记录

Pyodide REPL #

我没有在这个上面花太多精力。在浏览器 DevTools 中摆弄 Claude Artifacts 时,我发现了这个 CSP 标头:

content-security-policy: default-src https://www.claudeusercontent.com; script-src 'unsafe-eval' 'unsafe-inline' https://www.claudeusercontent.com https://cdnjs.cloudflare.com https://cdn.jsdelivr.net/pyodide/; connect-src https://cdn.jsdelivr.net/pyodide/; worker-src https://www.claudeusercontent.com blob:; style-src 'unsafe-inline' https://www.claudeusercontent.com https://cdnjs.cloudflare.com https://fonts.googleapis.com; img-src blob: data: https://www.claudeusercontent.com; font-src data: https://www.claudeusercontent.com; object-src 'none'; base-uri https://www.claudeusercontent.com; form-action https://www.claudeusercontent.com; frame-ancestors https://www.claudeusercontent.com https://claude.ai https://preview.claude.ai https://claude.site https://feedback.anthropic.com; upgrade-insecure-requests; block-all-mixed-content

其中的 https://cdn.jsdelivr.net/pyodide/ 引起了我的注意,因为它表明 Anthropic 开发团队故意设置它,以便可以将 Pyodide(编译为 WebAssembly 的 Python)加载到 artifact 中。

我让 Claude 启动了一个非常快速的演示来证明这一点:

图像 35:Pyodide Python REPL - 3 + 4 返回 7。一个用于输入 python 代码的文本区域和一个运行按钮。

https://claude.site/artifacts/a3f85567-0afc-4854-b3d3-3746dd1a37f2

我还没有费心将这个提取到我自己的 tools.simonwillison.net 站点,因为它纯粹是一个概念证明,证明 Pyodide 可以在该环境中正确加载。

照片相机设置模拟器 #

我外出拍照散步,并好奇 JavaScript 是否可以提供相机设置的模拟。我没有在这个上面走太远(在海滩散步时在手机上提示)——结果有错误且令人印象不快,我很快就失去了兴趣。不过,它让我接触到了用于操作 canvas 元素的 Fabric.js 库。

图像 36:照片相机设置模拟器。已选择图像 - 但仅显示图像的角落,并带有一些有错误的损坏的调整大小句柄。底部的三个滑块显示曝光、对比度和饱和度。

https://claude.site/artifacts/e645c231-8c13-4374-bb7d-271c8dd73825

LLM 定价计算器 #

这个我 确实 完成了。我构建了这个定价计算器,作为我使用 Google Gemini 进行视频抓取 的实验的一部分,因为我不相信自己对 Gemini 有多便宜的计算!这里有关于我如何构建它的详细说明

图像 37:LLM 定价计算器界面的屏幕截图。左侧面板:用于令牌和成本的输入字段。输入令牌:11018,输出令牌:空,每百万输入令牌的成本:0.075 美元,每百万输出令牌的成本:0.3 美元。计算的总成本:0.000826 美元或 0.0826 美分。右侧面板:各种模型的预设,包括 Gemini、Claude 和 GPT 版本,以及它们各自的每 100 万个令牌的输入/输出成本。页脚:价格截至 2024 年 10 月 16 日是正确的,它们可能已更改。

https://tools.simonwillison.net/llm-prices

YAML 到 JSON 转换器 #

我想提醒自己 YAML 语法的某些方面是如何工作的,所以我启动了一个快速的 YAML 到 JSON 转换器工具,该工具在您键入 YAML 时实时显示等效的 JSON。

图像 38:YAML 到 JSON 转换器。在顶部的文本区域中是 YAML。在它下面是漂亮打印的 JSON 输出。

https://claude.site/artifacts/ffeb439c-fc95-428a-9224-434f5f968d51

Claude 记录

OpenAI 音频 #

这是我本周最有趣的 artifact。我正在探索 OpenAI 的新音频 API,并决定看看是否可以让 Claude 构建一个网页,该网页可以请求访问我的麦克风,录制一段音频,然后对其进行 base64 编码并将其发送到 OpenAI API。

这里有关于我如何构建此工具的完整详细信息

图像 39:OpenAI 音频工具的屏幕截图。可见一个开始录制按钮、一个 00:00 计时器和一个播放音频元素。有一个用于提示的文本区域和一个提交到 API 按钮。

https://tools.simonwillison.net/openai-audio

Claude Artifacts 不能直接向外部主机发出 API 请求,但它仍然可以启动足够多的工作版本,以便很容易地将其移动到不同的托管并完成工作。

我在构建一个工具,展示 Gemini Pro 如何返回图像中对象的边界框 中撰写了更多关于此 API 模式的内容。

QR 码解码器 #

本周早些时候,我参加了一个会议,其中一位参与者分享了一张带有 QR 码的幻灯片(用于加入实时调查工具)。我没有带手机,所以我需要一种将 QR 码转换为常规 URL 的方法。

图像 40:QR 码解码器 使用 Cosmo Wolfe 的 jsQR 上传、拖放或粘贴 QR 码图像:在此处选择文件或拖放 我拖动一个 QR 码,该框显示:解码内容:https://simonwillison.net/

https://tools.simonwillison.net/qr

在 Claude Artifacts 中敲定这个 QR 解码器只花了几秒钟:

构建一个 artifact(没有 react),让我可以粘贴 QR 码并显示解码后的信息,并在必要时显示超链接

[ … ]

有一个文件打开框,也可以让你拖放,并在页面上添加一个 onpaste 处理程序,以捕获粘贴的图像

完整对话在这里

图像转换器和页面下载器 #

另一个非常快速的原型。在 Hacker News 上,有人演示了一个巧妙的工具,该工具允许您将照片拖放到页面上,并将其作为 base64 URL 烘焙到页面中,这样您就可以“另存为 HTML”并获得一个包含图库的自包含页面。

建议他们可以添加 一个生成带有烘焙的新页面的“下载链接”的功能——在不允许您“另存为 HTML”的移动电话上很有用——并让 Claude 敲定一个快速原型:

图像 41:图像转换器和页面下载器 - 我已选择一个图像,并且现在该图像下方有一个下载页面链接。

在这种情况下,我在 Gist 中共享了代码,然后使用我新接触的 https://gistpreview.github.io/?GIST_ID_GOES_HERE 技巧来渲染结果:

https://gistpreview.github.io/?14a2c3ef508839f26377707dbf5dd329

事实证明,gistpreview 是将 LLM 生成的演示转换为人们可以查看的页面的非常快捷的方式。

代码Claude 记录

HTML 实体转义器 #

按需软件的另一个示例:我需要在手机上的一段文本中转义 HTML 实体,所以我让 Claude 为我构建了一个工具:

图像 42:HTML 实体转义器。在输入框中,我输入了带有双引号的文本。输出框已正确转义这些引号,并带有一个复制到剪贴板按钮。

https://claude.site/artifacts/46897436-e06e-4ccc-b8f4-3df90c47f9bc

这是我使用的提示:

构建一个 artifact(没有 react),我可以在其中将文本粘贴到文本区域中,它将返回该文本,其中所有 HTML 实体——单引号和双引号以及小于号、大于号和 & 符号——都已正确转义。输出应在文本区域中,并附带一个“复制到剪贴板”按钮,该按钮在您单击后 1.5 秒内将文本更改为“已复制!”。使其适合移动设备

Claude 记录

text-wrap-balance-nav #

Terence Eden 的启发,我决定对 text-wrap: balance CSS 属性进行快速实验。我让 Claude 为我构建了一个带有滑块和复选框的示例导航栏。我在这里写了关于它的内容

图像 43:动画演示。一个包含 13 个项目的导航菜单 - 诸如主页、关于、服务和产品之类的项目。这些项目在四行上换行,每行 4 个、4 个、4 个,然后是 1 个项目。选择启用 text-wrap: balances 复选框会将此更改为 3、4、3、3 - 滑块还可以更改可见项目的数量,以查看其效果

https://tools.simonwillison.net/text-wrap-balance-nav

ARES 语音字母转换器 #

我作为 半月湾南瓜跑 的业余无线电通信操作员做志愿者,并且担心我会弄乱使用语音字母——所以我让 Claude 构建了这个工具:

图像 44:ARES 语音字母转换器。我输入了文本“Cleo is a lobster”。单击“转换”按钮后,我得到输出“Charlie Lima Echo Oscar (Space) India Sierra (Space) Alpha (Space) Lima Oscar Sierra Tango Echo Romeo”

https://claude.site/artifacts/aaadab20-968a-4291-8ce9-6435f6d53f4c

Claude 记录在这里。有趣的是,它首先用 Python 构建了它,然后在我提醒它我想要“一个交互式 Web 应用程序”后切换到 JavaScript。

这太有用了,而且非常有趣! #

正如你所看到的,我是这个功能的 重度 用户——我刚刚描述了在一个星期内产生的 14 个项目。我从 6 月 20 日(与出色的 Claude 3.5 Sonnet 一起发布,它仍然是我的日常 LLM)开始使用 artifacts,现在我每天都会启动一个新的交互式 artifact 几次。

我正在使用 artifacts 进行闲暇的好奇心、快速原型设计、库研究和启动解决当前问题的工具。

这些工具中的大多数都花了不到五分钟的时间来构建。一些更复杂的工具花费的时间更长,但即使是 OpenAI Audio 工具,第一个版本也花费了 上午 11:55 到下午 12:07,第二个版本花费了 下午 12:18 到下午 12:27——总共 21 分钟。

请查看我的 claude-artifacts 标签,以获取更多示例,包括 SVG 到 JPG/PNGMarkdown 和 Math Live Renderer图像调整大小和质量比较

我还有一个链接到我的 tools.simonwillison.net 站点的每个帖子的仪表板,以及底层的 simonw/tools GitHub 存储库,其中包含更多未列出的工具,其中大多数工具在其提交历史记录中链接到它们的 Claude 对话记录。

我开始对它们的局限性感到有点沮丧——特别是 artifacts 无法发出 API 调用、提交表单甚至链接到其他页面的方式。我可能会最终根据我迄今为止学到的关于它们的所有知识,启动我自己的小型 artifacts 替代方案。

如果你 没有 使用 artifacts,我希望我已经让你了解了为什么它们是我目前最喜欢的基于 LLM 的工具之一。

原文

用Cursor基于Next.js开发的Windwos风格时钟,部署在vercel上,点击查看.

cursor的composer编辑功能,体验很好,基本上一路accept就行,有报错还可以将terminal中的报错添加到chat栏,让cursor解决bug
启动项目的preview后查看效果,不满意随时提出要求,cursor会根据要求修改代码,accept后项目自动重启看效果

v0.dev

v0.dev的使用体验也相当好,可以直接在浏览器中编辑代码,初始化项目后构建后还能实时预览.
v0.dev

预览

preview

阅读全文 »

主要需要修改的是 link.js 文件。

涉及到的文件

1
2
3
4
5
6
7
8
9
10
11
12
13
.
├── _config.yml
└── source
├── _data
│ └── body-end.swig
│ └── next.yml
├── css
│ └── link.css
├── js
│ └── link.js
└── links
├── index.md
└── linklist.json

步骤

建立页面

运行

1
hexo new page links

这会创建 source/links/index.md 文件。

文件示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
---
title: 友情链接
type: links
toc:
enable: false
---

<link rel="stylesheet" href="/css/link.css">

{% blockquote info %}

排名不分先后,每次刷新会随机排列。

{% endblockquote %}

<div>
<div class="links-content">
<div class="link-navigation" id="links1"></div>
</div>
</div>

------

<div style="text-align:center;">
<span class="with-love" id="animate1"><i class="fa fa-heart"></i></span>
留言互换友链 o ((>ω<)) o
<span class="with-love" id="animate2"><i class="fa fa-heart"></i></span>
</div>

------

{% blockquote success %}

## 友链格式

- 名称:编程笔记
- 网址:[https://programnotes.cn](https://programnotes.cn)
- 头像:[https://programnotes.cn/Image/logo.png](https://programnotes.cn/Image/logo.png)

{% endblockquote %}

注意在 Front-Matter 里一定要有 type: links。这里我还关闭了侧边栏的目录。

存储数据

所有友链的数据都放在 source/links/linklist.json 里,其格式为:

1
2
3
4
5
6
7
[
{
"name": "",
"site": "",
"avatar": ""
}
]

其中 name 为网站的名字,site 为网址,avatar 为头像。

头像可以使用 Gravatar,这样可以保证始终可用的。

渲染页面

在 source/_data/body-end.swig 中,引入 link.js:

1
2
3
{% if page.type === 'links' %}
{{- next_js('link.js', true) }}
{% endif %}

其中 source/js/link.js 的内容为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 随机排列
function shuffle(arr) {
let i = arr.length;
while (i) {
let j = Math.floor(Math.random() * i--);
[arr[j], arr[i]] = [arr[i], arr[j]];
}
}

// 渲染数据
function renderlink(data) {
var name, avatar, site, li = "";
shuffle(data);
for (var i = 0; i < data.length; i++) {
name = data[i].name;
avatar = data[i].avatar;
site = data[i].site;
li += '<div class="card">' + '<a href="' + site + '" target="_blank">' + '<div class="thumb" style="background: url( ' + avatar + ');">' + '</div>' + '</a>' + '<div class="card-header">' + '<div><a href="' + site + '" target="_blank">' + name + '</a></div>' + '</div>' + '</div>';
}
document.querySelector(".link-navigation").innerHTML = li;
}

// 获取 json 文件
fetch('/links/linklist.json')
.then(response => response.json())
.then(res => renderlink(res));

创建样式

创建 source/css/link.css,其内容为(这个文件完全来自于网络):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
.links-content {
margin-top: 1rem
}

.link-navigation::after {
content: " ";
display: block;
clear: both
}

.card {
width: 130px;
font-size: 1rem;
padding: 0;
border-radius: 4px;
transition-duration: .15s;
margin-bottom: 1rem;
display: block;
float: left;
box-shadow: 0 2px 6px 0 rgba(0,0,0,.12);
background: #f5f5f5
}

.card {
margin-left: 16px
}

@media(max-width:567px) {
.card {
margin-left: 16px;
width: calc((100% - 16px)/2)
}

.card:nth-child(2n+1) {
margin-left: 0
}

.card:not(:nth-child(2n+1)) {
margin-left: 16px
}
}

@media(min-width:567px) {
.card {
margin-left: 16px;
width: calc((100% - 32px)/3)
}

.card:nth-child(3n+1) {
margin-left: 0
}

.card:not(:nth-child(3n+1)) {
margin-left: 16px
}
}

@media(min-width:768px) {
.card {
margin-left: 16px;
width: calc((100% - 48px)/4)
}

.card:nth-child(4n+1) {
margin-left: 0
}

.card:not(:nth-child(4n+1)) {
margin-left: 16px
}
}

@media(min-width:1200px) {
.card {
margin-left: 16px;
width: calc((100% - 64px)/5)
}

.card:nth-child(5n+1) {
margin-left: 0
}

.card:not(:nth-child(5n+1)) {
margin-left: 16px
}
}

.card:hover {
transform: scale(1.1);
box-shadow: 0 2px 6px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)
}

.card .thumb {
width: 100%;
height: 0;
padding-bottom: 100%;
background-size: 100% 100%!important
}

.posts-expand .post-body img {
margin: 0;
padding: 0;
border: 0
}

.card .card-header {
display: block;
text-align: center;
padding: 1rem .25rem;
font-weight: 500;
color: #333;
white-space: normal
}

.card .card-header a {
font-style: normal;
color: #2bbc8a;
font-weight: 700;
text-decoration: none;
border: 0
}

.card .card-header a:hover {
color: #d480aa;
text-decoration: none;
border: 0
}

添加侧栏

在主题的配置文件(目前默认为 _config.next.yml)中,添加

1
2
3
4
5
6
7
menu:
home: / || fa fa-home
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
# 要添加的
links: /links/ || fa fa-link

主题配置

source/_data/next.yml

1
2
3
4
5
6
7
8
9
10
11
12
custom_file_path:
head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
# 将下面这行解除注释,启用body-end.swig
bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
#style: source/_data/styles.styl

效果

参考: