zhangyiss/FTXUI
1
0
Fork 0
mirror of https://github.com/ArthurSonzogni/FTXUI.git synced 2025-12-16 01:48:56 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
02764cd443be15005858fb10df020f4f1f770d66
FTXUI/zh-TW/installation_conan.html
ArthurSonzogni 02764cd443 deploy: 9f4b2bcf96
2025-12-13 19:38:34 +00:00

406 lines
19 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- HTML header for doxygen 1.9.8-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<meta name="generator" content="Doxygen 1.12.0"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>FTXUI: Conan</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<script type="text/javascript" src="doxygen-awesome-fragment-copy-button.js"></script>
<script type="text/javascript" src="doxygen-awesome-paragraph-link.js"></script>
<script type="text/javascript" src="doxygen-awesome-interactive-toc.js"></script>
<script type="text/javascript" src="doxygen-awesome-tabs.js"></script>
<script type="module">
DoxygenAwesomeFragmentCopyButton.init()
DoxygenAwesomeParagraphLink.init()
DoxygenAwesomeInteractiveToc.init()
DoxygenAwesomeTabs.init()
await new Promise(r => window.addEventListener('DOMContentLoaded', r));
// Remove title when a img[alt='title-img'] is present.
// Find an image with the alt "img-title".
const img = document.querySelector("img[alt='title-img']");
const header = document.querySelector(".headertitle");
if (img && header) {
// Hide the header title progressively.
header.style.display = "none";
// Show progressively the image.
img.style.maxHeight = "40vh";
img.style.maxWidth = "100%";
img.style.objectFit = "contain";
}
// In the "examples.html" page. Turn every link with text
// "examples/<...>
//
// Add a "demo" link toward.
// https://arthursonzogni.github.io/FTXUI/examples/?file=<...>
const examples = document.querySelectorAll("a")
examples.forEach((example) => {
if (!example.textContent.startsWith("examples/")) {
return;
}
// Remove the ".cpp" extension from the example name.
const exampleName = example.textContent.replace("examples/", "").replace(".cpp", "");
const a = document.createElement("a");
a.textContent = "[demo]";
a.href = "https://arthursonzogni.github.io/FTXUI/examples/?file=" + exampleName;
a.style.marginRight= "1em";
a.style.fontWeight = "bold";
example.parentElement.insertBefore(a, example)
});
// If the current URL ends with -example.html, we can add a link to the demo
// as well using the div.title textContent.
const url = new URL(window.location.href);
if (url.pathname.endsWith("-example.html")) {
// Get the title text.
const title = document.querySelector("div.title").textContent;
const example = title.replace("examples/", "").replace(".cpp", "");
// Create a link to the demo.
const a = document.createElement("a");
a.textContent = "[demo]";
a.href = "https://arthursonzogni.github.io/FTXUI/examples/?file=" + example;
a.style.marginLeft = "1em";
a.style.fontWeight = "bold";
a.style.display = "inline-block";
// Insert the link after the title.
const titleDiv = document.querySelector("div.title");
if (titleDiv) {
titleDiv.insertBefore(a, titleDiv.nextSibling);
}
}
</script>
<script type="module">
// Click on the navtree, except for the main page where this is already done
// automatically.
let delay = 0;
while(true) {
const navtree = document.querySelector("div.item.selected");
if (!navtree) {
delay *= 2;
delay += 1;
await new Promise(resolve => setTimeout(resolve, delay));
continue;
}
// Include only selected navtree items.
console.log("navtree.textContent", navtree.textContent);
if (!navtree.textContent.includes("Getting Started") &&
!navtree.textContent.includes("Installation") &&
!navtree.textContent.includes("ftxui / screen") &&
!navtree.textContent.includes("ftxui / dom") &&
!navtree.textContent.includes("ftxui / component") &&
!navtree.textContent.includes("Reference")) {
break;
}
// Find the first link inside the navtree.
const link = navtree.querySelector("a");
if (link) {
// Simulate a click on the link.
link.click();
break;
}
}
</script>
<link href="navtree.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="navtreedata.js"></script>
<script type="text/javascript" src="navtree.js"></script>
<script type="text/javascript" src="resize.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<link href="search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="search/searchdata.js"></script>
<script type="text/javascript" src="search/search.js"></script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
<link href="doxygen-awesome.css" rel="stylesheet" type="text/css"/>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr id="projectrow">
<td id="projectalign">
<div id="projectname">FTXUI<span id="projectnumber">&#160;6.1.9</span>
</div>
<div id="projectbrief">C++ functional terminal UI.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.12.0 -->
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
var searchBox = new SearchBox("searchBox", "search/",'.html');
/* @license-end */
</script>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(function() { codefold.init(0); });
/* @license-end */
</script>
<script type="text/javascript" src="menudata.js"></script>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(function() {
initMenu('',true,false,'search.php','Search',true);
$(function() { init_search(); });
});
/* @license-end */
</script>
<div id="main-nav"></div>
</div><!-- top -->
<div id="side-nav" class="ui-resizable side-nav-resizable">
<div id="nav-tree">
<div id="nav-tree-contents">
<div id="nav-sync" class="sync"></div>
</div>
</div>
<div id="splitbar" style="-moz-user-select:none;"
class="ui-resizable-handle">
</div>
</div>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(function(){initNavTree('installation_conan.html',''); initResizable(true); });
/* @license-end */
</script>
<div id="doc-content">
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
onmouseover="return searchBox.OnSearchSelectShow()"
onmouseout="return searchBox.OnSearchSelectHide()"
onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>
<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<div id="MSearchResults">
<div class="SRPage">
<div id="SRIndex">
<div id="SRResults"></div>
<div class="SRStatus" id="Loading">Loading...</div>
<div class="SRStatus" id="Searching">Searching...</div>
<div class="SRStatus" id="NoMatches">No Matches</div>
</div>
</div>
</div>
</div>
<div><div class="header">
<div class="headertitle"><div class="title">Conan</div></div>
</div><!--header-->
<div class="contents">
<div class="toc"><h3>Table of Contents</h3>
<ul>
<li class="level1 empty">
<ul>
<li class="level2">
<a href="#先決條件">先決條件</a>
</li>
<li class="level2">
<a href="#配置">配置</a>
</li>
<li class="level2">
<a href="#安裝依賴項並建置">安裝依賴項並建置</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="textblock"><p>FTXUI 可以使用 Conan 套件管理器輕鬆取得並整合到您的專案中。</p>
<h2><a class="anchor" id="先決條件"></a>
先決條件</h2>
<p>首先，請確保您的系統已安裝 Conan。如果沒有，可以透過 pip 安裝：</p>
<div class="fragment"><div class="line">pip install conan</div>
</div><!-- fragment --><p> Conan 通常與 CMake 協同工作，因此您也需要安裝 CMake。確認 Conan 和 CMake 都已安裝後，建立一個專案目錄，例如 <code>ftxui-demo</code>：</p>
<div class="fragment"><div class="line">mkdir C:\ftxui-demo</div>
<div class="line">cd C:\ftxui-demo</div>
</div><!-- fragment --><h2><a class="anchor" id="配置"></a>
配置</h2>
<p>確保環境設定正確後，建立一個 Conan 配置檔 <code>conanfile.txt</code>。此檔案用於宣告您的專案依賴項。FTXUI 的社群維護套件可在 <a href="https://conan.io/center/recipes/ftxui">Conan Center</a> 上找到。</p>
<dl class="section note"><dt>Note</dt><dd>這是一個非官方的建置腳本。這表示它不是由 FTXUI 團隊維護，而是由社群維護。套件維護者似乎會積極更新它 到最新版本。非常感謝維護者的工作！</dd></dl>
<dl class="todo"><dt><b><a class="el" href="todo.html#_todo000001">Todo</a></b></dt><dd>If you are familiar with the process, please consider adding an "official" build script to Conan Center. This could be a GitHub Action that automatically updates Conan Center upon new releases.</dd></dl>
<div class="fragment"><div class="line">[requires]</div>
<div class="line">ftxui/6.0.2</div>
<div class="line"> </div>
<div class="line">[generators]</div>
<div class="line">CMakeDeps</div>
<div class="line">CMakeToolchain</div>
<div class="line"> </div>
<div class="line">[layout]</div>
<div class="line">cmake_layout</div>
</div><!-- fragment --><h2><a class="anchor" id="安裝依賴項並建置"></a>
安裝依賴項並建置</h2>
<p>配置完成後，執行以下命令來安裝 FTXUI 及其依賴項：</p>
<div class="fragment"><div class="line">conan install . --output-folder=build --build=missing</div>
</div><!-- fragment --><p>這將從 Conan 的遠端儲存庫下載並安裝 <code>ftxui/6.0.2</code> 及其所有依賴項。</p>
<p>安裝完成後，您可以透過在專案目錄中建立 <code>demo.cpp</code> 檔案來進行測試：</p>
<div class="fragment"><div class="line"><span class="preprocessor">#include &lt;<a class="code" href="screen_8hpp.html">ftxui/screen/screen.hpp</a>&gt;</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span></div>
<div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span></div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> <span class="keyword">auto</span> document = hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot; Hello &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;FTXUI &quot;</span>) | bold | color(Color::Red),</div>
<div class="line"> text(<span class="stringliteral">&quot; world! &quot;</span>)</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> std::cout &lt;&lt; screen.ToString() &lt;&lt; std::endl;</div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
<div class="ttc" id="aelements_8hpp_html"><div class="ttname"><a href="elements_8hpp.html">elements.hpp</a></div></div>
<div class="ttc" id="aexamples_2component_2button_8cpp_html_ae66f6b31b5ad750f1fe042a706a4e3d4"><div class="ttname"><a href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a></div><div class="ttdeci">int main()</div><div class="ttdef"><b>Definition</b> <a href="examples_2component_2button_8cpp_source.html#l00030">examples/component/button.cpp:30</a></div></div>
<div class="ttc" id="agroup__dom_html_gad4b8aa9392f56ba41e2b421e046a7d83"><div class="ttname"><a href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a></div><div class="ttdeci">void Render(Screen &amp;screen, const Element &amp;element)</div><div class="ttdoc">在 ftxui::Screen 上顯示元素。</div><div class="ttdef"><b>Definition</b> <a href="node_8cpp_source.html#l00082">node.cpp:82</a></div></div>
<div class="ttc" id="anamespaceftxui_html"><div class="ttname"><a href="namespaceftxui.html">ftxui</a></div><div class="ttdoc">FTXUI 的 ftxui:: 命名空間</div><div class="ttdef"><b>Definition</b> <a href="animation_8hpp_source.html#l00010">animation.hpp:10</a></div></div>
<div class="ttc" id="ascreen_8hpp_html"><div class="ttname"><a href="screen_8hpp.html">screen.hpp</a></div></div>
</div><!-- fragment --><p>如果測試成功，您就可以在專案目錄中建立 <code>CMakeLists.txt</code> 檔案：</p>
<div class="fragment"><div class="line">cmake_minimum_required(VERSION 3.20)</div>
<div class="line">project(ftxui-demo)</div>
<div class="line"> </div>
<div class="line"># Set the C++ standard</div>
<div class="line">set(CMAKE_CXX_STANDARD 20)</div>
<div class="line"> </div>
<div class="line"># Find the FTXUI package installed via Conan</div>
<div class="line">find_package(ftxui CONFIG REQUIRED)</div>
<div class="line"> </div>
<div class="line"># Create the executable</div>
<div class="line">add_executable(demo demo.cpp)</div>
<div class="line"> </div>
<div class="line"># Link the executable to the FTXUI library</div>
<div class="line">target_link_libraries(demo PRIVATE ftxui::component)</div>
</div><!-- fragment --><dl class="todo"><dt><b><a class="el" href="todo.html#_todo000002">Todo</a></b></dt><dd>考慮到中國多數地區使用Conan很有可能遇到各種網絡問題，我想做一個定制的版本說明，但是我對conan的了解有限再加上沒有找到合適的資料，因此這個計劃短暫的被擱置了，如果您知道方法，歡迎在<a href="xiaoditx.girhub.io/public/docs/ftxui%E4%B8%AD%E6%96%87%E7%BF%BB%E8%AF%91/installation/conan/">中文版本</a>的下方留下評論以提醒我</dd></dl>
<hr />
<div class="section_buttons"></div><div class="section_buttons"><table class="markdownTable">
<tr class="markdownTableHead">
<th class="markdownTableHeadLeft">上一個 </th></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyLeft"><a href="getting-started.html">入門</a> </td></tr>
</table>
</div><div class="section_buttons"></div> </div></div><!-- contents -->
</div><!-- PageDoc -->
</div><!-- doc-content -->
<!-- HTML footer for doxygen 1.9.8-->
<!-- start footer part -->
<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const projectNumber = document.getElementById('projectname');
if (!projectNumber) {
console.warn('Doxygen element with ID "projectnumber" not found. Cannot add version switcher.');
return;
}
const langs = ["en", "es", "fr", "ja", "zh-CH", "zh-TW"];
const lang_paths = {"en": "../index.html", "es": "../es/index.html", "fr": "../fr/index.html", "ja": "../ja/index.html", "zh-CH": "../zh-CH/index.html", "zh-TW": "index.html"};
const lang_display = {"en": "English", "es": "Espa\u00f1ol", "fr": "Fran\u00e7ais", "ja": "\u65e5\u672c\u8a9e", "zh-CH": "\u4e2d\u6587 (\u7b80\u4f53)", "zh-TW": "\u4e2d\u6587 (\u7e41\u9ad4)"};
const versions = ["main"];
const version_paths = {"main": "index.html"};
const currentLang = "zh-TW";
const currentVersion = "main";
// Helper function to create a styled select element
const createSelect = (options, current, paths, label, displayMap = null) => {
const select = document.createElement('select');
select.title = label;
select.onchange = function() {
const selectedValue = this.value;
if (selectedValue in paths) {
window.location.href = paths[selectedValue];
}
};
// Sort versions: 'main' first, then others numerically descending.
options.sort((a, b) => {
if (a === 'main') return -1;
if (b === 'main') return 1;
return b.localeCompare(a, undefined, { numeric: true, sensitivity: 'base' });
});
options.forEach(v => {
const option = document.createElement('option');
option.value = v;
// Use the displayMap if provided, otherwise default to the value (v)
option.textContent = displayMap ? displayMap[v] : v;
if (v === current) {
option.selected = true;
}
select.appendChild(option);
});
// Apply some styling to make it look good.
Object.assign(select.style, {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
color: 'white',
border: '1px solid rgba(255, 255, 255, 0.2)',
padding: '5px',
borderRadius: '5px',
fontSize: '14px',
fontFamily: 'inherit',
margin: '0 5px 0 0',
cursor: 'pointer'
});
return select;
};
// 1. Create Language Switcher, passing the language display names map
const langSelect = createSelect(langs, currentLang, lang_paths, 'Select Language', lang_display);
// 2. Create Version Switcher
const versionSelect = createSelect(versions, currentVersion, version_paths, 'Select Version');
// 3. Create FTXUI title.
const ftxuiTitle = document.createElement('span');
ftxuiTitle.textContent = 'FTXUI: ';
Object.assign(ftxuiTitle.style, {
color: 'white',
fontSize: '20px',
fontWeight: 'bold',
marginRight: '10px'
});
// 3. Create a container to hold both selectors
const container = document.createElement('div');
container.id = 'version-lang-switchers';
Object.assign(container.style, {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
width: 'auto'
});
container.appendChild(ftxuiTitle);
container.appendChild(langSelect);
container.appendChild(versionSelect);
Object.assign(container.style, {
backgroundColor: 'rgba(0, 0, 0, 0.5)',
padding: '5px 10px',
borderRadius: '8px'
});
// Replace the Doxygen project number element with our container.
projectNumber.replaceWith(container);
// Clean up the original Doxygen project number text if it still exists nearby
const parent = container.parentElement;
if (parent) {
const textNode = Array.from(parent.childNodes).find(n => n.nodeType === 3 && n.textContent.trim() !== '');
if (textNode) {
textNode.remove();
}
}
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink