|
|
* X7 E& t7 J/ r
可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:
0 q+ x7 ?# b# j, J3 W; B# w8 |# C X) i! E U! d0 d8 z. V. R) n
1.下载主题文件. X( Z) _# d8 ^& J
w5 O/ K+ k! j( d/ I2 h
在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。
) @' G( W6 L8 G+ O6 W7 G5 }" _; j, E$ K3 M. m: z/ \& U! W, w* u
2.创建 Typecho 主题目录6 H4 o. w Q6 a# @# P1 u
7 h7 i7 `3 [ E- H' T* o7 v2 D. ?在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。
& D- T& A5 d, Z: A# E6 P2 T) u, H# o( N+ ^6 S) C9 B! ^
3.解压主题文件
! Q: b2 Y0 Z4 X; e5 z$ L; [2 V) l- d1 A
将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:3 j! X3 B! @4 Z" j1 U& D
: P- C) ^" I) X' K
assets/6 ]. R9 B; g3 N, e' B- h
dist/6 p3 }. r" x: O4 j' V
inc/
; d# J0 O9 I$ V& enode_modules/7 |2 t4 N) N8 [* `6 T8 B, a
partials/
3 a. h1 F0 t8 u$ d+ x/ @templates/
( k: i) H- I( S, I# G' J.babelrc; M* N& e! w) O. ]* X( V
.eslintrc.js
+ `; q1 v- {# I- A2 Hgulpfile.js
2 D8 ~6 |# F/ {! k& bpackage.json' }; h7 {( A. W3 `' b* u* D
webpack.config.js0 T& I5 H* k7 D0 z" V
4.修改主题样式表文件, g0 N2 G9 Q! ~
M: A2 L2 e1 s3 O
修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:# m2 v; {5 ?7 W# R: _5 U
0 ^6 P! \# h8 Z9 |$ D: i+ Ocss
1 N5 P$ n) _0 G1 U& J; obackground-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');
; I7 o7 n" E: M; P修改为:- T i; l8 W3 U- ]
- H, G$ P1 b( O$ j8 m7 `0 t
css6 I7 c' e9 i* T/ l2 o4 ^" z
background-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');9 v7 O6 i0 D$ h) O# N" t% u
5.创建 Typecho 主题配置文件
+ B: D! O& Y3 a3 x, J9 W0 [. T2 b4 V# l
在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:* a% N6 |. O% }4 m) j: b6 a
1 _8 _7 |# e |. I* O. Dphp" ]! K! T$ g/ `
<?php
/ h. ]5 E6 [# a0 ~return array(8 w- s, m8 y4 s: ]. @
'name' => 'Heropress Pro',
: R, w3 d- {9 u5 [- A- \ 'description' => 'Typecho adaptation of Heropress Pro theme',! Q5 @! e3 B! s; \
'version' => '1.0',- ?( \+ @; A5 k: k1 R
'author' =>'Your Name',) C, K9 Y& O+ \; N6 E" ?, |/ f+ h
);( D- p# c5 Z5 E+ ~0 i
6.配置主题布局文件
' v2 I L f6 |, R- J) R
+ |; H0 w- j/ {# m4 O+ k在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码: V+ e ~' v y4 \/ v
- G: ]3 m+ ^2 `8 x. wphp8 A, R$ ^6 u" P8 C$ v% o* ?
<?php while ($this->next()): ?>. u% v; l7 Z$ g2 `: j& S
<div class="post">
! F; a6 X5 B( p6 j$ E( y m <h2 class="post-title">
# W$ w& g$ P. ` <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
+ k* g1 b, v4 v3 {/ L+ ~ </h2>
, H0 f: Z" u( D; |# e" [ <div class="post-meta">% a3 D1 L1 R: I5 W! p- J
<span><?php $this->date('F j, Y'); ?></span>( k! |/ t- W9 }1 ^$ k0 g9 c
<?php if($this->tags): ?>( m( L) G$ U+ N8 u1 \% d4 q
<span class="post-tags">& k% ^9 D1 S6 F) _( w
<?php $this->tags(', ', true, 'none'); ?>
6 X6 B: H) G4 q! |4 T </span>
( x0 U; ], T8 M2 r <?php endif; ?>
g, j, I& @2 P0 L e% p </div>
1 a$ q. B. t7 v, ? <div class="post-content">. H7 u/ W" k2 o2 L
<?php $this->content('Read more »'); ?># r; H; |, Q9 H( e3 B5 Q1 ]
</div>8 ~3 l5 _! }/ C p! C- P" o! ^
</div># u# Y/ g5 U, @0 i
<?php endwhile; ?>3 C$ |% k* Q z. b8 |
7.调用 Typecho 函数) ^& ~. n" t: a+ F. \1 A: |- B6 |
# e( F7 j# w7 h! q# E在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:; W/ y' E. `% U2 ^2 L; v5 @
6 \9 L1 W( |! t1 o7 N0 T/ n/ l3 w3 ?
用 the_title() 替换 get_the_title()。
7 ^0 N! X4 v6 G
: @9 D: e9 L' C4 B T' r @用 the_permalink() 替换 get_permalink()。/ J! c0 r9 i1 W6 E8 o9 ^0 f$ R
$ H6 d+ J9 l2 O& U/ F
用 $this->date('F j, Y'); 替换 the_time('F j, Y')。
' X* \- y& U+ \% f
) {* n. |; A; J; Q; k用 $this->content('Read more »'); 替换 the_content('Read more »')。" h( S6 D! I3 T
& `9 r* p5 V1 _4 O p9 w/ W; r
8.添加 Typecho 标记, a4 C0 ~, X5 x
' X9 n% [# l7 O! i: T$ S. `
在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:) I6 `3 J. d g9 Y+ I- a4 t
1 |/ ~+ \* L2 v2 o
php, n" x3 q: K: Q5 ?& l
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>' d v' z& N' s+ _: G' B5 K0 b3 R7 h8 R
<?php $this->need('header.php'); ?>
; p7 K( k$ X, a4 e4 m7 P" Q$ w<div id="main" class="container">
8 b6 J# N8 a/ [. L/ I' ?( ?6 c <div id="content" class="row">8 h+ W4 U, b) f# T Z; u/ B4 j, N1 _
<?php while ($this->next()): ?>' Z/ e4 o0 S4 D. S
<div class="col-md-8 col-md-offset-2">5 {% ^0 \) [! u. M, J4 h
<div class="post">- A; B# H9 t+ D- }! A7 S) T) c) w
<h2 class="post-title">0 G9 V% _9 B4 s2 l
<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>5 ?$ k6 ^8 z& z% `/ f
</h2>' i4 q2 J! {* ]3 h( w
<div class="post-meta">7 x: d4 J+ ?; R: g
<span><?php $this->date('F j, Y'); ?></span>* _; y) T# j. z7 V) p% O
<?php if($this->tags): ?>
$ |. b: m" a+ B' C1 r <span class="post-tags">
7 F! n& C, I" v: u <?php $this->tags(', ', true, 'none'); ?>
5 Z3 p' b. M4 F' Q </span>/ r) n$ _7 H0 _1 o3 Q' k; L3 ?, H
<?php endif; ?>3 u. q# w- |) j
</div>1 m7 n' p$ t7 U; q& H3 s/ c
<div class="post-content">
% Q' d- E. M5 P5 F! J <?php $this->content('Read more »'); ?>2 o0 e" o, k8 G$ N
</div>" Z' v+ b8 D8 `5 k5 \' N \7 e W8 c
</div>
9 y- j% w% J4 Q/ w2 T" z) P, l/ h0 q </div>& V, G1 E' N8 L+ R3 A
<?php endwhile; ?>" t1 B, V0 T7 L& g0 B& @
</div>5 T1 B! a6 ^9 [( ]2 v$ h
</div>
% t! R) h5 X6 i% z# e<?php $this->need('footer.php'); ?>6 U3 @1 d# T, g/ p/ X3 y
9.调整其他可能需要的文件和代码
Z V4 J d' O
) ^5 G$ Y1 V9 ]7 {9 U根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:
1 [$ M1 Q# q/ q7 H
- F8 [8 A: i+ M) q$ r, {html9 p- V9 H8 @! y
<title><?php $this->archiveTitle(array(
& }. b" W* d% G! n- {) P0 v 'category' => _t('%s'),
. ~3 u; ^: }- E6 @/ E 'search' => _t('Search "%s"'),$ b+ [+ C, R# L/ X) y/ w5 j
'tag' => _t('Tag "%s"'),
2 u" L) D" j3 F% {1 Y* ]5 |$ n) ^& X 'author' => _t('Author "%s"'),8 a2 z- \0 _) J2 @1 Q8 a& I N; ?; J
'date' => _t('Archive "%s"'),
7 L6 E2 W+ B# v* w 'default' => ''8 Z5 v- T6 u& b5 Y6 F8 K
), '', ' - '); ?><?php $this->options->title(); ?>
9 @4 b- Z) R* u& n7 b b3 w8 B! V</title>
) i( r) U/ c0 y& J6 T10.使用主题
! h' X n0 }7 j
& m' D5 `" Y s登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。
8 h$ ]+ Y! i. d" n5 _7 i4 q# P' k! u1 p6 x
以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。3 q8 D. z1 c5 u7 `8 \# B
: ?! i+ N% b1 f! P |
|