|
|
; ]$ n8 g5 E" o& V) j/ \
可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程: V: |( O2 B) C' k% s) P ^& I
, c ~# ]2 d( x* {+ y
1.下载主题文件# r F8 D9 d/ g
$ V3 e2 [9 `5 B: I6 e在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。 a% Y. q3 I% H+ P
9 |) N+ _2 Y3 r9 v/ `2.创建 Typecho 主题目录
/ s$ d( ?, P0 V
" R! f" A* X7 `( [. M7 w, k6 |在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。. q% L3 p% A: h0 F3 K" l! R
$ [# {* p3 ~9 C! n5 N) L+ g3.解压主题文件) t) @/ c; O( p1 B/ ]7 ?
0 q) s9 q( X4 A/ a# t
将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:
* @, o5 G& ?2 }- W, L
9 L6 z! `' m/ D, d9 e: d+ ]assets/$ u5 N3 }" a: x0 ~" p
dist/
5 Y! \3 j/ B1 ]: e' t2 Einc/
7 k0 v; x8 ], q3 F! `node_modules/
4 Z2 \, K" _& |3 P1 tpartials/
* Q3 f0 G4 z C0 K1 I# I. [2 itemplates/: ?' L8 Z# Y4 q) i4 r! ]: O
.babelrc
' W# _- x5 Z* w# C7 ^$ _0 A.eslintrc.js+ Q+ v4 m, L# ]" G! N$ ^ z
gulpfile.js
) {; J, s4 ~1 b2 q Apackage.json
, w% T. e7 H* t. pwebpack.config.js) S I: n4 l. o
4.修改主题样式表文件
3 l: C2 Q$ \, F' B4 N
{% j! Y0 K% @ h5 [9 u修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:' F5 `' o# k" R4 b
& ]9 O! ]& r% lcss
8 k$ c0 b, d0 m5 x1 e q$ p! Wbackground-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');9 g4 Q( J2 X8 D: I( f s' z5 X
修改为:; G' n0 Q6 Y. e2 o8 M& F
" N q+ h* X3 d6 ucss; T4 n ]7 P8 T* e9 C2 e
background-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');
, B7 a7 e: i, c! L' e$ A5 w5.创建 Typecho 主题配置文件# i( k) }( R* a) y* {2 v
- Y# y4 H- a9 y+ K% e5 v+ {, n
在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:: O" P* e% I: Q {
4 W) J& ]! Y9 b. P1 Xphp9 H1 V9 C& y; P! w; ^
<?php$ F9 K/ C5 U4 e8 e, \ p9 O5 d
return array(0 q( q. ?/ F* X9 o- n" M
'name' => 'Heropress Pro',! X" i, ^7 A! X" Q* F
'description' => 'Typecho adaptation of Heropress Pro theme',
1 h8 n G" G ~9 j 'version' => '1.0',
% |" j0 n S$ O 'author' =>'Your Name',' x+ r ]. @! p: L3 P0 L8 Q; H7 d
);
7 \# d2 \9 S8 R4 S! `0 ^5 @6.配置主题布局文件
" S* S+ s, o* R5 h% m+ Y, {5 ^# E y+ A( X9 X' O
在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:( n+ \. r# P) [' Z9 n2 N; X3 u
" C5 `, z! N- I! y4 b. rphp
0 J# e* O: E; J<?php while ($this->next()): ?>1 H# q4 c; X5 y; W
<div class="post">- G( @, {3 i9 l( k
<h2 class="post-title">! d$ ~6 |$ P7 d( j, ?
<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>3 ~6 Y! e6 E8 [0 e6 P, B7 V
</h2>
, V L$ K0 e9 J6 q <div class="post-meta">
* @% T; ?4 [" L& U) A' A) L <span><?php $this->date('F j, Y'); ?></span>
0 K6 J$ x4 {2 @' _ <?php if($this->tags): ?>
& e; J$ h& U) k2 f D4 o( o& p) e <span class="post-tags">
" j! p4 X* y8 ^" A* J <?php $this->tags(', ', true, 'none'); ?>
i* M/ k$ P6 p" O </span>
1 v2 B4 x' @5 }9 r) C. m7 q <?php endif; ?>
+ V0 k/ y3 `: P( T# j; t </div>4 i; @, V7 P8 a4 W
<div class="post-content">
. r7 e9 ?- w- ]* h1 z1 d9 j! `3 T1 L <?php $this->content('Read more »'); ?>
9 B- b3 W+ S' E+ D </div>
' p1 G; w9 e8 d0 t) u4 O</div>
! t8 ]% e( X% I4 D" U& @<?php endwhile; ?>, n d2 ]5 ~$ ~: X
7.调用 Typecho 函数8 P$ o5 h7 k% |0 q6 F
) r- F! t: m K; c3 }在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:
) D2 c- i; x0 l; V4 R% t, Q- f6 q; T3 _8 Y: i' t3 e9 w- ?: x( k
用 the_title() 替换 get_the_title()。5 h' p7 E2 C! w! w! ~" g! J5 U
! _6 \8 S& E Z i; ~" G* `
用 the_permalink() 替换 get_permalink()。; d3 i6 I( x/ C! @6 E
8 B' E/ y% y# k1 M6 g" |5 F$ r7 ^用 $this->date('F j, Y'); 替换 the_time('F j, Y')。6 ]% Z- V% R: H3 s% T# ~
$ K& {7 G3 Z* U. x用 $this->content('Read more »'); 替换 the_content('Read more »')。
0 \, h6 V4 C. u$ O4 F8 f
! r3 t8 N9 V" N+ B8.添加 Typecho 标记
8 O* p9 w& L0 Y' d4 I
* G* ~5 Q+ x& c( b在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:
0 O5 p: g# K. ^7 [ R
' R* p* V. Z) }/ T2 t/ aphp; l& F1 V5 [! Z W1 J! u; P# E& w
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
% ^; Y; X9 f2 s% m- G; I+ O<?php $this->need('header.php'); ?>
/ P8 k0 Y- X3 \, X0 b% \& C) `" S<div id="main" class="container">
O4 q0 \" [/ Q2 A! @ <div id="content" class="row">
- K; M, G: h5 T( Q- z2 C6 W7 e! j <?php while ($this->next()): ?> ]$ ]4 A' F2 l( S% v+ |! J5 B# {
<div class="col-md-8 col-md-offset-2"> r- x, G$ x; }# `2 v1 d+ k, P
<div class="post">
9 y# b0 d: g2 P$ I/ h <h2 class="post-title">
! f# Z9 I$ B! M9 m! s$ [ <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
) R1 b. ~4 j6 ~6 f5 O$ Y </h2>2 H5 S% ?. r& {0 y) ?7 a
<div class="post-meta">2 i- G' N9 ^$ r; m
<span><?php $this->date('F j, Y'); ?></span>7 e1 I' ~" E( {
<?php if($this->tags): ?>
2 J- o; R, ]" e2 h <span class="post-tags">
) M9 y5 }# ^ u# N <?php $this->tags(', ', true, 'none'); ?>
+ A% R' q/ W2 A6 z7 x) {! m4 s! ? </span>
% {( g2 g8 w6 Z4 X <?php endif; ?>
`9 U I* a3 l; _7 t- W1 U0 Q </div>9 D$ z% H' j8 L# C
<div class="post-content">
/ Y# G! U% M/ }: f. a <?php $this->content('Read more »'); ?>, y- m) `, n3 k+ t1 T) Y( G
</div>& j) l1 g: ^: f
</div>
* Z5 t, r- h, H: o' p </div>" J+ ]; ?; k4 t! F: F' ^6 D/ x
<?php endwhile; ?>
8 l) \+ P' R4 L% C2 b# j </div> v5 I( L4 I, q& y0 w4 g
</div>
! |5 f. t: o, o# N- u7 L<?php $this->need('footer.php'); ?>
' v" ^# ]0 S5 _, x) ^3 d9.调整其他可能需要的文件和代码
8 [* j) Y6 }: W5 c. S
$ M0 I# ]1 X/ j$ I3 @% A根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:7 s3 U9 b( n0 i- b5 U
# a3 k6 g1 d4 J; P
html# i8 E! a. V: z; w
<title><?php $this->archiveTitle(array(
: g$ j0 S& q: ~. M 'category' => _t('%s'),8 p! M5 w8 V% C# x/ ~' R8 p+ x( Z
'search' => _t('Search "%s"'),7 ^* P1 z6 L& J/ B; N
'tag' => _t('Tag "%s"'),$ M( V! U9 h0 z7 v$ q
'author' => _t('Author "%s"'),
, {% b0 Y# R0 y6 x 'date' => _t('Archive "%s"'),! D7 H- u5 a/ U* H$ a7 }/ a
'default' => ''- f0 y% I! u: A, X& i' p
), '', ' - '); ?><?php $this->options->title(); ?>
; Q8 y% o1 D1 m/ P- n" P9 u& l</title>
5 l* d' l5 t; o7 I$ z10.使用主题2 M" X$ k' r4 p
: Z8 C! V& R4 A: ^8 m' ^6 G( o登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。
* l, o }6 H& A, S' i/ o
7 C+ f" r; p3 m& t8 G1 S3 m以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。! l: u' M; X) {8 X* w, {2 }; e+ |
% L! m. I6 L3 a3 ^2 S |
|